Intro to the React useEffect hook
In this post we will give you information about Intro to the React useEffect hook. Hear we will give you detail about Intro to the React useEffect hookAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to use the useEffect hook in react with the help of examples.
Note: If you don’t know about hooks then check out my react hooks introduction.
useEffect hook
The useEffect hook helps us to use the lifecycle methods in functional components.
They are three lifecycle methods we can use in useEffect hook which are componentDidMount, componentDidUpdate, and componentWillUnmount.
Let’s learn the useEffect by using examples.
import React, { useEffect, useState } from "react";function App() { const [value, setValue] = useState(0); // this function runs when component mounts and component updates useEffect(() => { document.title = "My app"; }); return ( <div className="App"> <h1>{value}</h1> <button onClick={() => setValue(value+1)}>Increment</button> </div> );}In the above code, we imported two hooks which are useEffect and useState.
If you don’t know about useState hook then checkout my previous tutorial
The useEffect hook takes the function as an argument and run the function whenever the componentmounts to the DOM.
We also added an increment button which is used to increment the value and re-renders the dom but whenever the component is re-rendered useEffect re-runs the function we passed as an argument because currently, we activated two lifecycle methods componentDidMount, componentDidUpdate.
To stop the componentDidUpdate lifecycle method we need to pass an empty array[] as a second argument to the useEffect hook.
import React, { useEffect, useState } from "react";function App() { const [value, setValue] = useState(0);//The function only runs when component mounts to dom useEffect(() => { document.title = "My app"; },[]); return ( <div className="App"> <h1>{value}</h1> <button onClick={() => setValue(value+1)}>Increment</button> </div> );}Now, we stopped running the function when a component is re-rendered.
Instead of leaving the array empty, we can also pass a conditional value to the array to run the function whenever the given condition is true.
function App() { const [value, setValue] = useState(0); const [active, setActive] = useState(false);//The function runs when component mounts to dom useEffect( () => { document.title = "My app"; if (value === 5) { setActive(!active); } }, // re-run the function when value === 5 [value === 5] ); return ( <div className="App"> <h1>{value}</h1> {/*We only disabled the button when value===5*/} <button onClick={() => setValue(value + 1)} disabled={active}> Increment </button> {active && <p>You've reached your limit for today</p>} </div> );}In the above code, we passed the conditional value===5 to the array so that the function runs initially when component mounts to dom and it runs again when the value reaches to 5.
Have you seen in the above image we disabled the button when the value reaches to 5?
useEffect hook Data Fetching example
We can also use the useEffect hook for the data fetching in functional components.
import React, { useState, useEffect } from "react";import ReactDOM from "react-dom";const useFetch = url => { const [data, setData] = useState(null); async function fetchData() { <span>const response = await fetch(url); const json = await response.json(); setData(json); } useEffect(() => {fetchData()},[url]); return data;};function App() { const data = useFetch("https://jsonplaceholder.typicode.com/todos/1"); if (!data) { return <div>Loading...</div>; } else { return ( <ul> <li>{data.id}</li> <li>{data.title}</li> </ul> ) }}export default App;Hope this code and post will helped you for implement Intro to the React useEffect hook. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs