React hook useeffect has a missing dependency

Eslint throws react hook useeffect has a missing dependency when we include partial dependency parameters. It says you should either include all or none. This is just a warning and not an error.

First of all, this warning is wrong and Eslint should improve it in their next versions. There are many cases when you want to run useEffect for a particular dependency parameter. There you can’t include all parameters or remove all of them.

Check out this code –

import React from "react";

export default function App() {
  const [parameter1, setParameter1] = React.useState(0);
  const [parameter2, setParameter2] = React.useState(0);

  React.useEffect(() => {
    document.getElementById("logsContainer").innerHTML =
      document.getElementById("logsContainer").innerHTML +
      "<p>Without Parameter useEffect Runs. This will run during component mount and unmount only.</p>";
  }, []);

  React.useEffect(() => {
    document.getElementById("logsContainer").innerHTML =
      document.getElementById("logsContainer").innerHTML +
      "<p>With Parameter 1 useEffect Runs. It runs when parameter1 changes. Value - " +
      parameter1 +
      "</p>";
  }, [parameter1]);

  React.useEffect(() => {
    document.getElementById("logsContainer").innerHTML =
      document.getElementById("logsContainer").innerHTML +
      "<p>With Parameter 2 useEffect Runs. It runs when parameter2 changes. Value - " +
      parameter2 +
      "</p>";
  }, [parameter2]);

  React.useEffect(() => {
    document.getElementById("logsContainer").innerHTML =
      document.getElementById("logsContainer").innerHTML +
      "<p>With Parameter 1 and Parameter 2 useEffect Runs. It runs when any parameter changes. Value - (" +
      parameter1 +
      ", " +
      parameter2 +
      ")</p>";
  }, [parameter1, parameter2]);

  return (
    <div className="App">
      <h4>useEffect Logs</h4>
      <p>
        <em>
          We are using 4 useEffect functions -{" "}
          <ol>
            <li>Without any parameter</li>
            <li>with parameter 1</li>
            <li>with parameter 2</li>
            <li>with parameter 1 and parameter 2</li>
          </ol>
        </em>
      </p>
      <div
        id={"logsContainer"}
        style={{ height: 300, border: "1px solid", overflow: "auto" }}
      ></div>
      <p>
        <button onClick={(e) => setParameter1(parameter1 + 1)}>
          Change Parameter 1
        </button>{" "}
        <button onClick={(e) => setParameter2(parameter2 + 1)}>
          Change Parameter 2
        </button>
      </p>
    </div>
  );
}

    Tweet this to help others

Here we are using 4 useEffect functions –

1. Without any dependency parameter – This will run only during mounting and unmounting of component.
2. With parameter1 – This will run when state value, parameter1 changes.
3. With parameter2 – This will run when state value, parameter2 changes.
4. With both parameter1 and parameter2 – This will run when any of state value changes.

So, you can see that depending on the situation we need to run appropriate useEffect function. The ESLint warning is wrong and you can suppress it by using it at the top of your file –

/* eslint-disable react-hooks/exhaustive-deps */

Live Demo