Bug: Passing an array as a `useEffect` dependency causes an infinite loop

React version: 16.13.0

Steps To Reproduce

When the following code is run in a React component, it causes an endless loop. Passing an array as a dependency to useEffect (in this case, args), causes that to happen, but it shouldn’t.

I’ve read that I can use [args.length] to stop this from happening, but then the ESLint rule react-hooks/exhaustive-deps throws an error, so I want to avoid doing it that way.

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

export default function Home() {
  const args = ['a'];
  const [value, setValue] = useState(['b']);

  useEffect(() => {
    setValue(['c']);
  }, [args]);

  console.log('value', value);
}

Notice in the code above, that I don’t even use or modify args at all, in the useEffect callback.

If I change the value of args to a string, like const args = 'a', then there is no endless loop. So the problem seems to occur when the dependency is an array.

The current behavior

The page runs in an infinite loop.

The expected behavior

It should only run once.

[FuzzyFade]

@FuzzyFade Yeah, this works! So is this necessary for any non-string values passed to useEffect deps?

I don’t know what your business want to do, but as long as the outer layer of FC is OK. You don’t need to write useRef. This is purely a personal habit. If you write according to you, you basically initialize an array object every time, so the arg every time is different, resulting in an infinite loop.

Actually you can also write like this：

import React, { useEffect, useState, useRef } from 'react';

export default function Home() {
  const [value, setValue] = useState(['b']);
  const {current:a} = useRef(['a'])
  useEffect(() => {
    setValue(['c']);
  }, [a])
}

[zanona]

I got around this by adding the stringified version of the array as dependency instead.

const a = ['a','b','c'];
useEffect(() => {...}, [a.toString]);

This came in handy when having that dependency inside custom hooks

const products = useProducts(['100-01', '100-02']);

function useProducts(skus) {
    const [products, setProducts] = useState([]);
    useEffect(() => fetch(...).then(setProducts) , [skus.toString()]);
    return products;
} 

I guess this works because it’s an array of strings, however if that would be an array of objects, I probably would then pass a reference as mentioned before.