React Hook useEffect has a missing dependency when passing empty array as second argument

Question

I have the following useEffect hook in my functional component that I only want to use once (when the component mounts) in order to load some data from an API:

const Gear = () => {
  const [weaponOptions, setWeaponOptions] = useState([
    {
      key: "0",
      label: "",
      value: "null"
    }
  ]);
  const [weapon, setWeapon] = useState("null");

  useEffect(() => {
    console.log("Gear.tsx useEffect");

    const fetchWeaponsOptions = async (): Promise<void> => {
      const weaponsData = await getWeapons();
      const newWeaponOptions: DropdownOptionType[] = [
        ...weaponOptions,
        ...weaponsData.map(({ id, name }) => {
          return {
            key: id,
            label: name,
            value: id
          };
        })
      ];
      setWeaponOptions(newWeaponOptions);
    };

    fetchWeaponsOptions();
  }, []);

  // TODO add weapon dropdown on change, selected weapon state
  const handleWeaponChange = ({ value }: DropdownOptionType): void => {
    setWeapon(value);
  };

  return (
    <div>
      <h2>Gear:</h2>
      <Dropdown
        defaultValue={weapon}
        label="Weapon"
        name="weapon"
        options={weaponOptions}
        onChange={handleWeaponChange}
      />
    </div>
  );
};

A React documentation note states that this is valid practice when you only want the effect to run on mount an unmount:

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.

But I am getting the following create-react-app linter warning:

35:6 warning React Hook useEffect has a missing dependency: 'weaponOptions'. Either include it or remove the dependency array react-hooks/exhaustive-deps

The useEffect triggers if the weaponOptions array changes if I pass it as a dependency, resulting in an endless loop because the hook itself changes the weaponOptions state. The same thing happens if I omit the empty array argument.

What is the correct approach here?

It will, please show us where does weaponOptions comes from — Dennis Vash
– Dennis Vash, Commented Feb 1, 2020 at 15:22
@DennisVash sry, added the whole functional component code to the initial question to make things clearer — Miha Šušteršič
– Miha Šušteršič, Commented Feb 1, 2020 at 15:24

Dennis Vash · Accepted Answer · 2020-02-01 15:28:29Z

5

I only want to use once (when the component mounts) in order to load some data from an API

Therefore according to your logic, you don't need to depend on the component's state:

const INITIAL = [
  {
    key: '0',
    label: '',
    value: 'null'
  }
];

const App = () => {
  const [weaponOptions, setWeaponOptions] = useState(INITIAL);

  useEffect(() => {
    const fetchWeaponsOptions = async () => {
      const weaponsData = await getWeapons();
      const weaponsOptions = [
        ...INITIAL, // No state dependency needed
        ...weaponsData.map(({ id, name }) => {
          return {
            key: id,
            label: name,
            value: id
          };
        })
      ];
      setWeaponOptions(weaponsOptions);
    };

  }, []);

  return <></>;
};

But, it is common when you want to use a useEffect once, and it depends on a state, to use a boolean reference like so:

const App = () => {
  const [weaponOptions, setWeaponOptions] = useState(INITIAL);

  const isFirstFetch = useRef(true);

  useEffect(() => {
    const fetchWeaponsOptions = async () => {...}

    if (isFirstFetch.current) {
      fetchWeaponsOptions();
      isFirstFetch.current = false;
    }
  }, [weaponOptions]);

  return <></>;
};

answered Feb 1, 2020 at 15:28

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Miha Šušteršič Over a year ago

This makes perfect sense :). Thanks a lot

Johnny Zabala · Accepted Answer · 2020-02-01 15:28:01Z

0

As you can see that is not an error but a warning. React is telling you that you are using weaponOptions inside useEffect but you didn't pass it as a dependency. Again, that is just a warning, you don't have to do it.

answered Feb 1, 2020 at 15:28

Johnny Zabala

2,4811 gold badge16 silver badges16 bronze badges

Collectives™ on Stack Overflow

React Hook useEffect has a missing dependency when passing empty array as second argument

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related