useEffect dependency array understanding

Question

Hello I am learning about the useEffect hook in react, and I need some clarification. It is my understand that when we provide an empty dependency array that the code inside of the useEffect hook will only run once during the application's initial mount. I need some helping understand why the code below runs every time I refresh the page even though I provided an empty dependency array?

Thank you

const [numberOfVistors, setnumberOfVistors] = useState(() => {
    localStorage.getItem("numberOfVistorsKey")
    
  });

  useEffect (() => {

    let vistorCount = localStorage.getItem("numberOfVistorsKey")
        
        if (vistorCount > 0)
        {
           vistorCount = Number(vistorCount) + 1 
           localStorage.setItem("numberOfVistorsKey", vistorCount)
           setnumberOfVistors(vistorCount)
        }
        else
        {
          vistorCount = 1 
          setnumberOfVistors(vistorCount) 
          localStorage.setItem("numberOfVistorsKey", vistorCount)
        }

    }, [])

Simple answer is that your component mounts every time you refresh the page. If you mount it once and cause a re-render, useEffect won't run again. — cSharp
– cSharp, Commented Apr 21, 2022 at 1:52

CertainPerformance · Accepted Answer · 2022-04-21 01:53:20Z

2

The context of an application does not persist across multiple pageloads or refreshes except through the few ways that allow for persistent data - such as local storage, cookies, and an API with a server somewhere. For the same reason, doing

let num = 5;
button.onclick = () => { num = 10; }

results in num still being 5 after you click and reload the page - because reloading the page starts the script from the very beginning again, on the new page.

If you want to keep track of whether that particular section of code has ever run before, use a flag in storage, eg:

useEffect(() => {
  if (localStorage.hasVisitedBefore) return;
  localStorage.hasVisitedBefore = 'yes';
  // rest of effect hook
, []);

answered Apr 21, 2022 at 1:53

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raphael Rafatpanah · Accepted Answer · 2022-04-21 01:52:10Z

1

I need some helping understand why the code below runs every time I refresh the page even though I provided an empty dependency array?

Every time you refresh the page, the React component mounts for the first time.

answered Apr 21, 2022 at 1:52

Raphael Rafatpanah

20.2k28 gold badges106 silver badges176 bronze badges

Comments

Manishyadav · Accepted Answer · 2022-04-21 01:56:15Z

0

useEffect(..., []) was supplied with an empty array as the dependencies argument. When configured in such a way, the useEffect() executes the callback just once, after initial mounting.

Try going through it !!

answered Apr 21, 2022 at 1:56

Manishyadav

1,8562 gold badges13 silver badges28 bronze badges

Comments

DevProgrammer · Accepted Answer · 2022-04-21 02:14:05Z

0

Whenever you refresh the page, React component will be re-rendered. Therefore useEffect() is called everytime. In order to avoid it, you have to do like this.

const [numberOfVistors, setnumberOfVistors] = useState(() => {
    localStorage.getItem("numberOfVistorsKey") 
});
useEffect (() => {

    let vistorCount = localStorage.getItem("numberOfVistorsKey")
        
        if (vistorCount > 0)
        {
           vistorCount = Number(vistorCount) + 1 
           localStorage.setItem("numberOfVistorsKey", vistorCount)
           setnumberOfVistors(vistorCount)
        }
        else
        {
          vistorCount = 1 
          setnumberOfVistors(vistorCount) 
          localStorage.setItem("numberOfVistorsKey", vistorCount)
        }

    }, [numberOfVistors])

This code will render your component whenever numberOfVistors are changed.

answered Apr 21, 2022 at 2:14

DevProgrammer

1038 bronze badges

1 Comment

Mario Over a year ago

doing this causes an infinite loop.

Collectives™ on Stack Overflow

useEffect dependency array understanding

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related