<p dir="auto">React version: 17.0.1<br>
React Reconciler version: 0.26.1</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>I upgraded from <code class="notranslate">react@17.0.0</code> to <code class="notranslate">react@17.0.1</code> and from <code class="notranslate">react-reconciler@0.26.0</code> to <code class="notranslate">react-reconciler@0.26.1</code></li>
<li>I am using custom made renderer with my hostconfig (see code example)</li>
</ol>

<p dir="auto">Link to code example: Unfortunately project is private, but I am including all related files below (click sections to expand)</p>
<details>
  <summary>Custom reconciler hostconfig (click to expand)</summary>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import danteApp from '$dante/util/danteApp';
import { diffProps, instances } from '$dante/util/helpers';
import { DanteInstance, InstanceType, PixiStage, UnknownProps } from '$dante/util/types';
import { isFunction } from 'lodash';
import { ReactNode } from 'react';
import ReactReconciler from 'react-reconciler';

const reconciler = ReactReconciler({
 createInstance&lt;T extends InstanceType&gt;(type: T, props: UnknownProps) {
   // @ts-expect-error
   return new instances[type](props);
 },

 createTextInstance() {
   throw new Error('dante does not support text instances. Use Text component instead.');
 },

 shouldSetTextContent() {
   return false;
 },

 appendChild(parentInstance: DanteInstance, child: DanteInstance) {
   parentInstance.addDanteChild(child);
 },

 appendChildToContainer(container: PixiStage, child: DanteInstance) {
   container.addChild(child.instance);
 },

 appendInitialChild(parentInstance: DanteInstance, child: DanteInstance) {
   parentInstance.addDanteChild(child);
 },

 insertBefore(parentInstance: DanteInstance, child: DanteInstance, beforeChild: DanteInstance) {
   if (child === beforeChild) {
     throw new Error('dante cannot insert node before itself');
   }
   const index = parentInstance.getDanteChildIndex(beforeChild);
   const childExists = parentInstance.getDanteChildIndex(child) !== -1;
   if (childExists) {
     parentInstance.setDanteChildIndex(child, index);
   } else {
     parentInstance.addDanteChildAt(child, index);
   }
 },

 insertInContainerBefore(container: PixiStage, child: DanteInstance, beforeChild: DanteInstance) {
   if (child === beforeChild) {
     throw new Error('dante cannot insert node before itself');
   }
   const index = container.getChildIndex(beforeChild.instance);
   const childExists = container.getChildIndex(child.instance) !== -1;
   if (childExists) {
     container.setChildIndex(child.instance, index);
   } else {
     container.addChildAt(child.instance, index);
   }
 },

 removeChild(parentInstance: DanteInstance, child: DanteInstance) {
   parentInstance.removeDanteChild(child);
 },

 removeChildFromContainer(container: PixiStage, child: DanteInstance) {
   container.removeChild(child.instance);
   child.instance.destroy();
 },

 getPublicInstance(instance: DanteInstance) {
   return instance;
 },

 getRootHostContext(rootContainerInstance) {
   return rootContainerInstance;
 },

 getChildHostContext() {
   return {};
 },

 prepareForCommit() {
   return null;
 },

 prepareUpdate(_instance, _type, oldProps: UnknownProps, newProps: UnknownProps) {
   return diffProps(oldProps, newProps);
 },

 commitUpdate(instance: DanteInstance, updatePayload: UnknownProps) {
   if (isFunction(instance.applyProps)) {
     instance.applyProps(updatePayload);
   }
 },

 finalizeInitialChildren(parentInstance: DanteInstance, _type, props: UnknownProps) {
   if (isFunction(parentInstance.finalizeChildren)) {
     parentInstance.finalizeChildren(props);
   }

   return false;
 },

 now: window.performance.now,

 setTimeout: window.setTimeout,

 clearTimeout: window.clearTimeout,

 resetAfterCommit() {
   // Noop
 },

 // @ts-expect-error
 clearContainer() {
   return false;
 },

 hideInstance(instance: DanteInstance) {
   instance.instance.renderable = false;
   instance.instance.visible = false;
 },

 unhideInstance(instance: DanteInstance) {
   instance.instance.renderable = true;
   instance.instance.visible = true;
 },

 noTimeout: -1,
 isPrimaryRenderer: true,
 supportsMutation: true,
 supportsPersistence: false,
 supportsHydration: false
});

export function render(root: ReactNode) {
 const container = reconciler.createContainer(danteApp.stage, false, false);
 reconciler.updateContainer(root, container, null, () =&gt; null);
}

export const danteRenderer = danteApp.renderer;
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">danteApp</span> <span class="pl-k">from</span> <span class="pl-s">'$dante/util/danteApp'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">diffProps</span><span class="pl-kos">,</span> <span class="pl-s1">instances</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'$dante/util/helpers'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">DanteInstance</span><span class="pl-kos">,</span> <span class="pl-smi">InstanceType</span><span class="pl-kos">,</span> <span class="pl-smi">PixiStage</span><span class="pl-kos">,</span> <span class="pl-smi">UnknownProps</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'$dante/util/types'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">isFunction</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'lodash'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">ReactNode</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-smi">ReactReconciler</span> <span class="pl-k">from</span> <span class="pl-s">'react-reconciler'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">reconciler</span> <span class="pl-c1">=</span> <span class="pl-smi">ReactReconciler</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
 <span class="pl-en">createInstance</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span> <span class="pl-k">extends</span> <span class="pl-smi">InstanceType</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-s1">type</span>: <span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-s1">props</span>: <span class="pl-smi">UnknownProps</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-c">// <span class="pl-k">@ts</span>-expect-error</span>
   <span class="pl-k">return</span> <span class="pl-k">new</span> <span class="pl-s1">instances</span><span class="pl-kos">[</span><span class="pl-s1">type</span><span class="pl-kos">]</span><span class="pl-kos">(</span><span class="pl-s1">props</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">createTextInstance</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-k">throw</span> <span class="pl-k">new</span> <span class="pl-smi">Error</span><span class="pl-kos">(</span><span class="pl-s">'dante does not support text instances. Use Text component instead.'</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">shouldSetTextContent</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-k">return</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-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">parentInstance</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">,</span> <span class="pl-s1">child</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-s1">parentInstance</span><span class="pl-kos">.</span><span class="pl-en">addDanteChild</span><span class="pl-kos">(</span><span class="pl-s1">child</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">appendChildToContainer</span><span class="pl-kos">(</span><span class="pl-s1">container</span>: <span class="pl-smi">PixiStage</span><span class="pl-kos">,</span> <span class="pl-s1">child</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-s1">container</span><span class="pl-kos">.</span><span class="pl-en">addChild</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">.</span><span class="pl-c1">instance</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">appendInitialChild</span><span class="pl-kos">(</span><span class="pl-s1">parentInstance</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">,</span> <span class="pl-s1">child</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-s1">parentInstance</span><span class="pl-kos">.</span><span class="pl-en">addDanteChild</span><span class="pl-kos">(</span><span class="pl-s1">child</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">insertBefore</span><span class="pl-kos">(</span><span class="pl-s1">parentInstance</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">,</span> <span class="pl-s1">child</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">,</span> <span class="pl-s1">beforeChild</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">child</span> <span class="pl-c1">===</span> <span class="pl-s1">beforeChild</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
     <span class="pl-k">throw</span> <span class="pl-k">new</span> <span class="pl-smi">Error</span><span class="pl-kos">(</span><span class="pl-s">'dante cannot insert node before itself'</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">index</span> <span class="pl-c1">=</span> <span class="pl-s1">parentInstance</span><span class="pl-kos">.</span><span class="pl-en">getDanteChildIndex</span><span class="pl-kos">(</span><span class="pl-s1">beforeChild</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
   <span class="pl-k">const</span> <span class="pl-s1">childExists</span> <span class="pl-c1">=</span> <span class="pl-s1">parentInstance</span><span class="pl-kos">.</span><span class="pl-en">getDanteChildIndex</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">)</span> <span class="pl-c1">!==</span> <span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">;</span>
   <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">childExists</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
     <span class="pl-s1">parentInstance</span><span class="pl-kos">.</span><span class="pl-en">setDanteChildIndex</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">,</span> <span class="pl-s1">index</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
   <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
     <span class="pl-s1">parentInstance</span><span class="pl-kos">.</span><span class="pl-en">addDanteChildAt</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">,</span> <span class="pl-s1">index</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">insertInContainerBefore</span><span class="pl-kos">(</span><span class="pl-s1">container</span>: <span class="pl-smi">PixiStage</span><span class="pl-kos">,</span> <span class="pl-s1">child</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">,</span> <span class="pl-s1">beforeChild</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">child</span> <span class="pl-c1">===</span> <span class="pl-s1">beforeChild</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
     <span class="pl-k">throw</span> <span class="pl-k">new</span> <span class="pl-smi">Error</span><span class="pl-kos">(</span><span class="pl-s">'dante cannot insert node before itself'</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">index</span> <span class="pl-c1">=</span> <span class="pl-s1">container</span><span class="pl-kos">.</span><span class="pl-en">getChildIndex</span><span class="pl-kos">(</span><span class="pl-s1">beforeChild</span><span class="pl-kos">.</span><span class="pl-c1">instance</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
   <span class="pl-k">const</span> <span class="pl-s1">childExists</span> <span class="pl-c1">=</span> <span class="pl-s1">container</span><span class="pl-kos">.</span><span class="pl-en">getChildIndex</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">.</span><span class="pl-c1">instance</span><span class="pl-kos">)</span> <span class="pl-c1">!==</span> <span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">;</span>
   <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">childExists</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
     <span class="pl-s1">container</span><span class="pl-kos">.</span><span class="pl-en">setChildIndex</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">.</span><span class="pl-c1">instance</span><span class="pl-kos">,</span> <span class="pl-s1">index</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
   <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
     <span class="pl-s1">container</span><span class="pl-kos">.</span><span class="pl-en">addChildAt</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">.</span><span class="pl-c1">instance</span><span class="pl-kos">,</span> <span class="pl-s1">index</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">removeChild</span><span class="pl-kos">(</span><span class="pl-s1">parentInstance</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">,</span> <span class="pl-s1">child</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-s1">parentInstance</span><span class="pl-kos">.</span><span class="pl-en">removeDanteChild</span><span class="pl-kos">(</span><span class="pl-s1">child</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">removeChildFromContainer</span><span class="pl-kos">(</span><span class="pl-s1">container</span>: <span class="pl-smi">PixiStage</span><span class="pl-kos">,</span> <span class="pl-s1">child</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-s1">container</span><span class="pl-kos">.</span><span class="pl-en">removeChild</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">.</span><span class="pl-c1">instance</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
   <span class="pl-s1">child</span><span class="pl-kos">.</span><span class="pl-c1">instance</span><span class="pl-kos">.</span><span class="pl-en">destroy</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">getPublicInstance</span><span class="pl-kos">(</span><span class="pl-s1">instance</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-k">return</span> <span class="pl-s1">instance</span><span class="pl-kos">;</span>
 <span class="pl-kos">}</span><span class="pl-kos">,</span>

 <span class="pl-en">getRootHostContext</span><span class="pl-kos">(</span><span class="pl-s1">rootContainerInstance</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-k">return</span> <span class="pl-s1">rootContainerInstance</span><span class="pl-kos">;</span>
 <span class="pl-kos">}</span><span class="pl-kos">,</span>

 <span class="pl-en">getChildHostContext</span><span class="pl-kos">(</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-kos">;</span>
 <span class="pl-kos">}</span><span class="pl-kos">,</span>

 <span class="pl-en">prepareForCommit</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-k">return</span> <span class="pl-c1">null</span><span class="pl-kos">;</span>
 <span class="pl-kos">}</span><span class="pl-kos">,</span>

 <span class="pl-en">prepareUpdate</span><span class="pl-kos">(</span><span class="pl-s1">_instance</span><span class="pl-kos">,</span> <span class="pl-s1">_type</span><span class="pl-kos">,</span> <span class="pl-s1">oldProps</span>: <span class="pl-smi">UnknownProps</span><span class="pl-kos">,</span> <span class="pl-s1">newProps</span>: <span class="pl-smi">UnknownProps</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-k">return</span> <span class="pl-en">diffProps</span><span class="pl-kos">(</span><span class="pl-s1">oldProps</span><span class="pl-kos">,</span> <span class="pl-s1">newProps</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">commitUpdate</span><span class="pl-kos">(</span><span class="pl-s1">instance</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">,</span> <span class="pl-s1">updatePayload</span>: <span class="pl-smi">UnknownProps</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-en">isFunction</span><span class="pl-kos">(</span><span class="pl-s1">instance</span><span class="pl-kos">.</span><span class="pl-c1">applyProps</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
     <span class="pl-s1">instance</span><span class="pl-kos">.</span><span class="pl-en">applyProps</span><span class="pl-kos">(</span><span class="pl-s1">updatePayload</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">finalizeInitialChildren</span><span class="pl-kos">(</span><span class="pl-s1">parentInstance</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">,</span> <span class="pl-s1">_type</span><span class="pl-kos">,</span> <span class="pl-s1">props</span>: <span class="pl-smi">UnknownProps</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-en">isFunction</span><span class="pl-kos">(</span><span class="pl-s1">parentInstance</span><span class="pl-kos">.</span><span class="pl-c1">finalizeChildren</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
     <span class="pl-s1">parentInstance</span><span class="pl-kos">.</span><span class="pl-en">finalizeChildren</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
   <span class="pl-kos">}</span>

   <span class="pl-k">return</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-c1">now</span>: <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">performance</span><span class="pl-kos">.</span><span class="pl-c1">now</span><span class="pl-kos">,</span>

 <span class="pl-c1">setTimeout</span>: <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">setTimeout</span><span class="pl-kos">,</span>

 <span class="pl-c1">clearTimeout</span>: <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">clearTimeout</span><span class="pl-kos">,</span>

 <span class="pl-en">resetAfterCommit</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-c">// Noop</span>
 <span class="pl-kos">}</span><span class="pl-kos">,</span>

 <span class="pl-c">// <span class="pl-k">@ts</span>-expect-error</span>
 <span class="pl-en">clearContainer</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-k">return</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-en">hideInstance</span><span class="pl-kos">(</span><span class="pl-s1">instance</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-s1">instance</span><span class="pl-kos">.</span><span class="pl-c1">instance</span><span class="pl-kos">.</span><span class="pl-c1">renderable</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>
   <span class="pl-s1">instance</span><span class="pl-kos">.</span><span class="pl-c1">instance</span><span class="pl-kos">.</span><span class="pl-c1">visible</span> <span class="pl-c1">=</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-en">unhideInstance</span><span class="pl-kos">(</span><span class="pl-s1">instance</span>: <span class="pl-smi">DanteInstance</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-s1">instance</span><span class="pl-kos">.</span><span class="pl-c1">instance</span><span class="pl-kos">.</span><span class="pl-c1">renderable</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
   <span class="pl-s1">instance</span><span class="pl-kos">.</span><span class="pl-c1">instance</span><span class="pl-kos">.</span><span class="pl-c1">visible</span> <span class="pl-c1">=</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-c1">noTimeout</span>: <span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">,</span>
 <span class="pl-c1">isPrimaryRenderer</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
 <span class="pl-c1">supportsMutation</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
 <span class="pl-c1">supportsPersistence</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
 <span class="pl-c1">supportsHydration</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-k">export</span> <span class="pl-k">function</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">root</span>: <span class="pl-smi">ReactNode</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
 <span class="pl-k">const</span> <span class="pl-s1">container</span> <span class="pl-c1">=</span> <span class="pl-s1">reconciler</span><span class="pl-kos">.</span><span class="pl-en">createContainer</span><span class="pl-kos">(</span><span class="pl-s1">danteApp</span><span class="pl-kos">.</span><span class="pl-c1">stage</span><span class="pl-kos">,</span> <span class="pl-c1">false</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-s1">reconciler</span><span class="pl-kos">.</span><span class="pl-en">updateContainer</span><span class="pl-kos">(</span><span class="pl-s1">root</span><span class="pl-kos">,</span> <span class="pl-s1">container</span><span class="pl-kos">,</span> <span class="pl-c1">null</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-c1">null</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">danteRenderer</span> <span class="pl-c1">=</span> <span class="pl-s1">danteApp</span><span class="pl-kos">.</span><span class="pl-c1">renderer</span><span class="pl-kos">;</span></pre></div>
</details>
<details>
  <summary>Hook related to the error (click to expand)</summary>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { FONTS } from '$app/util/assets';
import theme from '$app/util/theme';
import { widthPercentage } from '$core/helpers';
import { BitmapFont, TextStyle } from 'pixi.js';
import { useCallback, useEffect, useState } from 'react';

/**
 * Utilities
 */
const { fonts } = document;
const fontSize = widthPercentage(theme.fontSize.large);
const fontOptions = {
  chars: BitmapFont.ALPHANUMERIC,
  resolution: devicePixelRatio,
  padding: widthPercentage(2)
};
const gold = new TextStyle({
  fill: theme.gradient.gold,
  fillGradientStops: [0.1, 0.5, 1],
  fillGradientType: 0,
  fontSize,
  ...theme.shadow.textShadowDark
});

/**
 * Hook
 */
function useFonts() {
  const [ready, setReady] = useState(false);

  const loadFonts = useCallback(async () =&gt; {
    // Load custom fonts
    const openSans = new FontFace('OpenSans', `url(${FONTS.OpenSans})`, {
      weight: 'normal',
      style: 'normal'
    });

    fonts.add(openSans);

    await openSans.load();

    // Create optimised bitmap fonts
    BitmapFont.from('Script-gold', { ...gold, fontFamily: 'OpenSans' }, fontOptions);

    setReady(true);
  }, []);

  useEffect(() =&gt; {
    loadFonts();
  }, [loadFonts]);

  return ready;
}

export default useFonts;
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">FONTS</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'$app/util/assets'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">theme</span> <span class="pl-k">from</span> <span class="pl-s">'$app/util/theme'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">widthPercentage</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'$core/helpers'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">BitmapFont</span><span class="pl-kos">,</span> <span class="pl-smi">TextStyle</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'pixi.js'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">useCallback</span><span class="pl-kos">,</span> <span class="pl-s1">useEffect</span><span class="pl-kos">,</span> <span class="pl-s1">useState</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>

<span class="pl-c">/**</span>
<span class="pl-c"> * Utilities</span>
<span class="pl-c"> */</span>
<span class="pl-k">const</span> <span class="pl-kos">{</span> fonts <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">fontSize</span> <span class="pl-c1">=</span> <span class="pl-en">widthPercentage</span><span class="pl-kos">(</span><span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">fontSize</span><span class="pl-kos">.</span><span class="pl-c1">large</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">fontOptions</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">chars</span>: <span class="pl-smi">BitmapFont</span><span class="pl-kos">.</span><span class="pl-c1">ALPHANUMERIC</span><span class="pl-kos">,</span>
  <span class="pl-c1">resolution</span>: <span class="pl-s1">devicePixelRatio</span><span class="pl-kos">,</span>
  <span class="pl-c1">padding</span>: <span class="pl-en">widthPercentage</span><span class="pl-kos">(</span><span class="pl-c1">2</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">gold</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">TextStyle</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">fill</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">gradient</span><span class="pl-kos">.</span><span class="pl-c1">gold</span><span class="pl-kos">,</span>
  <span class="pl-c1">fillGradientStops</span>: <span class="pl-kos">[</span><span class="pl-c1">0.1</span><span class="pl-kos">,</span> <span class="pl-c1">0.5</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">fillGradientType</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
  fontSize<span class="pl-kos">,</span>
  ...<span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">shadow</span><span class="pl-kos">.</span><span class="pl-c1">textShadowDark</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">/**</span>
<span class="pl-c"> * Hook</span>
<span class="pl-c"> */</span>
<span class="pl-k">function</span> <span class="pl-en">useFonts</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-kos">[</span><span class="pl-s1">ready</span><span class="pl-kos">,</span> <span class="pl-s1">setReady</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">loadFonts</span> <span class="pl-c1">=</span> <span class="pl-en">useCallback</span><span class="pl-kos">(</span><span class="pl-k">async</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-c">// Load custom fonts</span>
    <span class="pl-k">const</span> <span class="pl-s1">openSans</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">FontFace</span><span class="pl-kos">(</span><span class="pl-s">'OpenSans'</span><span class="pl-kos">,</span> <span class="pl-s">`url(<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-smi">FONTS</span><span class="pl-kos">.</span><span class="pl-c1">OpenSans</span><span class="pl-kos">}</span></span>)`</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
      <span class="pl-c1">weight</span>: <span class="pl-s">'normal'</span><span class="pl-kos">,</span>
      <span class="pl-c1">style</span>: <span class="pl-s">'normal'</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-s1">fonts</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s1">openSans</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">await</span> <span class="pl-s1">openSans</span><span class="pl-kos">.</span><span class="pl-en">load</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-c">// Create optimised bitmap fonts</span>
    <span class="pl-smi">BitmapFont</span><span class="pl-kos">.</span><span class="pl-en">from</span><span class="pl-kos">(</span><span class="pl-s">'Script-gold'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> ...<span class="pl-s1">gold</span><span class="pl-kos">,</span> <span class="pl-c1">fontFamily</span>: <span class="pl-s">'OpenSans'</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">fontOptions</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-en">setReady</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-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">loadFonts</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">loadFonts</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">return</span> <span class="pl-s1">ready</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-s1">useFonts</span><span class="pl-kos">;</span></pre></div>
</details>
<details>
  <summary>Hook usage in the application (click to expand)</summary>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import LayoutRouteTransition from '$app/components/LayoutRouteTransition';
import Route from '$app/components/Route';
import useFonts from '$app/hooks/useFonts';
import Game from '$app/layouts/Game';
import Registration from '$app/layouts/Registration';
import React, { Fragment } from 'react';

function App() {
  const fonts = useFonts();

  if (!fonts) {
    return null;
  }

  return (
    &lt;LayoutRouteTransition&gt;
      {layout =&gt; (
        &lt;Fragment&gt;
          &lt;Route route={layout} match=&quot;Registration&quot; Component={Registration} /&gt;
          &lt;Route route={layout} match=&quot;Game&quot; Component={Game} /&gt;
        &lt;/Fragment&gt;
      )}
    &lt;/LayoutRouteTransition&gt;
  );
}

export default App;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-smi">LayoutRouteTransition</span> <span class="pl-k">from</span> <span class="pl-s">'$app/components/LayoutRouteTransition'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-smi">Route</span> <span class="pl-k">from</span> <span class="pl-s">'$app/components/Route'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">useFonts</span> <span class="pl-k">from</span> <span class="pl-s">'$app/hooks/useFonts'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-smi">Game</span> <span class="pl-k">from</span> <span class="pl-s">'$app/layouts/Game'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-smi">Registration</span> <span class="pl-k">from</span> <span class="pl-s">'$app/layouts/Registration'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-smi">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-smi">Fragment</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>

<span class="pl-k">function</span> <span class="pl-smi">App</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">fonts</span> <span class="pl-c1">=</span> <span class="pl-en">useFonts</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">fonts</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-c1">null</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">&lt;</span><span class="pl-smi">LayoutRouteTransition</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">{</span><span class="pl-c1">layout</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
        <span class="pl-kos">&lt;</span><span class="pl-smi">Fragment</span><span class="pl-kos">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-smi">Route</span> <span class="pl-smi">route</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">layout</span><span class="pl-kos">}</span> <span class="pl-s1">match</span><span class="pl-c1">=</span><span class="pl-s">"Registration"</span> <span class="pl-smi">Component</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">Registration</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-smi">Route</span> <span class="pl-s1">route</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">layout</span><span class="pl-kos">}</span> <span class="pl-s1">match</span><span class="pl-c1">=</span><span class="pl-s">"Game"</span> <span class="pl-smi">Component</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">Game</span><span class="pl-kos">}</span> <span class="pl-pds"><span class="pl-c1">/</span>&gt;</span><span class="pl-c1"></span>
        <span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>Fragment&gt;</span>
<span class="pl-pds">      <span class="pl-kos">)</span><span class="pl-kos">}</span></span>
<span class="pl-pds">    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span></span><span class="pl-smi">LayoutRouteTransition</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-s1">default</span> <span class="pl-smi">App</span><span class="pl-kos">;</span></pre></div>
</details>

<h2 dir="auto">The current behavior</h2>
<blockquote>
<p dir="auto">Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:</p>
<ol dir="auto">
<li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
<li>You might be breaking the Rules of Hooks</li>
<li>You might have more than one copy of React in the same app<br>
See <a href="https://reactjs.org/link/invalid-hook-call" rel="nofollow">https://reactjs.org/link/invalid-hook-call</a> for tips about how to debug and fix this problem.<br>
at resolveDispatcher (react.development.js:1476)<br>
at useState (react.development.js:1507)<br>
at useFonts (useFonts.ts:39)<br>
at App (App.tsx:10)<br>
at renderWithHooks (react-reconciler.development.js:6412)<br>
at mountIndeterminateComponent (react-reconciler.development.js:9238)<br>
at beginWork (react-reconciler.development.js:10476)<br>
at HTMLUnknownElement.callCallback (react-reconciler.development.js:12184)<br>
at Object.invokeGuardedCallbackDev (react-reconciler.development.js:12233)<br>
at invokeGuardedCallback (react-reconciler.development.js:12292)</li>
</ol>
</blockquote>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">As far as I can tell this should be valid?</p>
<p dir="auto">When a function passed through props is used inside <code class="notranslate">useCallback</code>, the <code class="notranslate">react-hooks/exhaustive-deps</code> eslint rule give a false positive.</p>
<p dir="auto">Using a value on the props object or reference the function doesn't generate a warning. Only when the function is called. See example below.</p>
<p dir="auto">React version: 17.0.1<br>
eslint-plugin-react-hooks: 4.6.0</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>The following code causes a linting error:</li>
</ol>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React, { useCallback } from 'react';

interface TestComponent {
    value: number;
    testFunc: () =&gt; void;
}

export const TestComponent: React.FC&lt;TestComponent&gt; = (props) =&gt; {
    const onClick1 = useCallback(() =&gt; {
        props.testFunc();
    }, [props.testFunc]);  // Error here

    const onClick2 = useCallback(() =&gt; {
        console.log(props.value);
    }, [props.value]);  // No error here

    const onClick3 = useCallback(() =&gt; {
        console.log(props.testFunc);
    }, [props.testFunc]);  // No error here
    
    return &lt;div&gt;
        &lt;div onClick={onClick1}&gt;&lt;/div&gt;
        &lt;div onClick={onClick2}&gt;&lt;/div&gt;
        &lt;div onClick={onClick3}&gt;&lt;/div&gt;
    &lt;/div&gt;
};"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-smi">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-s1">useCallback</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>

<span class="pl-k">interface</span> <span class="pl-smi">TestComponent</span> <span class="pl-kos">{</span>
    <span class="pl-c1">value</span>: <span class="pl-smi">number</span><span class="pl-kos">;</span>
    <span class="pl-c1">testFunc</span>: <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi"><span class="pl-k">void</span></span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-smi">TestComponent</span>: <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">FC</span><span class="pl-kos">&lt;</span><span class="pl-smi">TestComponent</span><span class="pl-kos">&gt;</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">onClick1</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">props</span><span class="pl-kos">.</span><span class="pl-en">testFunc</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">props</span><span class="pl-kos">.</span><span class="pl-c1">testFunc</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>  <span class="pl-c">// Error here</span>

    <span class="pl-k">const</span> <span class="pl-s1">onClick2</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-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">value</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">props</span><span class="pl-kos">.</span><span class="pl-c1">value</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>  <span class="pl-c">// No error here</span>

    <span class="pl-k">const</span> <span class="pl-s1">onClick3</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-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">testFunc</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">props</span><span class="pl-kos">.</span><span class="pl-c1">testFunc</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>  <span class="pl-c">// No error here</span>
    
    <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">onClick1</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">onClick2</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">onClick3</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>

<p dir="auto">Link to code example:</p>

<h2 dir="auto">The current behavior</h2>
<p dir="auto">eslint produces an error</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="React Hook useCallback has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useCallback call and refer to those specific props inside useCallback."><pre class="notranslate"><code class="notranslate">React Hook useCallback has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useCallback call and refer to those specific props inside useCallback.
</code></pre></div>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">No error on all 3 cases.</p>