<p dir="auto">In 0.11, the code</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div&gt;
  &lt;div key={null}&gt;foo&lt;/div&gt;
  &lt;div key={null}&gt;bar&lt;/div&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div&gt;
  &lt;div key={null}&gt;foo&lt;/div&gt;
  &lt;div key={null}&gt;bar&lt;/div&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">assigned implicit keys to both children. In 0.12, it gives the error</p>
<blockquote>
<p dir="auto">Warning: flattenChildren(...): Encountered two children with the same key, <code class="notranslate">.$null</code>. Child keys must be unique; when two children share a key, only the first child will be used.</p>
</blockquote>
<p dir="auto">and renders only "foo", because the key is cast to a string in ReactElement</p>
<p dir="auto"></p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/facebook/react/blob/be468c2c22840296cca92daae5969a0dcc0417be/src/core/ReactElement.js#L140">react/src/core/ReactElement.js</a>
    </p>
    <p class="mb-0 color-fg-muted">
         Line 140
      in
      <a data-pjax="true" class="commit-tease-sha" href="/facebook/react/commit/be468c2c22840296cca92daae5969a0dcc0417be">be468c2</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L140" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="140"></td>
          <td id="LC140" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-s1">key</span> <span class="pl-c1">=</span> <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">key</span> <span class="pl-c1">===</span> <span class="pl-c1">undefined</span> ? <span class="pl-c1">null</span> : <span class="pl-s">''</span> <span class="pl-c1">+</span> <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">key</span><span class="pl-kos">;</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
<p></p>
<p dir="auto">before it gets checked against null in traverseAllChildren:</p>
<p dir="auto"></p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/facebook/react/blob/be468c2c22840296cca92daae5969a0dcc0417be/src/utils/traverseAllChildren.js#L50">react/src/utils/traverseAllChildren.js</a>
    </p>
    <p class="mb-0 color-fg-muted">
         Line 50
      in
      <a data-pjax="true" class="commit-tease-sha" href="/facebook/react/commit/be468c2c22840296cca92daae5969a0dcc0417be">be468c2</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L50" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="50"></td>
          <td id="LC50" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">component</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">component</span><span class="pl-kos">.</span><span class="pl-c1">key</span> <span class="pl-c1">!=</span> <span class="pl-c1">null</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
<p></p>
<p dir="auto">I guess it's okay if this is intentional but it broke a part of KA in the upgrade.</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sebmarkbage/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/sebmarkbage">@sebmarkbage</a>? (cc <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jdan/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jdan">@jdan</a>)</p>
<p dir="auto">I created the app by npx create-app order //not this problem Mismatching Versions of React and React DOM  and not this Duplicate React</p>
<p dir="auto">here is my code<br>
First,I created a hook usePre.js which is copied from <a href="https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state" rel="nofollow">https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state</a><br>
<code class="notranslate">import React,{useRef,useEffect} from "react"; export default function useTest(value) { const ref=useRef(); useEffect(()=&gt;{ ref.current=value; }); return ref.current; }</code><br>
then I fixed the App.js to<br>
<code class="notranslate">import React from "react"; import useTest from "./useTest"; function App() { const a = useTest(1); return (&lt;div&gt;test&lt;/div&gt;); } export default App;</code></p>
<p dir="auto">and fixed the index.js<br>
<code class="notranslate">import ReactDOM from 'react-dom'; import App from './App'; const app = App(); ReactDOM.render( app, document.getElementById('root') );</code><br>
then the error of Invalid hook call happened<br>
I don't think I have broken the hooks rules<br>
no call Hooks in class components.<br>
no call in event handlers.<br>
no call Hooks inside functions passed to useMemo, useReducer, or useEffect</p>
<p dir="auto">I just use it in the root app?maybe it's the new rule?</p>