React.js Tutorial: Let’s “Hook” Up
React.js Tutorial: Let’s “Hook” Up
In this post, we take a look at how to use the basic hooks that come with the React API.
Join the DZone community and get the full member experience.Join For Free
With the introduction of React 16.8 in 2018, the React team came up with the concept of “Hooks.” In this post, we are going to explore the reasons behind creating hooks and how to use them in a React application.
In React, we can create two types of components: Functional/Stateless components and Class/Stateful components.
Mostly, we create a class component when we have a requirement to maintain a state or to use lifecycle methods in our component. But, in reality, there is no actual class present in React, which means the classes in React are just syntactic sugar to to help it look more like popular OOP classes and these class components will eventually convert to functional components.
But in order to resemble OOP classes, the classes in React have done more damage than good.
Reasons to Avoid Class Components
- The components are huge and thus difficult to manage and debug.
- There's lots of boiler plate code that is required to create a single class component.
- “Binding” and “this” in class components are confusing.
- Unused methods in the class component are not removed in the minified files.
- Class components make hot reloading difficult.
- Class components substantially reduce the capiblities of compiler optimization.
To overcome these impediments, the React team came up with a new concept called “Hooks.”
According to the React docs, a hook is a special function that lets you “hook into” React features.
The idea behind hooks is to provide all the capabilities that we get in a class component to a functional component. The two most common capabilities of class components are state and lifecycle methods. Below I have given some examples which show how we can use hooks to achieve the two aforementioned class component capabilities.
State With Hooks
Let’s look at an example to understand how to create and use state in a functional component with the help of hooks:
In this example, we use a new term called
useState that we have destructured from the React API.
useState is a hook which helps in the creation of state in a stateless or functional component.
useState is a method in which we can pass an argument and that argument will be treated as the default or initial value of the state variable. If we don’t pass in any arguments, then 'undefined' will be assigned to the state variable. Here that state variable is ‘
useState method returns a pair of values: the current state and the method to update it.
const [ increment, setIncrement ] = useState(0)
This line of code will create a state variable called
increment and allocate a value of
0 to that variable. To assign a different value to this variable, we have defined a method called ‘
setIncrement.’ So whenever we want to change the value of this variable we can do it only through
setIncrement, as we did while clicking the button.
Let’s take another example in which we will use
useState more than once to create multiple state variables:
In this example we are using two
useState methods to create two separate state variables and we also have two different methods to assign new values to these state variables. In a similar fashion to what we did above, we can create any number of state variables using multiple
useState hooks and assign them different default values and create separate methods to handle each one of them.
Lifecycle Methods With Hooks
To provide lifecycle methods the capability to act as a functional component, React provide us a hook called
useEffect hook serves the same purpose as
componentWillUnmount. Let’s look at some examples to understand the usage of the
In this example, we can observe a new term,
useEffect, that we have de-structured from the React API.
useEffect is a hook which helps to provide
componentDidMount as well as
componentDidUpdate life cycle methods the capability to act as functional components.
useEffect is a method which takes a function as an argument. In this example, after the component is rendered,
useEffect will be called for the first time. This means it is acting as the
componentDidMount lifecycle method and it will change the title of the document. Now, if the user clicks the button, the state variable's (
increment) value will be updated and the component will be rendered again. After rendering,
useEffect will be called again, but this time it will act as
componentDidUpdate. So now every time the component is rendered,
useEffect will be called.
useState, we can use multiple
useEffect methods in a single functional component. Let’s take another example to explain that scenario:
Here in this example, we are using more than one
useEffect method and both will run after each render.
useEffect method can take another argument of type array. This argument is used as a reference to compare the current value of the variable specified in the array with the previous value of the same variable. This scenario is used to conditionally trigger the first argument of the
In this example, we have specified the state variable (
increment) as the second argument of the
useEffect hook, so now
useEffect's first argument will only trigger if the value of
increment changes. When we click on the second button, the state variable
isValid will change and the component will render again but
useEffect will check whether the
increment state variable has changed or not; if it doesn’t find any changes it will not execute its first argument which is a method.
There can also be multiple arguments present in the array, if any one of the array variables' value changes, then
useEffect will be triggered.
From these examples we can conclude we are able to overcome all the impediments presented by class components and, in the future, hooks will be used more and more in React projects.
There are also many advanced hooks present in the Hooks API such as
useMemo, etc. You can learn about these in-depth from the offical React official site.
Published at DZone with permission of Mridul Chandel . See the original article here.
Opinions expressed by DZone contributors are their own.