Why is useEffect running twice?

Question

import { useContext, useEffect, useState } from 'react';

const Log =  ()  =>  {
    useEffect(()  => {
        console.log('Running ...')
    },[])

    return(<p>here</p>)

}

export default Log;

Whenever this code runs, I get Running... messages twice in the browser console.

I think it should run once, as I have an empty second parameter in useEffect.

Can anybody explain why it is getting run twice?

It depends on the context. Most likely it's something up on the tree. — kevinrodriguez-io, May 24 '22 at 21:59
Sounds like you have [``](https://reactjs.org/docs/strict-mode.html) enabled? — pilchard, May 24 '22 at 22:02
Does this answer your question? [React 18, useEffect is getting called two times on mount](https://stackoverflow.com/questions/72238175/react-18-useeffect-is-getting-called-two-times-on-mount) — Giorgi Moniava, May 25 '22 at 07:41

score 34 · Answer 1 · answered May 24 '22 at 22:21

34

This is due to <StrictMode> most likely in your root tree.

What is strict mode?

StrictMode is a tool for highlighting potential problems in an application.

How does it make useEffect() run twice?

It activates additional checks and warnings for its descendants, or in other words... renders twice.

Note: Strict mode checks are run in development mode only; they do not impact the production build.

answered May 24 '22 at 22:21

gavin

1,224
5
17

For a more detailed answer visit https://stackoverflow.com/a/72238236/15288641 – Youssouf Oumar Oct 01 '22 at 10:13

score 1 · Answer 2 · answered May 25 '22 at 00:41

1

If useEffect doesn't have any dependencies, the component itself is called only once.

This answer will help you.

React Hooks: useEffect() is called twice even if an empty array is used as an argument

answered May 25 '22 at 00:41

Maradox

620
2
13

score 1 · Answer 3 · answered May 25 '22 at 03:10

As the dependency list of useEffect() sets empty, "console.log" will automatically run whenever the Log component re-renders.
I think there might be some changes of context or parent component from component tree.
Please check your project structure.

<ContextProvider.Provider value={setGlobalState}>
  <ParentComponent>
    <Log/>
  </Parent Component>
</ContextProvider.Provider>

score 1 · Answer 4 · answered Jan 18 '23 at 10:14

You can prevent running useEffect() twice by using the following way,

import { useEffect, useRef } from 'react';
const Log = () => {
    // initiate dataFetch
    const dataFetch = useRef(false)

    useEffect(() => {
        console.log('Running ...')

        // start:: prevent executing useEffect twice
        if (dataFetch.current)
            return
        dataFetch.current = true
        // end:: prevent executing useEffect twice
    }, [])

    return (<p>here</p>)
}

export default Log;

Why is useEffect running twice?

4 Answers4

Linked

Related