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

[mostakimvip06]

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 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 chile telemarketing data 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.

For example, react-router provides 4 new hooks:

useHistory,
useParams,
useLocation,
useRouteMatch
And redux e.g.:

useDispatch,
useSelector,
useStore
Summary
The hooks I presented above are not everything. I encourage you to look at the documentation and test the functional components on your own. This approach allows us to easily maintain clean code and makes many things easier. If you are creating advanced sales services, designing sales portals and creating a sales platform using React and hooks can significantly streamline the process. Additionally, if you need help with creating online stores Wrocław or professional online stores Wrocław , our e-commerce agency Wrocław is ready to cooperate.