skip to Main Content

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.

2

Answers


  1. 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 () = {}}, [])

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search