React this state typescript

React Hooks with Typescript: Use State and Use Effect.

In this blog, we are going to see how functional components can be used with react hooks to reduce the amount of code used in writing class-based components and still achieving all the features it has.

We are going to use typescript for this tutorial, so that our code remain 100% typesafe, and I must say if you are doing a big project, Typescript is a must feature one should go with, which helps to keep the code clean.

 npx create-react-app codersera-hooks-tutorial --template typescript # or yarn create react-app codersera-hooks-tutorial --template typescript 

The above command will create a project with the name codersera-hooks-tutorial. Once it is done, go straight to the directory and either npm start or yarn start will kickstart the project.

We will be using yarn throughout this tutorial to maintain consistency.

Let us now integrate antd ( a design library by the name of ant design), which we will be using to have some standard UI components. And, this does not have to do anything with hooks or react in general.

Integrating antd in react with hooks

# src/index.tsx . import 'antd/dist/antd.css'; . 

That’s all, we now have a complete typescript setup off react with antd design library integrated.

Using State with hooks in React (React.useState)

Let us see how the state is used with hooks. For this, we are going to create a simple form component, that will show the value in the input field upon submitting the form.

#src/components/StateHooksComponent.tsx import React from "react"; interface Props < >const StateHooksComponent: React.FC = (<>) => < return ( 
State Hooks component
 ) > export default StateHooksComponent; 

After this, your App.tsx file would look like this:

 import React from 'react'; import './App.css'; import StateHooksComponent from './components/StateHooksComponent'; const App: React.FC = () => < return ( 
 
 ); > export default App; 

Now, let’s add a button, input field, and output view in StateHooksComponents.

 const [name, setName] = useState(''); 

The useState will return 2 things, one is the state variable, and the other is the dispatcher to set this state. We can use any naming convention, but it’s obvious to use the following syntax :

[xxx, setXxx]

The handler is assigned with an arrow function. For instance, there are two handlers for handlingSubmit and handling onChangeEvent.

 const handleSubmit = (e: FormEvent) => < e.preventDefault(); >; const onNameChange = (e: ChangeEvent) => < setName(e.target.value); >; 

After making the following edits, your component will look something like this:

 import React, from "react"; import from "antd"; interface Props < >const StateHooksComponent: React.FC = (<>) => < const [name, setName] = useState(''); const handleSubmit = (e: FormEvent) => < e.preventDefault(); console.log(name); >; const onNameChange = (e: ChangeEvent) => < setName(e.target.value); >; return ( 
>  onChange= /> Submit  
 ) > export default StateHooksComponent; 

And here is the output that you should expect after typing some content in the box and clicking on submit button.

Using Effects/Lifecycle with Hooks (React.useEffect)

useEffect basically provides the features of componentWillUpdate, componentWillMount, componentWillUnMount all in one.

 useEffect(() => < console.log('Component mounted'); return () => < console.log('Component will be unmount') >>, []); # notice the empty array here, this is optional 

Now, the above code is an example of generic useEffect, notice the empty array above. There are 3 ways in which the useEffect can be used.

• If the arrayis empty, the functionwill get executed onceduring the mounting of the component, and the return function will be executed during unmounting. For example, this can be used to initiate APIcallsto fetch datathat needs to be shown on the UI.
• If no array is provided, the functionwill be executed on before and after each render, this is used to record how many times renderingis taking place.
• If there is any statevariable inside the array, then the effects functionis executed once on the mounting of the component, and then each time the stateis changed, the functionis called. A very useful example of this property is, suppose you want to show an autosuggestoptions, let’s say user is typing in an input field and based on the initial text you want to show him auto-suggested words/sentence, then you can use this property to fetch the datafrom backendeach time the inputvalue is changing.

 . const [name, setName] = useState(''); const [options, setOptions] = useState([]); useEffect(()=> < if(name)< // fetch auto suggest options from backend, setOptions(data); >>, [name]) . 

Now each time user type any character in the input field, which is assigned to name, auto-suggest data will be fetched from the server and updated to options state, which can be used to show the auto-suggest options

Below is the code block to show how the use effect will be called :

 import React, from "react"; import from "antd"; interface Props < >const StateHooksComponent: React.FC = (<>) => < const [name, setName] = useState(''); const [address, setAddress] = useState(''); const handleSubmit = (e: FormEvent) => < e.preventDefault(); console.log(name); >; const onNameChange = (e: ChangeEvent) => < setName(e.target.value); >; const onAddressChange = (e: ChangeEvent) => < setAddress(e.target.value); >; useEffect(() => < console.log('Component mounted'); return () => < console.log('Component will be unmount'); >>, []); useEffect(() => < console.log(`Any state changed Name: $, Address: $`); >); useEffect(() => < console.log(`Name changed: $`); >, [name]); return ( 
>    Submit  
 ) >; export default StateHooksComponent; 

NOTE: Never change the state of the variable in 2, and never change the state of the variable you are watching in case 3 inside effect function, otherwise use effects will create an endless loop.

The above code will produce the following output:

So, this is how you can use functional components instead of class–based components and still use all the features that you were able to do with the class lifecycle methods.

1. Should I use TypeScript with React hooks? Evidently, using TypeScript with React hooks is easier than using it with React classes. And because strong typing is valuable security for code safety, you should consider using TypeScript if your new project uses hooks. You should definitely use hooks if you want some TypeScript.
2. Is React good with TypeScript? Using TypeScript with React provides better IntelliSense, code completion for JSX.
3. What is TypeScript useEffect? useEffect with TypeScript

Источник