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

React.js Tutorial: Let’s “Hook” Up

DZone 's Guide to

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.

· Web Dev Zone ·
Free Resource

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

  1. The components are huge and thus difficult to manage and debug.
  2. There's lots of boiler plate code that is required to create a single class component.
  3. “Binding” and “this” in class components are confusing.
  4. Unused methods in the class component are not removed in the minified files.
  5. Class components make hot reloading difficult.
  6. Class components substantially reduce the capiblities of compiler optimization.

To overcome these impediments, the React team came up with a new concept called “Hooks.”

React.js 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

Example 1

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.

Basically, 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 ‘increment.’  The 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.

Example 2

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. The useEffect hook serves the same purpose as componentDidMountcomponentDidUpdate, and componentWillUnmount. Let’s look at some examples to understand the usage of the useEffect hook:

Example 1

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.

Basically, 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.

Example 2

Similar to 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.

Example 3

The 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 useEffect method.

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.

Conclusion

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 useReduceruseCallbackuseMemo, etc. You can learn about these in-depth from the offical React official site.



If you enjoyed this article and want to learn more about React, check out this collection of tutorials and articles on all things React.

Topics:
hooks ,javascript ,react.js tutorial ,web dev ,react hooks

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}