React hooks - what are they and what are their uses?

[mostakimvip06]

React hooks are a new approach to writing components. Previously, we mostly used classes. We did this because they have a lot of useful methods, like lifecycle methods and state, and functions didn't. Hooks change that and now allow us to create functional components that will allow us to use the lifecycle, have state, and more.

Contents
Managing State in React.js with useState
Component Life Cycle
Program optimization with useMemo
Hook useContext - using context
Hooks, and external libraries such as react-router or redux
Summary
An additional advantage is the very simple creation of reusable components . When using classes, we had to do some gymnastics, e.g. writing HOCi (high order components).

Below I will briefly introduce some basic hooks.

Managing State in React.js with useState
The first, basic hook that we will use most often is useState . It is the equivalent of this.state = {} used in class components.

It allows us to create the state of our application along with a method that updates a given variable.

In the image below we have an example of how we can initialize it. The value passed to useState will be assigned to the value variable , and setValue will allow us to update the state.

Determining the initial value
In terms of notation, we are dealing with destructuring here. We could just as easily have written the above code like this and it would work exactly the same:

Destructured state
To update the state and render the application, we need to execute the method assigned to the variable - in our case setValue . In the following notation, the updateValue call will assign a new value to value and it will uae telemarketing data be available only in the next render. What does it mean? If in updateValue , after calling setValue , we wanted to, for example, console the new value, we would get the old one. This is because the state in a given render does not change. And only in the next one will we have access to the new value.

setValue
It is worth adding that we can declare multiple state variables. And use them independently of others.

Component Life Cycle
In class components we could use component lifecycle methods such as componentDidMount or componentDidUpdate , in functional components we have useEffect . This is the equivalent of the previously mentioned componentDidMount , componentDidUpdate and componentWillUnmount .

useEffect will be executed when the component is loaded, unmounted or whenever some state value is changed. Unless we specify in which case we want to execute the method. We do this by passing as the second argument a variable or array with dependencies that will specify when the hook should be called.

I have to mention that we can use several lifecycle methods at the same time, meaning we can write a different effect for each variable. For example:

useEffect
The first effect will be executed (I skip loading and unmounting the component) when the application state changes, and the second when value is changed.

Program optimization with useMemo
Often we want to perform some computational operation that requires data, e.g. provided by the user. To optimize the program, it is worth using the useMemo hook , which calls a given function only when the given value differs from the previously given one.

useMemo
Hook useContext - using context
If we used createContext in our application, we can receive the data passed in the context in a very simple way using hooks.

useContex
Now under the theme variable we have everything that we passed as value in the Provider in the component above.

Hooks, and external libraries such as react-router or redux
Finally, it is worth adding that external libraries that are very often used in conjunction with React , such as react-router or redux , also support hooks and make them available in their API.