New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Element: export new React 18 APIs #46610
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,6 +8,7 @@ import { | |
hydrate, | ||
unmountComponentAtNode, | ||
} from 'react-dom'; | ||
import { createRoot, hydrateRoot } from 'react-dom/client'; | ||
|
||
/** | ||
* Creates a portal into which a component can be rendered. | ||
|
@@ -43,6 +44,20 @@ export { render }; | |
*/ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should we add a There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think we if add @deprecated, we need to also add a real deprecated function call, so let's leave it for later when we migrate all of our usage. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sure. Maybe adding a comment would suffice then. |
||
export { hydrate }; | ||
|
||
/** | ||
* Creates a new React root for the target DOM node. | ||
* | ||
* @see https://reactjs.org/docs/react-dom-client.html#createroot | ||
*/ | ||
export { createRoot }; | ||
|
||
/** | ||
* Creates a new React root for the target DOM node and hydrates it with a pre-generated markup. | ||
* | ||
* @see https://reactjs.org/docs/react-dom-client.html#hydrateroot | ||
*/ | ||
export { hydrateRoot }; | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should we also expose There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh, right 👍 |
||
/** | ||
* Removes any mounted element from the target DOM node. | ||
* | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -14,16 +14,22 @@ import { | |
isValidElement, | ||
memo, | ||
StrictMode, | ||
useState, | ||
useEffect, | ||
useContext, | ||
useReducer, | ||
useCallback, | ||
useContext, | ||
useDebugValue, | ||
useDeferredValue, | ||
useEffect, | ||
useId, | ||
useMemo, | ||
useRef, | ||
useImperativeHandle, | ||
useInsertionEffect, | ||
useLayoutEffect, | ||
useDebugValue, | ||
useReducer, | ||
useRef, | ||
useState, | ||
useSyncExternalStore, | ||
useTransition, | ||
startTransition, | ||
lazy, | ||
Suspense, | ||
} from 'react'; | ||
|
@@ -150,16 +156,31 @@ export { useContext }; | |
*/ | ||
export { useDebugValue }; | ||
|
||
/** | ||
* @see https://reactjs.org/docs/hooks-reference.html#usedeferredvalue | ||
*/ | ||
export { useDeferredValue }; | ||
|
||
/** | ||
* @see https://reactjs.org/docs/hooks-reference.html#useeffect | ||
*/ | ||
export { useEffect }; | ||
|
||
/** | ||
* @see https://reactjs.org/docs/hooks-reference.html#useid | ||
*/ | ||
export { useId }; | ||
|
||
/** | ||
* @see https://reactjs.org/docs/hooks-reference.html#useimperativehandle | ||
*/ | ||
export { useImperativeHandle }; | ||
|
||
/** | ||
* @see https://reactjs.org/docs/hooks-reference.html#useinsertioneffect | ||
*/ | ||
export { useInsertionEffect }; | ||
|
||
/** | ||
* @see https://reactjs.org/docs/hooks-reference.html#uselayouteffect | ||
*/ | ||
|
@@ -185,6 +206,21 @@ export { useRef }; | |
*/ | ||
export { useState }; | ||
|
||
/** | ||
* @see https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore | ||
*/ | ||
export { useSyncExternalStore }; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Does it make sense to add the rest of the new hooks ( Note that if we add There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good idea, pushed a commit that exports them all. |
||
|
||
/** | ||
* @see https://reactjs.org/docs/hooks-reference.html#usetransition | ||
*/ | ||
export { useTransition }; | ||
|
||
/** | ||
* @see https://reactjs.org/docs/react-api.html#starttransition | ||
*/ | ||
export { startTransition }; | ||
|
||
/** | ||
* @see https://reactjs.org/docs/react-api.html#reactlazy | ||
*/ | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
An ideal place to mention that these are deprecated now in React 18.