title: React useEffect() only run on first render with dependencies
body: <p>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 <code>[]</code>. However per the React <a href="https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies" rel="noreferrer">docs</a> this is not recommended. Also under the react useEffect docs it says</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>I have the following code:</p>
  
  <pre><code>  useEffect(() =&gt; {
      container.current = new VisTimeline(container.current, items, groups, options);
    }, [groups, items, options]);
  </code></pre>
  
  <p>I want it to run only one time.</p>
  
  <p>Is the only way around this to let it run each time and <code>useState</code> to track it has ran before like this:</p>
  
  <pre><code>  const [didLoad, setDidLoad] = useState&lt;boolean&gt;(false);
  
    useEffect(() =&gt; {
      if (!didLoad) {
        container.current = new VisTimeline(container.current, items, groups, options);
        setDidLoad(true);
      }
    }, [didLoad, groups, items, options]);
  </code></pre>