{{announcement.body}}
{{announcement.title}}

React Next: React Hooks - the Main Uses

DZone 's Guide to

React Next: React Hooks - the Main Uses

Part of the Apiumhub Frontend team had the opportunity to attend the React Next conference in Tel Aviv, a conference focused mainly on React and React Native.

· Web Dev Zone ·
Free Resource

Part of the Apiumhub Frontend team had the opportunity to attend the React Next conference in Tel Aviv, a conference focused mainly on React and React Native. There, we had the opportunity to attend very interesting talks about React frameworks, optimization, and performance improvement of the React code, SEO with an SPA, and many others.

The talk that caught my attention was “Modern React – The Essentials” by Liad Yosef, in which he explained the latest React news, such as React Hooks, concurrent mode, suspense, lazy.
Personally, I was very interested in the use of React Hooks, and how this could change the development of React, so I will explain the main uses of Hooks in this article.

React Next: React Hooks – the main uses

useState hook

We will start by looking at a traditional React class, we have created a dropdown that is formed by a button that will execute the state toggle to show or hide our list of items:

JavaScript

sandbox

In the following example, we can see that when you click on the button we will execute the “handleClick” function that will change the value of the “isDropdownvVisible” state variable, so the list of HTML will react to this change and will show or hide the list based on the value of said variable.

Although it works correctly, we can see how we have to write a lot of code to execute a simple toggle of a Boolean. To solve this, React offers us the possibility of using Hooks.

Using Hooks allows us to use functions and still have status variables, which saves us all the verbosity involved in using a class.

For this we will use the “useState” function of React.

JavaScript


The imported one we will use as follows:

JavaScript

 

First, we will define an array that contains two variables:

  • Value: The name of the state variable that we want to define. In our case it will be called “isDropdownVisible”.
  • ModifierFunction: The name of the function that will modify our status. In our case, it will be called “toogleDropdownVisibility”.

Also within the “useState” function, we can define the initial value of our variable. In our case, it will begin to be false.

Rewriting the previous code using hooks instead of classes would look like this:

JavaScript


sandbox

useEffect Hook

In addition to allowing us to have a state without forcing us to use classes, the hooks offer us a multitude of possibilities, one of the most outstanding is the “useEffect” function that allows us to do side effects within our function. 

Using "useEffect", we notify React that we want the function we pass as a parameter to be executed in each render (by default), which saves us depending on lifecycle methods, such as  “componentDidUpdate”, “componentWillUnmount”, etc.

Let’s see an example using the component we have defined above:

JavaScript


Running the previous code, we can see how in each render of the component be will shown the value of the “isDropdownvVisible” variable.

In this case, we will not have any problem, since it is a simple logging of data, but what would happen if we wanted to make a http request when the value changed, would we have to do it in each render?
To avoid this, we can pass a second parameter to the “useEffect” function formed by an array with the value that we want to compare, and unless it is different, the function that we have defined as the first parameter of “useEffect” will not be executed.

JavaScript

 

In this case, it will only show us the value when it is “false”.

We have already seen how to use the hook of effects to encapsulate our logic, so we can create our own hooks to share functionalities between different components, such as data fetch, data parsing, etc.

This allows us to create our services and share them very quickly and cleanly. 

React Next: React Hooks Conclusion

As a conclusion for the use of Hooks, it offers us a radical change in the creation of our components and services, since we have gone from using classes to being able to use functions with internal status and we saved the entire “boilerplate” to implement all the flow of the Lifecycle of React using “useEffect”. So once these improvements are commented, you just have to try to adapt our code to the use of Hooks and enjoy it!

Topics:
frontend, hooks, react, tutorial, useeffect, usestate

Published at DZone with permission of Arnau Silvestre . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}