React Hooks - 0 vs. empty array as second argument in useEffect

Question

I saw someone use 0 instead of an empty array for the second argument in useEffect.

So instead of

useEffect(() => {
    console.log('Run once');
}, []);

it was

useEffect(() => {
    console.log('Run once');
}, 0);

It seems to have the same effect so I'm wondering why he used that?

An empty array is considered 0 depending on how you evaluate it. For instance [] == 0 is true, but [] === 0 is false. So maybe in this case there isn't a strict comparison under the hood and it does not matter if you use 0.

Just following the react docs i would use an empty array.

React docs:

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run. This isn’t handled as a special case — it follows directly from how the dependencies array always works.

I'm wondering if 0 is a potentially more concise binary argument to use over [], or if using 0 is a bad practice, or if it doesn't matter and [] is just a preferred React convention?

Thanks.

Answer 1

This is the signature for the useEffect function

export function useEffect(
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null,
): void {
  const dispatcher = resolveDispatcher();
  return dispatcher.useEffect(create, deps);
}

There you can see it only accepts an Array, void or null, so the correct answer to your question is to always send an array if you want to run it just once

Answer 2

Nevermind the console log error says it all:

react-dom.development.js:88 Warning: useEffect received a final argument that is not an array (instead, received number). When specified, the final argument must be an array.

Answer 3

I think using [] would be the better way because of the purpose of the second argument of useEffect. Even if all you want to do is make sure the effect is only ran once, you should still treat the argument as an array of dependencies.

Answer 4

React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies react-hooks/exhaustive-deps

getting this warning when trying to run the code with putting 0 or null so i guess send an array if you want to run the code once that will be better