<p dir="auto">Curly brackets (as the first line in return) causes "unexpected token" error</p>
<p dir="auto">For example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="render () {
  return (
      {/* Comment for my component - This line causes &quot;unexpected token&quot; error */}
      &lt;nav&gt;
      &lt;/nav&gt;"><pre class="notranslate"><code class="notranslate">render () {
  return (
      {/* Comment for my component - This line causes "unexpected token" error */}
      &lt;nav&gt;
      &lt;/nav&gt;
</code></pre></div>
<p dir="auto">Consider the following:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  const [mouseDown, setMouseDown] = useState(false);
  const onMouseDown = useCallback(() =&gt; { 
    setMouseDown(true);
  }, []);
  const onMouseMove = useCallback(e =&gt; { /* ... */ }, []);
  const onMouseUp = useCallback(() =&gt; {
    setMouseDown(false);
  }, []);
  useEffect(() =&gt; {
    if (mouseDown) {
      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
      return () =&gt; {
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
      }
    }
  }, [mouseDown]);"><pre class="notranslate">  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">mouseDown</span><span class="pl-kos">,</span> <span class="pl-s1">setMouseDown</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-c1">false</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">onMouseDown</span> <span class="pl-c1">=</span> <span class="pl-en">useCallback</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span> 
    <span class="pl-s1">setMouseDown</span><span class="pl-kos">(</span><span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">onMouseMove</span> <span class="pl-c1">=</span> <span class="pl-en">useCallback</span><span class="pl-kos">(</span><span class="pl-s1">e</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span> <span class="pl-c">/* ... */</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">onMouseUp</span> <span class="pl-c1">=</span> <span class="pl-en">useCallback</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-s1">setMouseDown</span><span class="pl-kos">(</span><span class="pl-c1">false</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-en">useEffect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">mouseDown</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">addEventListener</span><span class="pl-kos">(</span><span class="pl-s">'mousemove'</span><span class="pl-kos">,</span> <span class="pl-s1">onMouseMove</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">addEventListener</span><span class="pl-kos">(</span><span class="pl-s">'mouseup'</span><span class="pl-kos">,</span> <span class="pl-s1">onMouseUp</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-k">return</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">removeEventListener</span><span class="pl-kos">(</span><span class="pl-s">'mousemove'</span><span class="pl-kos">,</span> <span class="pl-s1">onMouseMove</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">removeEventListener</span><span class="pl-kos">(</span><span class="pl-s">'mouseup'</span><span class="pl-kos">,</span> <span class="pl-s1">onMouseUp</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">mouseDown</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Above the <code class="notranslate">useEffect()</code> will complain that it didn't receive <code class="notranslate">onMouseMove</code> and <code class="notranslate">onMouseUp</code> in its dependency array and it's correct. But it could be smarter, because they were all defined by <code class="notranslate">useCallback(() =&gt; {}, [])</code> meaning they will all remain the same value throughout the lifetime of this component.</p>
<p dir="auto">Given this information I could write</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  useEffect(() =&gt; {
    if (mouseDown) {
      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
      return () =&gt; {
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
      }
    }
  }, [mouseDown, onMouseMove, onMouseUp]);"><pre class="notranslate">  <span class="pl-en">useEffect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">mouseDown</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">addEventListener</span><span class="pl-kos">(</span><span class="pl-s">'mousemove'</span><span class="pl-kos">,</span> <span class="pl-s1">onMouseMove</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">addEventListener</span><span class="pl-kos">(</span><span class="pl-s">'mouseup'</span><span class="pl-kos">,</span> <span class="pl-s1">onMouseUp</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-k">return</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">removeEventListener</span><span class="pl-kos">(</span><span class="pl-s">'mousemove'</span><span class="pl-kos">,</span> <span class="pl-s1">onMouseMove</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">removeEventListener</span><span class="pl-kos">(</span><span class="pl-s">'mouseup'</span><span class="pl-kos">,</span> <span class="pl-s1">onMouseUp</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">mouseDown</span><span class="pl-kos">,</span> <span class="pl-s1">onMouseMove</span><span class="pl-kos">,</span> <span class="pl-s1">onMouseUp</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">To satisfy the linter and that would work but only because I know they were defined by <code class="notranslate">useCallback(() =&gt; {}, [])</code>. If someone were to change the dependency array for <code class="notranslate">onMouseMove</code> or <code class="notranslate">onMouseUp</code> this would now break (the event listeners won't be removed and readded if <code class="notranslate">onMouseMove</code> changes for instance), but the linter will be happy.</p>
<p dir="auto">However if I was able to specify it like I did in the first example it is the same as saying, this works as long as these specific variables don't change, if someone unwittingly changes the dependency array of <code class="notranslate">onMouseMove</code> the linter would shout at them again and they would have to rewrite this into something more flexible.</p>
<p dir="auto">This is similar to the way <code class="notranslate">useCallback</code> doesn't complain about my usage of <code class="notranslate">setMouseDown</code> as it knows it can't change.</p>