1

I recently started learning React, and I learn the useState hook, however I'm struggling to learn the useEffect hook.

I've looked at the documentation searched it up and also watched a video about it but I still can't find out what it is.

Jesse
  • 334
  • 15
Ivana
  • 34
  • 7
  • Also noteworthy: [React useEffect in depth / use of useEffect?](https://stackoverflow.com/questions/59841800/react-useeffect-in-depth-use-of-useeffect) – Mr. Polywhirl Aug 30 '23 at 15:57

2 Answers2

2

To understand useEffect, you have to understand React’s three lifestyle methods: Mounting, when the component is first render; Updating, when the component or state changes; and lastly, Unmounting.

useEffect as it says in the name defines a function (an effect) which will run at one of the three points. To differentiate between the three. You have a dependency array which defines when your effect will run.

For when the first page renders you would use an empty dependency array. For when a state changes you would use a dependency array which would look like this [state] and for when the component unmounts you would have an empty dependency array which would have a return statement in it which would run when it unmounts.

It would look like this:

useEffect(() => {}, [])

useEffect(() => {}, [state])

useEffect(() => {return () = {}}, [])

Jesse
  • 334
  • 15
0

I shall try to explain it in simple terms. useEffect is one of the most important hooks in react and is a way to handle life cycle of the component in which it is present.

useEffect runs on every render of the component (i.e when a state variable changes) and can also run every time a specific value changes that is mentioned in it's dependency array.

useEffect also provides a very useful cleanup function which can be used to remove any active listeners when the component changes

Here are a few examples:

  1. useEffect without dependency array
useEffect(() => {
    /*the code you want to run has to be in here which will keep running again and 
    again without stopping*/
})
  1. useEffect with empty dependency array
useEffect(() => {
    /*the code you want to run on every render has to be in here, the empty [] means 
    that the code will run everytime this component mounts*/
},[])
  1. useEffect with state variables in dependency array
useEffect(() => {
    /*the code you want to run on every render has to be in here, the dependency
    array with state means that the code will run everytime this component mounts as
    well as when these state variables change and the value will be captured by the
    useEffect*/
},[state1,state2])
  1. useEffect with state variables in dependency array and cleanup
useEffect(() => {
    /*the code you want to run on every render has to be in here, the dependency
    array with state means that the code will run everytime this component mounts as
    well as when these state variables change and the value will be captured by the
    useEffect*/


    /*cleanup is used to remove any unwanted loops, intervals, listeners when the 
    component unmounts*/
    return () => console.log("clean up");
},[state1,state2])
  1. A complete example for useEffect from w3schools
import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    let timer = setTimeout(() => {
    setCount((count) => count + 1);
  }, 1000);

  return () => clearTimeout(timer)
  }, []);

  return <h1>I've rendered {count} times!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Timer />);

If you still don't understand have a look at this

w3schools link for useEffect

react official documentation for useEffect

Tostiffent
  • 16