React useEffect() only run on first render with dependencies

Question

There are several other SO questions on this where the answer is either to eliminate the dependencies complaints via ESLint (I'm using typescript) or to do something else to still allow the second parameter of useEffect to be []. However per the React docs this is not recommended. Also under the react useEffect docs it says

If you pass an empty array ([]), the props and state inside the effect will always have their initial values. While passing [] as the second argument is closer to the familiar componentDidMount and componentWillUnmount mental model, there are usually better solutions to avoid re-running effects too often. Also, don’t forget that React defers running useEffect until after the browser has painted, so doing extra work is less of a problem.

I have the following code:

  useEffect(() => {
    container.current = new VisTimeline(container.current, items, groups, options);
  }, [groups, items, options]);

I want it to run only one time.

Is the only way around this to let it run each time and useState to track it has ran before like this:

  const [didLoad, setDidLoad] = useState<boolean>(false);

  useEffect(() => {
    if (!didLoad) {
      container.current = new VisTimeline(container.current, items, groups, options);
      setDidLoad(true);
    }
  }, [didLoad, groups, items, options]);

Answer 1

The way I handle this now is to put the appropriate dependencies in the list of dependencies.

Because I want the effect to run only one time, and because the effect only relies on some data when the component first mounts, it's perfectly fine to omit those dependencies. For example, the groups prop may change later, but this effect doesn't need to run again.

But, as a habit I don't omit the recommended dependencies and I always list them. If I were to intentionally omit something, I would add an eslint ignore statement... it's whatever convention you want to follow as long as you understand what is happening when that data changes and the effect does / does not run.

However the code I proposed, shown below, isn't the best solution if you do want to list the dependencies as it causes an extra render when didLoad changes.

 const [didLoad, setDidLoad] = useState<boolean>(false);

  useEffect(() => {
    if (!didLoad) {
      container.current = new VisTimeline(container.current, items, groups, options);
      setDidLoad(true);
    }
  }, [didLoad, groups, items, options]);

Instead of using state to track that the effect ran, I will use a ref (which doesn't need to be a dependency).

 const timelineLoaded = useRef<boolean>(false);

  useEffect(() => {
    if (!timelineLoaded.current) {
      container.current = new VisTimeline(container.current, items, groups, options);
      timelineLoaded.current = true;
    }
  }, [groups, items, options]);

Answer 2

Adding extra code to work around tooling is not good.

Solve the actual problem - in this case exclude the code you know works the way you want from the linter.

Specifically disable linting on the code where you know you do not want values in the useEffect dependency array. Add this above the useEffect code block:

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