<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>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">A bit of both?</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">The old context API involved components that provided and consumed context using a shared string key. In other words, the only requirement for communication between components providing or consuming context was that the string key used was the same. This had the side effect of allowing easy communication via React context across packages (i.e. separate node_modules using the same shared context). This might be one of two forms:</p>
<ol dir="auto">
<li>Entirely different components (using the same context key), perhaps spread around the source code or even in node_modules</li>
<li>One or more packages importing the context providing/consuming components of another (a usage pattern more in line with the <code class="notranslate">React.createContext</code> abstraction).</li>
</ol>
<p dir="auto">The new <code class="notranslate">React.createContext</code> API works much differently. Instead, for communication to work correctly, the consumer and provider must always come from the exact same function call. Unlike the old API, this means if the provider or consumer is imported from another package, there is now an implicit singleton, otherwise there will be separate <code class="notranslate">React.createContext</code> instances.</p>
<p dir="auto">I think it is intuitive and reasonable that "form 1" does not work with the new API, but less so with "form 2".</p>
<p dir="auto">What is the best way of handling this? So far, the best approach I've thought of is using peer dependencies to enforce the package calling <code class="notranslate">React.createContext</code> is never duplicated in node_modules.</p>
<p dir="auto">This potential drawback was not brought up in the <a href="https://github.com/reactjs/rfcs/pull/2" data-hovercard-type="pull_request" data-hovercard-url="/reactjs/rfcs/pull/2/hovercard">original React.createContext RFC</a> and I can't seem to find any reference to this limitation in the docs anywhere.</p>
<p dir="auto">Is there a recommended way of handling this? Should this be listed in the documentation as a caveat when using <code class="notranslate">React.createContext</code>? Is there a way to make this less error-prone? There didn't seem to be an issue regarding this already so I figured I'd create one and kick off a discussion.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Context communication should work across package boundaries (see above note on old context API)</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">This concerns versions of React with the <code class="notranslate">React.createContext</code> API</p>