React Hooks Tutorial | useState() and useEffect()

This tutorial help to understand How to use React Hooks useState() and useEffect(). We’ll learn to React hooks step by step into this react tutorial. Also, have a look at how the same logic would be implemented with classes. We’ll use state and other React features without writing a class.

What’s React Hooks

Hooks helps to create components by using state and other React features without writing a class. You can also build your own Hooks to share reusable stateful logic between components. React Hooks are now supported by React DevTools.

I ll cover following topics into this tutorial:

• How to use React hooks.
• How To create component with the same logic into the React class.

The React Hooks are available from React 16.8 stable release! You can use React Hooks for:

• React DOM
• React DOM Server
• React Test Renderer
• React Shallow Renderer

How To Install React

You can install 16.8.0 or higher version by using the following command:

npm install --save react@^16.8.0 react-dom@^16.8.0

Setting up the React Project

You can create a sample react application with the latest react version by running the following command:

npx create-react-app exploring-hooks

Please make sure, You should have one of the latest versions of Node.js.

How To use useState React Hooks

As we know earlier in the class component, We can access state using this.setState and classes are no longer needed to manage the internal state.

This is the most important React hook: useState. It’s a function exposed by react itself, you’ll import it in your components as:

import React, { useState } from "react";

Once, You have imported useState you’ll destructure two values out of it:

const [count, setCount] = useState(0)

The argument passed to useState() method is the actual initial state.

React Hooks useEffect

React introduced one more important hooks ie- useEffect. The useEffect serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes.

You can use useEffect into the functional component to fetch data etc whatever you want after the component renders.

As you can see, we have passed an empty array as a second argument to useEffect, which’ll prevent running every time a component gets new props or a state change happens.

You can also pass variables on which useEffect depends to re-run the logic passed into the useEffect.The empty array will run the effect hook only once.

Cleanup Using React Hooks

We can also use the useEffect method as a cleanup function once the component will destroy.The useEffect can return a function to clean up the effect as like componentWillUnmount() method:

This is the equivalent of componentWillUnmount() for classes

Conclusion:

We have created a component by using Hooks as well as using class. You can implement the same functionality both ways, You can create a functional component as well as class-based components.