React Hooks - useEffect fires even though the state did not change

Question

I have set up an effect inside my component, which changes the view if another state attribute changes. But for some reason, when the component mounts, the effect is run, even though the value of detailIndex has not changed.

const EventsSearchList = () => {     const [view, setView] = useState('table');     const [detailIndex, setDetailIndex] = useState(null);      useEffect(() => {         console.log('onMount', detailIndex);         // On mount shows "null"     }, []);       useEffect(         a => {             console.log('Running effect', detailIndex);             // On mount shows "null"!! Should not have run...             setView('detail');         },         [detailIndex]     );      return <div>123</div>;  }; 

Why is this happening?

UPDATE: In case it is not clear, what I am trying is to run the effect when the component updates because detailIndex changes. NOT when it mounts.

Answer 1

useEffect from React Hooks is by default executed on every render, but you can use second parameter in function to define when the effect will be executed again. That means that function is always executed on mount. In your situation your second useEffect will be run on start and when detailIndex changes.

More info: https://reactjs.org/docs/hooks-effect.html

Source:

Experienced JavaScript developers might notice that the function passed to useEffect is going to be different on every render. [...] You can tell React to skip applying an effect if certain values haven’t changed between re-renders. To do so, pass an array as an optional second argument to useEffect: [...]

Answer 2

In my case, the component kept updating even though I used the second argument in useEffect() and I was printing the argument to make sure it did not change and it did not change. The problem was that I was rendering the component with map() and there cases where the key changed, and if the key changes, for react it is a completely different object.