<p dir="auto">Currently, the <code class="notranslate">react-hooks/exhaustive-deps</code> is all or nothing.  I leave the rule turned on (for a particular set of dependencies), or I disable it.  Clearly this rule is beneficial in preventing bugs, but there are also definitely times when a dependency needs to be purposefully excluded from a dependency array.</p>
<p dir="auto">When those situations come up, the rule then has to be disabled for ALL of the dependencies</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// eslint-disable-next-line react-hooks/exhaustive-deps"><pre class="notranslate"><span class="pl-c">// eslint-disable-next-line react-hooks/exhaustive-deps</span></pre></div>
<p dir="auto">So now if someone comes along later and adds an additional dependency to this effect (or memo etc.), there is no linting rule there to notify them of the need to add that dependency to the dependency array.</p>
<p dir="auto">One approach to accomplishing this might be by using block comments.  For example, if I have three dependencies to an effect, <code class="notranslate">foo</code>, <code class="notranslate">bar</code>, and <code class="notranslate">baz</code>, I can disable the dependency check for <code class="notranslate">bar</code> only, and leave the dependency checking in place for all other dependencies.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="useEffect(() =&gt; {
  foo()
  bar()
  baz()
}, [foo, /*bar*/, baz])
//          ^
// No linting error because I have explicitly stated that I wish to disable dependency checking for `bar`"><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-en">foo</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
  <span class="pl-en">bar</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
  <span class="pl-en">baz</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">foo</span><span class="pl-kos">,</span> <span class="pl-c">/*bar*/</span><span class="pl-kos">,</span> <span class="pl-s1">baz</span><span class="pl-kos">]</span><span class="pl-kos">)</span>
<span class="pl-c">//          ^</span>
<span class="pl-c">// No linting error because I have explicitly stated that I wish to disable dependency checking for `bar`</span></pre></div>
<p dir="auto">The <code class="notranslate">react-hooks/exhaustive-deps</code> eslint rule is great, until you consciously want to ignore a specific dependency. For those cases the only current option (that I'm aware of) is to disable the rule for the line. It would be great if it was possible to  explicitly ignore one or more dependencies while keeping the rule enabled. That way it would still warn if I added a new dependency without also including it in either list.</p>
<p dir="auto">One potential approach would be to allow devs to list these ignored dependencies using <code class="notranslate">/* comments */</code>, for example:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="React.useEffect(() =&gt; {
  doSomething(a, b, c)
}, [a] /* ignore-deps: b, c */)"><pre class="notranslate"><span class="pl-v">React</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-en">doSomething</span><span class="pl-kos">(</span><span class="pl-s1">a</span><span class="pl-kos">,</span> <span class="pl-s1">b</span><span class="pl-kos">,</span> <span class="pl-s1">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-s1">a</span><span class="pl-kos">]</span> <span class="pl-c">/* ignore-deps: b, c */</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">In this fictional example I'd only like to <code class="notranslate">doSomething</code> in response to changes to <code class="notranslate">a</code>, while changes to <code class="notranslate">b</code> and <code class="notranslate">c</code> by themselves should be ignored. Using the comment I can explicitly state that this behaviour is intended, while still being warned if the call changes to <code class="notranslate">doSomething(a, b, c, d)</code> - notifying me that I need to add <code class="notranslate">d</code> to either the dependencies or the ingore-deps comment.</p>
<p dir="auto">The proposed style and location of the comment is based off the idea that it should be in close proximity to the dependency list (developer experience), while hopefully also somewhat simple to access via the AST (implementation complexity). Alternative suggestions are appreciated!</p>