CODEWITHSUNDEEP
reactjs
Mario
Mario

Reputation: 71

useEffect dependency array understanding

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)
        }

    }, [])

Upvotes: 0

Views: 1524

Answers (4)

DevProgrammer
DevProgrammer

Reputation: 103

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.

Upvotes: 0

Manishyadav
Manishyadav

Reputation: 1728

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 !!

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370669

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
, []);

Upvotes: 2

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

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.

Upvotes: 1

Related Questions