This tutorial help to understand How to use React Hooks useState() and useEffect(). We’ll learn to React hooks step by step in 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 in 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.
import React, { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button> setCount(count + 1)}>
Add
</button>
);
}
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.
import React, { useState, useEffect } from "react";
export default function DataLoader() {
const [data, setData] = useState([]);
useEffect(() => {
fetch("http://localhost:3001/users")
.then(response => response.json())
.then(data => setData(data));
}, []);
return (<div>
<ul>{data.map(el => (
<li>{el.name}</li>
))}</ul>
</div>);
}
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:
useEffect(() => {
return () => {
console.log("cleaned up");
};
}, []);
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.
