Issue 1:
I created the app by npx create-app order //not this problem Mismatching Versions of React and React DOM and not this Duplicate React

here is my code

First,I created a hook usePre.js which is copied from https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state

import React,{useRef,useEffect} from "react"; export default function useTest(value) { const ref=useRef(); useEffect(()=>{ ref.current=value; }); return ref.current; }

then I fixed the App.js to

import React from "react"; import useTest from "./useTest"; function App() { const a = useTest(1); return (<div>test</div>); } export default App;

and fixed the index.js

import ReactDOM from 'react-dom'; import App from './App'; const app = App(); ReactDOM.render( app, document.getElementById('root') );

then the error of Invalid hook call happened

I don't think I have broken the hooks rules

no call Hooks in class components.

no call in event handlers.

no call Hooks inside functions passed to useMemo, useReducer, or useEffect

I just use it in the root app?maybe it's the new rule?

Issue 2:
Do you want to request a feature or report a bug?

A bit of both?

What is the current behavior?

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:

Entirely different components (using the same context key), perhaps spread around the source code or even in node_modules

One or more packages importing the context providing/consuming components of another (a usage pattern more in line with the React.createContext abstraction).

The new React.createContext 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 React.createContext instances.

I think it is intuitive and reasonable that "form 1" does not work with the new API, but less so with "form 2".

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 React.createContext is never duplicated in node_modules.

This potential drawback was not brought up in the original React.createContext RFC and I can't seem to find any reference to this limitation in the docs anywhere.

Is there a recommended way of handling this? Should this be listed in the documentation as a caveat when using React.createContext? 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.

What is the expected behavior?

Context communication should work across package boundaries (see above note on old context API)

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

This concerns versions of React with the React.createContext API