ESLint: Getting the error “React Hook useEffect has missing dependencies”

Question

I am currently making a TodoList app using Recoil and React and I am getting the error:

 Line 45:6:  React Hook useEffect has missing dependencies: 'setTodoList' and 'todoList'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

I believe this is preventing the app from building. It works in development mode.

Please help me fix this!

Here is the concerned file:

export default function Todos() {
  // Global State Hooks
  const [todoList, setTodoList] = useRecoilState(todoState);
  const changing = useRevoilValue(changeState);
  const show = useRecoilValue(addState);
  const removing = useRecoilValue(removeState);
  const priority = useRecoilValue(priorityState);

  // **** CODE SEGMENT STARTS HERE ****

  useEffect(() => {
    if (priority) {
      setTodoList(
        todoList.slice().sort(function (a, b) {
          return a.priority - b.priority; // By priority
        })
      );
    } else {
      setTodoList(
        todoList.slice().sort(function (a, b) {
          return a.title.localeCompare(b.title); // By name
        })
      );
    }
    // Watches priority for sortButton, and editing, adding and deleting modes etc.
  }, [priority, changing, show, removing]);

  // **** CODE SEGMENT ENDS HERE ****

  return (
    <div className={styles.todos}>
      {/* Dynamically render  todo items */}
      {todoList.map((todo, index) => (
        <span key={todo.id} className={styles.todoItem}>
          <TodoItem key={index} item={todo} />
        </span>
      ))}
      {/* Todo Form only appears in adding mode */}
      {show ? <TodoForm /> : null}
    </div>
  );
}

Answer 1

This is a warning that React gives back. By this React wants us to use the setTodoList and todoList are the dependencies in the array of the 2nd argument.

  useEffect(() => {
    if (priority) {
      setTodoList(
        todoList.slice().sort(function (a, b) {
          return a.priority - b.priority; // By priority
        })
      );
    } else {
      setTodoList(
        todoList.slice().sort(function (a, b) {
          return a.title.localeCompare(b.title); // By name
        })
      );
    }
    // Watches priority for sortButton, and editing, adding and deleting modes etc.
  }, [priority, changing, show, removing,todoList,setTodoList]); // Added todoList and setTodoList as dependencies

However we have to be cautious of not creating an infinite loop in our Component. Because setTodoList() will trigger a re-render of the component and again useEffect() will be invoked. This will keep happening.

And if this happens The solution is to use useCallback() around setTodoList to prevent re-creation of the function every time (We may need to format our code a bit as well)

Answer 2

This error is caused by your eslint rules: https://reactjs.org/docs/hooks-rules.html You can turn off the rule in your eslint.rc by adding:

{
  "rules": {
    "react-hooks/exhaustive-deps": "off"
  }
}