diff --git a/src/content/reference/react-dom/findDOMNode.md b/src/content/reference/react-dom/findDOMNode.md deleted file mode 100644 index 8e7b0065397..00000000000 --- a/src/content/reference/react-dom/findDOMNode.md +++ /dev/null @@ -1,435 +0,0 @@ ---- -title: findDOMNode ---- - - - -This API will be removed in a future major version of React. [See the alternatives.](#alternatives) - - - - - -`findDOMNode` finds the browser DOM node for a React [class component](/reference/react/Component) instance. - -```js -const domNode = findDOMNode(componentInstance) -``` - - - - - ---- - -## Reference {/*reference*/} - -### `findDOMNode(componentInstance)` {/*finddomnode*/} - -Call `findDOMNode` to find the browser DOM node for a given React [class component](/reference/react/Component) instance. - -```js -import { findDOMNode } from 'react-dom'; - -const domNode = findDOMNode(componentInstance); -``` - -[See more examples below.](#usage) - -#### Parameters {/*parameters*/} - -* `componentInstance`: An instance of the [`Component`](/reference/react/Component) subclass. For example, `this` inside a class component. - - -#### Returns {/*returns*/} - -`findDOMNode` returns the first closest browser DOM node within the given `componentInstance`. When a component renders to `null`, or renders `false`, `findDOMNode` returns `null`. When a component renders to a string, `findDOMNode` returns a text DOM node containing that value. - -#### Caveats {/*caveats*/} - -* A component may return an array or a [Fragment](/reference/react/Fragment) with multiple children. In that case `findDOMNode`, will return the DOM node corresponding to the first non-empty child. - -* `findDOMNode` only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling `findDOMNode()` in `render()` on a component that has yet to be created), an exception will be thrown. - -* `findDOMNode` only returns the result at the time of your call. If a child component renders a different node later, there is no way for you to be notified of this change. - -* `findDOMNode` accepts a class component instance, so it can't be used with function components. - ---- - -## Usage {/*usage*/} - -### Finding the root DOM node of a class component {/*finding-the-root-dom-node-of-a-class-component*/} - -Call `findDOMNode` with a [class component](/reference/react/Component) instance (usually, `this`) to find the DOM node it has rendered. - -```js {3} -class AutoselectingInput extends Component { - componentDidMount() { - const input = findDOMNode(this); - input.select() - } - - render() { - return - } -} -``` - -Here, the `input` variable will be set to the `` DOM element. This lets you do something with it. For example, when clicking "Show example" below mounts the input, [`input.select()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select) selects all text in the input: - - - -```js src/App.js -import { useState } from 'react'; -import AutoselectingInput from './AutoselectingInput.js'; - -export default function App() { - const [show, setShow] = useState(false); - return ( - <> - -
- {show && } - - ); -} -``` - -```js src/AutoselectingInput.js active -import { Component } from 'react'; -import { findDOMNode } from 'react-dom'; - -class AutoselectingInput extends Component { - componentDidMount() { - const input = findDOMNode(this); - input.select() - } - - render() { - return - } -} - -export default AutoselectingInput; -``` - -
- ---- - -## Alternatives {/*alternatives*/} - -### Reading component's own DOM node from a ref {/*reading-components-own-dom-node-from-a-ref*/} - -Code using `findDOMNode` is fragile because the connection between the JSX node and the code manipulating the corresponding DOM node is not explicit. For example, try wrapping this `` into a `
`: - - - -```js src/App.js -import { useState } from 'react'; -import AutoselectingInput from './AutoselectingInput.js'; - -export default function App() { - const [show, setShow] = useState(false); - return ( - <> - -
- {show && } - - ); -} -``` - -```js src/AutoselectingInput.js active -import { Component } from 'react'; -import { findDOMNode } from 'react-dom'; - -class AutoselectingInput extends Component { - componentDidMount() { - const input = findDOMNode(this); - input.select() - } - render() { - return - } -} - -export default AutoselectingInput; -``` - -
- -This will break the code because now, `findDOMNode(this)` finds the `
` DOM node, but the code expects an `` DOM node. To avoid these kinds of problems, use [`createRef`](/reference/react/createRef) to manage a specific DOM node. - -In this example, `findDOMNode` is no longer used. Instead, `inputRef = createRef(null)` is defined as an instance field on the class. To read the DOM node from it, you can use `this.inputRef.current`. To attach it to the JSX, you render ``. This connects the code using the DOM node to its JSX: - - - -```js src/App.js -import { useState } from 'react'; -import AutoselectingInput from './AutoselectingInput.js'; - -export default function App() { - const [show, setShow] = useState(false); - return ( - <> - -
- {show && } - - ); -} -``` - -```js src/AutoselectingInput.js active -import { createRef, Component } from 'react'; - -class AutoselectingInput extends Component { - inputRef = createRef(null); - - componentDidMount() { - const input = this.inputRef.current; - input.select() - } - - render() { - return ( - - ); - } -} - -export default AutoselectingInput; -``` - -
- -In modern React without class components, the equivalent code would call [`useRef`](/reference/react/useRef) instead: - - - -```js src/App.js -import { useState } from 'react'; -import AutoselectingInput from './AutoselectingInput.js'; - -export default function App() { - const [show, setShow] = useState(false); - return ( - <> - -
- {show && } - - ); -} -``` - -```js src/AutoselectingInput.js active -import { useRef, useEffect } from 'react'; - -export default function AutoselectingInput() { - const inputRef = useRef(null); - - useEffect(() => { - const input = inputRef.current; - input.select(); - }, []); - - return -} -``` - -
- -[Read more about manipulating the DOM with refs.](/learn/manipulating-the-dom-with-refs) - ---- - -### Reading a child component's DOM node from a forwarded ref {/*reading-a-child-components-dom-node-from-a-forwarded-ref*/} - -In this example, `findDOMNode(this)` finds a DOM node that belongs to another component. The `AutoselectingInput` renders `MyInput`, which is your own component that renders a browser ``. - - - -```js src/App.js -import { useState } from 'react'; -import AutoselectingInput from './AutoselectingInput.js'; - -export default function App() { - const [show, setShow] = useState(false); - return ( - <> - -
- {show && } - - ); -} -``` - -```js src/AutoselectingInput.js active -import { Component } from 'react'; -import { findDOMNode } from 'react-dom'; -import MyInput from './MyInput.js'; - -class AutoselectingInput extends Component { - componentDidMount() { - const input = findDOMNode(this); - input.select() - } - render() { - return ; - } -} - -export default AutoselectingInput; -``` - -```js src/MyInput.js -export default function MyInput() { - return ; -} -``` - -
- -Notice that calling `findDOMNode(this)` inside `AutoselectingInput` still gives you the DOM ``--even though the JSX for this `` is hidden inside the `MyInput` component. This seems convenient for the above example, but it leads to fragile code. Imagine that you wanted to edit `MyInput` later and add a wrapper `
` around it. This would break the code of `AutoselectingInput` (which expects to find an ``). - -To replace `findDOMNode` in this example, the two components need to coordinate: - -1. `AutoSelectingInput` should declare a ref, like [in the earlier example](#reading-components-own-dom-node-from-a-ref), and pass it to ``. -2. `MyInput` should be declared with [`forwardRef`](/reference/react/forwardRef) to take that ref and forward it down to the `` node. - -This version does that, so it no longer needs `findDOMNode`: - - - -```js src/App.js -import { useState } from 'react'; -import AutoselectingInput from './AutoselectingInput.js'; - -export default function App() { - const [show, setShow] = useState(false); - return ( - <> - -
- {show && } - - ); -} -``` - -```js src/AutoselectingInput.js active -import { createRef, Component } from 'react'; -import MyInput from './MyInput.js'; - -class AutoselectingInput extends Component { - inputRef = createRef(null); - - componentDidMount() { - const input = this.inputRef.current; - input.select() - } - - render() { - return ( - - ); - } -} - -export default AutoselectingInput; -``` - -```js src/MyInput.js -import { forwardRef } from 'react'; - -const MyInput = forwardRef(function MyInput(props, ref) { - return ; -}); - -export default MyInput; -``` - -
- -Here is how this code would look like with function components instead of classes: - - - -```js src/App.js -import { useState } from 'react'; -import AutoselectingInput from './AutoselectingInput.js'; - -export default function App() { - const [show, setShow] = useState(false); - return ( - <> - -
- {show && } - - ); -} -``` - -```js src/AutoselectingInput.js active -import { useRef, useEffect } from 'react'; -import MyInput from './MyInput.js'; - -export default function AutoselectingInput() { - const inputRef = useRef(null); - - useEffect(() => { - const input = inputRef.current; - input.select(); - }, []); - - return -} -``` - -```js src/MyInput.js -import { forwardRef } from 'react'; - -const MyInput = forwardRef(function MyInput(props, ref) { - return ; -}); - -export default MyInput; -``` - -
- ---- - -### Adding a wrapper `
` element {/*adding-a-wrapper-div-element*/} - -Sometimes a component needs to know the position and size of its children. This makes it tempting to find the children with `findDOMNode(this)`, and then use DOM methods like [`getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) for measurements. - -There is currently no direct equivalent for this use case, which is why `findDOMNode` is deprecated but is not yet removed completely from React. In the meantime, you can try rendering a wrapper `
` node around the content as a workaround, and getting a ref to that node. However, extra wrappers can break styling. - -```js -
- {children} -
-``` - -This also applies to focusing and scrolling to arbitrary children. diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md deleted file mode 100644 index a005abf1444..00000000000 --- a/src/content/reference/react-dom/hydrate.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: hydrate ---- - - - -This API will be removed in a future major version of React. - -In React 18, `hydrate` was replaced by [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Using `hydrate` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis) - - - - - -`hydrate` lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`](/reference/react-dom/server) in React 17 and below. - -```js -hydrate(reactNode, domNode, callback?) -``` - - - - - ---- - -## Reference {/*reference*/} - -### `hydrate(reactNode, domNode, callback?)` {/*hydrate*/} - -Call `hydrate` in React 17 and below to “attach” React to existing HTML that was already rendered by React in a server environment. - -```js -import { hydrate } from 'react-dom'; - -hydrate(reactNode, domNode); -``` - -React will attach to the HTML that exists inside the `domNode`, and take over managing the DOM inside it. An app fully built with React will usually only have one `hydrate` call with its root component. - -[See more examples below.](#usage) - -#### Parameters {/*parameters*/} - -* `reactNode`: The "React node" used to render the existing HTML. This will usually be a piece of JSX like `` which was rendered with a `ReactDOM Server` method such as `renderToString()` in React 17. - -* `domNode`: A [DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that was rendered as the root element on the server. - -* **optional**: `callback`: A function. If passed, React will call it after your component is hydrated. - -#### Returns {/*returns*/} - -`hydrate` returns null. - -#### Caveats {/*caveats*/} -* `hydrate` expects the rendered content to be identical with the server-rendered content. React can patch up differences in text content, but you should treat mismatches as bugs and fix them. -* In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive. -* You'll likely have only one `hydrate` call in your app. If you use a framework, it might do this call for you. -* If your app is client-rendered with no HTML rendered already, using `hydrate()` is not supported. Use [render()](/reference/react-dom/render) (for React 17 and below) or [createRoot()](/reference/react-dom/client/createRoot) (for React 18+) instead. - ---- - -## Usage {/*usage*/} - -Call `hydrate` to attach a React component into a server-rendered browser DOM node. - -```js [[1, 3, ""], [2, 3, "document.getElementById('root')"]] -import { hydrate } from 'react-dom'; - -hydrate(, document.getElementById('root')); -``` - -Using `hydrate()` to render a client-only app (an app without server-rendered HTML) is not supported. Use [`render()`](/reference/react-dom/render) (in React 17 and below) or [`createRoot()`](/reference/react-dom/client/createRoot) (in React 18+) instead. - -### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/} - -In React, "hydration" is how React "attaches" to existing HTML that was already rendered by React in a server environment. During hydration, React will attempt to attach event listeners to the existing markup and take over rendering the app on the client. - -In apps fully built with React, **you will usually only hydrate one "root", once at startup for your entire app**. - - - -```html public/index.html - -

Hello, world!

-``` - -```js src/index.js active -import './styles.css'; -import { hydrate } from 'react-dom'; -import App from './App.js'; - -hydrate(, document.getElementById('root')); -``` - -```js src/App.js -export default function App() { - return

Hello, world!

; -} -``` - -
- -Usually you shouldn't need to call `hydrate` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state.](/reference/react/useState) - -For more information on hydration, see the docs for [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) - ---- - -### Suppressing unavoidable hydration mismatch errors {/*suppressing-unavoidable-hydration-mismatch-errors*/} - -If a single element’s attribute or text content is unavoidably different between the server and the client (for example, a timestamp), you may silence the hydration mismatch warning. - -To silence hydration warnings on an element, add `suppressHydrationWarning={true}`: - - - -```html public/index.html - -

Current Date: 01/01/2020

-``` - -```js src/index.js -import './styles.css'; -import { hydrate } from 'react-dom'; -import App from './App.js'; - -hydrate(, document.getElementById('root')); -``` - -```js src/App.js active -export default function App() { - return ( -

- Current Date: {new Date().toLocaleDateString()} -

- ); -} -``` - -
- -This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. Unless it’s text content, React still won’t attempt to patch it up, so it may remain inconsistent until future updates. - ---- - -### Handling different client and server content {/*handling-different-client-and-server-content*/} - -If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a [state variable](/reference/react/useState) like `isClient`, which you can set to `true` in an [Effect](/reference/react/useEffect): - - - -```html public/index.html - -

Is Server

-``` - -```js src/index.js -import './styles.css'; -import { hydrate } from 'react-dom'; -import App from './App.js'; - -hydrate(, document.getElementById('root')); -``` - -```js src/App.js active -import { useState, useEffect } from "react"; - -export default function App() { - const [isClient, setIsClient] = useState(false); - - useEffect(() => { - setIsClient(true); - }, []); - - return ( -

- {isClient ? 'Is Client' : 'Is Server'} -

- ); -} -``` - -
- -This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration. - - - -This approach makes hydration slower because your components have to render twice. Be mindful of the user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so rendering a different UI immediately after hydration may feel jarring to the user. - - diff --git a/src/content/reference/react-dom/index.md b/src/content/reference/react-dom/index.md index 80fd58facd0..b79b16db688 100644 --- a/src/content/reference/react-dom/index.md +++ b/src/content/reference/react-dom/index.md @@ -41,16 +41,13 @@ The `react-dom` package provides two additional entry points: --- -## Deprecated APIs {/*deprecated-apis*/} +## Removed APIs {/*removed-apis*/} - - -These APIs will be removed in a future major version of React. - - - -* [`findDOMNode`](/reference/react-dom/findDOMNode) finds the closest DOM node corresponding to a class component instance. -* [`hydrate`](/reference/react-dom/hydrate) mounts a tree into the DOM created from server HTML. Deprecated in favor of [`hydrateRoot`](/reference/react-dom/client/hydrateRoot). -* [`render`](/reference/react-dom/render) mounts a tree into the DOM. Deprecated in favor of [`createRoot`](/reference/react-dom/client/createRoot). -* [`unmountComponentAtNode`](/reference/react-dom/unmountComponentAtNode) unmounts a tree from the DOM. Deprecated in favor of [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount). +These APIs were removed in React 19: +* [`findDOMNode`](https://18.react.dev/reference/react-dom/findDOMNode): see [alternatives](https://18.react.dev/reference/react-dom/findDOMNode#alternatives). +* [`hydrate`](https://18.react.dev/reference/react-dom/hydrate): use [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) instead. +* [`render`](https://18.react.dev/reference/react-dom/render): use [`createRoot`](/reference/react-dom/client/createRoot) instead. +* [`unmountComponentAtNode`](/reference/react-dom/unmountComponentAtNode): use [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount) instead. +* [`renderToNodeStream`](https://18.react.dev/reference/react-dom/server/renderToNodeStream): use [`react-dom/server`](/reference/react-dom/server) APIs instead. +* [`renderToStaticNodeStream`](https://18.react.dev/reference/react-dom/server/renderToStaticNodeStream): use [`react-dom/server`](/reference/react-dom/server) APIs instead. diff --git a/src/content/reference/react-dom/render.md b/src/content/reference/react-dom/render.md deleted file mode 100644 index 03feb2881c3..00000000000 --- a/src/content/reference/react-dom/render.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: render ---- - - - -This API will be removed in a future major version of React. - -In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Using `render` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis) - - - - - -`render` renders a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into a browser DOM node. - -```js -render(reactNode, domNode, callback?) -``` - - - - - ---- - -## Reference {/*reference*/} - -### `render(reactNode, domNode, callback?)` {/*render*/} - -Call `render` to display a React component inside a browser DOM element. - -```js -import { render } from 'react-dom'; - -const domNode = document.getElementById('root'); -render(, domNode); -``` - -React will display `` in the `domNode`, and take over managing the DOM inside it. - -An app fully built with React will usually only have one `render` call with its root component. A page that uses "sprinkles" of React for parts of the page may have as many `render` calls as needed. - -[See more examples below.](#usage) - -#### Parameters {/*parameters*/} - -* `reactNode`: A *React node* that you want to display. This will usually be a piece of JSX like ``, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`. - -* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will display the `reactNode` you pass inside this DOM element. From this moment, React will manage the DOM inside the `domNode` and update it when your React tree changes. - -* **optional** `callback`: A function. If passed, React will call it after your component is placed into the DOM. - - -#### Returns {/*returns*/} - -`render` usually returns `null`. However, if the `reactNode` you pass is a *class component*, then it will return an instance of that component. - -#### Caveats {/*caveats*/} - -* In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Please use `createRoot` for React 18 and beyond. - -* The first time you call `render`, React will clear all the existing HTML content inside the `domNode` before rendering the React component into it. If your `domNode` contains HTML generated by React on the server or during the build, use [`hydrate()`](/reference/react-dom/hydrate) instead, which attaches the event handlers to the existing HTML. - -* If you call `render` on the same `domNode` more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same `domNode` again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates. - -* If your app is fully built with React, you'll likely have only one `render` call in your app. (If you use a framework, it might do this call for you.) When you want to render a piece of JSX in a different part of the DOM tree that isn't a child of your component (for example, a modal or a tooltip), use [`createPortal`](/reference/react-dom/createPortal) instead of `render`. - ---- - -## Usage {/*usage*/} - -Call `render` to display a React component inside a browser DOM node. - -```js [[1, 4, ""], [2, 4, "document.getElementById('root')"]] -import { render } from 'react-dom'; -import App from './App.js'; - -render(, document.getElementById('root')); -``` - -### Rendering the root component {/*rendering-the-root-component*/} - -In apps fully built with React, **you will usually only do this once at startup**--to render the "root" component. - - - -```js src/index.js active -import './styles.css'; -import { render } from 'react-dom'; -import App from './App.js'; - -render(, document.getElementById('root')); -``` - -```js src/App.js -export default function App() { - return

Hello, world!

; -} -``` - -
- -Usually you shouldn't need to call `render` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state.](/reference/react/useState) - ---- - -### Rendering multiple roots {/*rendering-multiple-roots*/} - -If your page [isn't fully built with React](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), call `render` for each top-level piece of UI managed by React. - - - -```html public/index.html - -
-

This paragraph is not rendered by React (open index.html to verify).

-
-
-``` - -```js src/index.js active -import './styles.css'; -import { render } from 'react-dom'; -import { Comments, Navigation } from './Components.js'; - -render( - , - document.getElementById('navigation') -); - -render( - , - document.getElementById('comments') -); -``` - -```js src/Components.js -export function Navigation() { - return ( -
    - Home - About -
- ); -} - -function NavLink({ href, children }) { - return ( -
  • - {children} -
  • - ); -} - -export function Comments() { - return ( - <> -

    Comments

    - - - - ); -} - -function Comment({ text, author }) { - return ( -

    {text} — {author}

    - ); -} -``` - -```css -nav ul { padding: 0; margin: 0; } -nav ul li { display: inline-block; margin-right: 20px; } -``` - -
    - -You can destroy the rendered trees with [`unmountComponentAtNode()`.](/reference/react-dom/unmountComponentAtNode) - ---- - -### Updating the rendered tree {/*updating-the-rendered-tree*/} - -You can call `render` more than once on the same DOM node. As long as the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second are not destructive: - - - -```js src/index.js active -import { render } from 'react-dom'; -import './styles.css'; -import App from './App.js'; - -let i = 0; -setInterval(() => { - render( - , - document.getElementById('root') - ); - i++; -}, 1000); -``` - -```js src/App.js -export default function App({counter}) { - return ( - <> -

    Hello, world! {counter}

    - - - ); -} -``` - -
    - -It is uncommon to call `render` multiple times. Usually, you'll [update state](/reference/react/useState) inside your components instead. diff --git a/src/content/reference/react-dom/server/index.md b/src/content/reference/react-dom/server/index.md index f90f7c183d5..c28cce118da 100644 --- a/src/content/reference/react-dom/server/index.md +++ b/src/content/reference/react-dom/server/index.md @@ -15,7 +15,6 @@ The `react-dom/server` APIs let you render React components to HTML on the serve These methods are only available in the environments with [Node.js Streams:](https://nodejs.org/api/stream.html) * [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) renders a React tree to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html) -* [`renderToStaticNodeStream`](/reference/react-dom/server/renderToStaticNodeStream) renders a non-interactive React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams) --- @@ -35,15 +34,3 @@ These methods can be used in the environments that don't support streams: * [`renderToStaticMarkup`](/reference/react-dom/server/renderToStaticMarkup) renders a non-interactive React tree to a string. They have limited functionality compared to the streaming APIs. - ---- - -## Deprecated server APIs {/*deprecated-server-apis*/} - - - -These APIs will be removed in a future major version of React. - - - -* [`renderToNodeStream`](/reference/react-dom/server/renderToNodeStream) renders a React tree to a [Node.js Readable stream.](https://nodejs.org/api/stream.html#readable-streams) (Deprecated.) diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md deleted file mode 100644 index aa2c2e8fca1..00000000000 --- a/src/content/reference/react-dom/server/renderToNodeStream.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: renderToNodeStream ---- - - - -This API will be removed in a future major version of React. Use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead. - - - - - -`renderToNodeStream` renders a React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams) - -```js -const stream = renderToNodeStream(reactNode, options?) -``` - - - - - ---- - -## Reference {/*reference*/} - -### `renderToNodeStream(reactNode, options?)` {/*rendertonodestream*/} - -On the server, call `renderToNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe into the response. - -```js -import { renderToNodeStream } from 'react-dom/server'; - -const stream = renderToNodeStream(); -stream.pipe(response); -``` - -On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive. - -[See more examples below.](#usage) - -#### Parameters {/*parameters*/} - -* `reactNode`: A React node you want to render to HTML. For example, a JSX element like ``. - -* **optional** `options`: An object for server render. - * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) - -#### Returns {/*returns*/} - -A [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) that outputs an HTML string. - -#### Caveats {/*caveats*/} - -* This method will wait for all [Suspense boundaries](/reference/react/Suspense) to complete before returning any output. - -* As of React 18, this method buffers all of its output, so it doesn't actually provide any streaming benefits. This is why it's recommended that you migrate to [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead. - -* The returned stream is a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text. - ---- - -## Usage {/*usage*/} - -### Rendering a React tree as HTML to a Node.js Readable Stream {/*rendering-a-react-tree-as-html-to-a-nodejs-readable-stream*/} - -Call `renderToNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe to your server response: - -```js {5-6} -import { renderToNodeStream } from 'react-dom/server'; - -// The route handler syntax depends on your backend framework -app.use('/', (request, response) => { - const stream = renderToNodeStream(); - stream.pipe(response); -}); -``` - -The stream will produce the initial non-interactive HTML output of your React components. On the client, you will need to call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to *hydrate* that server-generated HTML and make it interactive. diff --git a/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/src/content/reference/react-dom/server/renderToStaticNodeStream.md deleted file mode 100644 index f12b6da2f7b..00000000000 --- a/src/content/reference/react-dom/server/renderToStaticNodeStream.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: renderToStaticNodeStream ---- - - - -`renderToStaticNodeStream` renders a non-interactive React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams) - -```js -const stream = renderToStaticNodeStream(reactNode, options?) -``` - - - - - ---- - -## Reference {/*reference*/} - -### `renderToStaticNodeStream(reactNode, options?)` {/*rendertostaticnodestream*/} - -On the server, call `renderToStaticNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams). - -```js -import { renderToStaticNodeStream } from 'react-dom/server'; - -const stream = renderToStaticNodeStream(); -stream.pipe(response); -``` - -[See more examples below.](#usage) - -The stream will produce non-interactive HTML output of your React components. - -#### Parameters {/*parameters*/} - -* `reactNode`: A React node you want to render to HTML. For example, a JSX element like ``. - -* **optional** `options`: An object for server render. - * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. - -#### Returns {/*returns*/} - -A [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) that outputs an HTML string. The resulting HTML can't be hydrated on the client. - -#### Caveats {/*caveats*/} - -* `renderToStaticNodeStream` output cannot be hydrated. - -* This method will wait for all [Suspense boundaries](/reference/react/Suspense) to complete before returning any output. - -* As of React 18, this method buffers all of its output, so it doesn't actually provide any streaming benefits. - -* The returned stream is a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text. - ---- - -## Usage {/*usage*/} - -### Rendering a React tree as static HTML to a Node.js Readable Stream {/*rendering-a-react-tree-as-static-html-to-a-nodejs-readable-stream*/} - -Call `renderToStaticNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe to your server response: - -```js {5-6} -import { renderToStaticNodeStream } from 'react-dom/server'; - -// The route handler syntax depends on your backend framework -app.use('/', (request, response) => { - const stream = renderToStaticNodeStream(); - stream.pipe(response); -}); -``` - -The stream will produce the initial non-interactive HTML output of your React components. - - - -This method renders **non-interactive HTML that cannot be hydrated.** This is useful if you want to use React as a simple static page generator, or if you're rendering completely static content like emails. - -Interactive apps should use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) on the server and [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) on the client. - - diff --git a/src/content/reference/react-dom/unmountComponentAtNode.md b/src/content/reference/react-dom/unmountComponentAtNode.md deleted file mode 100644 index 376a9bc2bfb..00000000000 --- a/src/content/reference/react-dom/unmountComponentAtNode.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: unmountComponentAtNode ---- - - - -This API will be removed in a future major version of React. - -In React 18, `unmountComponentAtNode` was replaced by [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount). - - - - - -`unmountComponentAtNode` removes a mounted React component from the DOM. - -```js -unmountComponentAtNode(domNode) -``` - - - - - ---- - -## Reference {/*reference*/} - -### `unmountComponentAtNode(domNode)` {/*unmountcomponentatnode*/} - -Call `unmountComponentAtNode` to remove a mounted React component from the DOM and clean up its event handlers and state. - -```js -import { unmountComponentAtNode } from 'react-dom'; - -const domNode = document.getElementById('root'); -render(, domNode); - -unmountComponentAtNode(domNode); -``` - -[See more examples below.](#usage) - -#### Parameters {/*parameters*/} - -* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will remove a mounted React component from this element. - -#### Returns {/*returns*/} - -`unmountComponentAtNode` returns `true` if a component was unmounted and `false` otherwise. - ---- - -## Usage {/*usage*/} - -Call `unmountComponentAtNode` to remove a mounted React component from a browser DOM node and clean up its event handlers and state. - -```js [[1, 5, ""], [2, 5, "rootNode"], [2, 8, "rootNode"]] -import { render, unmountComponentAtNode } from 'react-dom'; -import App from './App.js'; - -const rootNode = document.getElementById('root'); -render(, rootNode); - -// ... -unmountComponentAtNode(rootNode); -``` - - -### Removing a React app from a DOM element {/*removing-a-react-app-from-a-dom-element*/} - -Occasionally, you may want to "sprinkle" React on an existing page, or a page that is not fully written in React. In those cases, you may need to "stop" the React app, by removing all of the UI, state, and listeners from the DOM node it was rendered to. - -In this example, clicking "Render React App" will render a React app. Click "Unmount React App" to destroy it: - - - -```html index.html - - - My app - - - - -
    - - -``` - -```js src/index.js active -import './styles.css'; -import { render, unmountComponentAtNode } from 'react-dom'; -import App from './App.js'; - -const domNode = document.getElementById('root'); - -document.getElementById('render').addEventListener('click', () => { - render(, domNode); -}); - -document.getElementById('unmount').addEventListener('click', () => { - unmountComponentAtNode(domNode); -}); -``` - -```js src/App.js -export default function App() { - return

    Hello, world!

    ; -} -``` - -
    diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index 46406ff5e5d..99fa17986f0 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -50,7 +50,7 @@ Only the `render` method is required, other methods are optional. ### `context` {/*context*/} -The [context](/learn/passing-data-deeply-with-context) of a class component is available as `this.context`. It is only available if you specify *which* context you want to receive using [`static contextType`](#static-contexttype) (modern) or [`static contextTypes`](#static-contexttypes) (deprecated). +The [context](/learn/passing-data-deeply-with-context) of a class component is available as `this.context`. It is only available if you specify *which* context you want to receive using [`static contextType`](#static-contexttype). A class component can only read one context at a time. @@ -105,18 +105,6 @@ Reading `this.props` in class components is equivalent to [declaring props](/lea --- -### `refs` {/*refs*/} - - - -This API will be removed in a future major version of React. [Use `createRef` instead.](/reference/react/createRef) - - - -Lets you access [legacy string refs](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) for this component. - ---- - ### `state` {/*state*/} The state of a class component is available as `this.state`. The `state` field must be an object. Do not mutate the state directly. If you wish to change the state, call `setState` with the new state. @@ -494,18 +482,6 @@ Reading an external data source and forcing class components to re-render in res --- -### `getChildContext()` {/*getchildcontext*/} - - - -This API will be removed in a future major version of React. [Use `Context.Provider` instead.](/reference/react/createContext#provider) - - - -Lets you specify the values for the [legacy context](https://reactjs.org/docs/legacy-context.html) is provided by this component. - ---- - ### `getSnapshotBeforeUpdate(prevProps, prevState)` {/*getsnapshotbeforeupdate*/} If you implement `getSnapshotBeforeUpdate`, React will call it immediately before React updates the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this lifecycle method will be passed as a parameter to [`componentDidUpdate`.](#componentdidupdate) @@ -738,7 +714,7 @@ React calls `shouldComponentUpdate` before rendering when new props or state are - `nextProps`: The next props that the component is about to render with. Compare `nextProps` to [`this.props`](#props) to determine what changed. - `nextState`: The next state that the component is about to render with. Compare `nextState` to [`this.state`](#props) to determine what changed. -- `nextContext`: The next context that the component is about to render with. Compare `nextContext` to [`this.context`](#context) to determine what changed. Only available if you specify [`static contextType`](#static-contexttype) (modern) or [`static contextTypes`](#static-contexttypes) (legacy). +- `nextContext`: The next context that the component is about to render with. Compare `nextContext` to [`this.context`](#context) to determine what changed. Only available if you specify [`static contextType`](#static-contexttype). #### Returns {/*shouldcomponentupdate-returns*/} @@ -813,7 +789,7 @@ If you define `UNSAFE_componentWillReceiveProps`, React will call it when the co #### Parameters {/*unsafe_componentwillreceiveprops-parameters*/} - `nextProps`: The next props that the component is about to receive from its parent component. Compare `nextProps` to [`this.props`](#props) to determine what changed. -- `nextContext`: The next context that the component is about to receive from the closest provider. Compare `nextContext` to [`this.context`](#context) to determine what changed. Only available if you specify [`static contextType`](#static-contexttype) (modern) or [`static contextTypes`](#static-contexttypes) (legacy). +- `nextContext`: The next context that the component is about to receive from the closest provider. Compare `nextContext` to [`this.context`](#context) to determine what changed. Only available if you specify [`static contextType`](#static-contexttype). #### Returns {/*unsafe_componentwillreceiveprops-returns*/} @@ -878,30 +854,6 @@ There is no direct equivalent to `UNSAFE_componentWillUpdate` in function compon --- -### `static childContextTypes` {/*static-childcontexttypes*/} - - - -This API will be removed in a future major version of React. [Use `static contextType` instead.](#static-contexttype) - - - -Lets you specify which [legacy context](https://reactjs.org/docs/legacy-context.html) is provided by this component. - ---- - -### `static contextTypes` {/*static-contexttypes*/} - - - -This API will be removed in a future major version of React. [Use `static contextType` instead.](#static-contexttype) - - - -Lets you specify which [legacy context](https://reactjs.org/docs/legacy-context.html) is consumed by this component. - ---- - ### `static contextType` {/*static-contexttype*/} If you want to read [`this.context`](#context-instance-field) from your class component, you must specify which context it needs to read. The context you specify as the `static contextType` must be a value previously created by [`createContext`.](/reference/react/createContext) @@ -976,34 +928,6 @@ Defining `defaultProps` in class components is similar to using [default values] --- -### `static propTypes` {/*static-proptypes*/} - -You can define `static propTypes` together with the [`prop-types`](https://www.npmjs.com/package/prop-types) library to declare the types of the props accepted by your component. These types will be checked during rendering and in development only. - -```js -import PropTypes from 'prop-types'; - -class Greeting extends React.Component { - static propTypes = { - name: PropTypes.string - }; - - render() { - return ( -

    Hello, {this.props.name}

    - ); - } -} -``` - - - -We recommend using [TypeScript](https://www.typescriptlang.org/) instead of checking prop types at runtime. - - - ---- - ### `static getDerivedStateFromError(error)` {/*static-getderivedstatefromerror*/} If you define `static getDerivedStateFromError`, React will call it when a child component (including distant children) throws an error during rendering. This lets you display an error message instead of clearing the UI. diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md index 92c6ba63af0..43073e8112a 100644 --- a/src/content/reference/react/StrictMode.md +++ b/src/content/reference/react/StrictMode.md @@ -830,9 +830,6 @@ Without Strict Mode, it was easy to miss that your Effect needed cleanup. By run React warns if some component anywhere inside a `` tree uses one of these deprecated APIs: -* [`findDOMNode`](/reference/react-dom/findDOMNode). [See alternatives.](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) -* `UNSAFE_` class lifecycle methods like [`UNSAFE_componentWillMount`](/reference/react/Component#unsafe_componentwillmount). [See alternatives.](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles) -* Legacy context ([`childContextTypes`](/reference/react/Component#static-childcontexttypes), [`contextTypes`](/reference/react/Component#static-contexttypes), and [`getChildContext`](/reference/react/Component#getchildcontext)). [See alternatives.](/reference/react/createContext) -* Legacy string refs ([`this.refs`](/reference/react/Component#refs)). [See alternatives.](https://reactjs.org/docs/strict-mode.html#warning-about-legacy-string-ref-api-usage) +* `UNSAFE_` class lifecycle methods like [`UNSAFE_componentWillMount`](/reference/react/Component#unsafe_componentwillmount). [See alternatives.](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles) These APIs are primarily used in older [class components](/reference/react/Component) so they rarely appear in modern apps. diff --git a/src/content/reference/react/createElement.md b/src/content/reference/react/createElement.md index a5f684c66f9..87110a71af5 100644 --- a/src/content/reference/react/createElement.md +++ b/src/content/reference/react/createElement.md @@ -49,7 +49,7 @@ function Greeting({ name }) { `createElement` returns a React element object with a few properties: * `type`: The `type` you have passed. -* `props`: The `props` you have passed except for `ref` and `key`. If the `type` is a component with legacy `type.defaultProps`, then any missing or undefined `props` will get the values from `type.defaultProps`. +* `props`: The `props` you have passed except for `ref` and `key`. * `ref`: The `ref` you have passed. If missing, `null`. * `key`: The `key` you have passed, coerced to a string. If missing, `null`. diff --git a/src/content/reference/react/createFactory.md b/src/content/reference/react/createFactory.md deleted file mode 100644 index 7df7fcd8775..00000000000 --- a/src/content/reference/react/createFactory.md +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: createFactory ---- - - - -This API will be removed in a future major version of React. [See the alternatives.](#alternatives) - - - - - -`createFactory` lets you create a function that produces React elements of a given type. - -```js -const factory = createFactory(type) -``` - - - - - ---- - -## Reference {/*reference*/} - -### `createFactory(type)` {/*createfactory*/} - -Call `createFactory(type)` to create a factory function which produces React elements of a given `type`. - -```js -import { createFactory } from 'react'; - -const button = createFactory('button'); -``` - -Then you can use it to create React elements without JSX: - -```js -export default function App() { - return button({ - onClick: () => { - alert('Clicked!') - } - }, 'Click me'); -} -``` - -[See more examples below.](#usage) - -#### Parameters {/*parameters*/} - -* `type`: The `type` argument must be a valid React component type. For example, it could be a tag name string (such as `'div'` or `'span'`), or a React component (a function, a class, or a special component like [`Fragment`](/reference/react/Fragment)). - -#### Returns {/*returns*/} - -Returns a factory function. That factory function receives a `props` object as the first argument, followed by a list of `...children` arguments, and returns a React element with the given `type`, `props` and `children`. - ---- - -## Usage {/*usage*/} - -### Creating React elements with a factory {/*creating-react-elements-with-a-factory*/} - -Although most React projects use [JSX](/learn/writing-markup-with-jsx) to describe the user interface, JSX is not required. In the past, `createFactory` used to be one of the ways you could describe the user interface without JSX. - -Call `createFactory` to create a *factory function* for a specific element type like `'button'`: - -```js -import { createFactory } from 'react'; - -const button = createFactory('button'); -``` - -Calling that factory function will produce React elements with the props and children you have provided: - - - -```js src/App.js -import { createFactory } from 'react'; - -const button = createFactory('button'); - -export default function App() { - return button({ - onClick: () => { - alert('Clicked!') - } - }, 'Click me'); -} -``` - - - -This is how `createFactory` was used as an alternative to JSX. However, `createFactory` is deprecated, and you should not call `createFactory` in any new code. See how to migrate away from `createFactory` below. - ---- - -## Alternatives {/*alternatives*/} - -### Copying `createFactory` into your project {/*copying-createfactory-into-your-project*/} - -If your project has many `createFactory` calls, copy this `createFactory.js` implementation into your project: - - - -```js src/App.js -import { createFactory } from './createFactory.js'; - -const button = createFactory('button'); - -export default function App() { - return button({ - onClick: () => { - alert('Clicked!') - } - }, 'Click me'); -} -``` - -```js src/createFactory.js -import { createElement } from 'react'; - -export function createFactory(type) { - return createElement.bind(null, type); -} -``` - - - -This lets you keep all of your code unchanged except the imports. - ---- - -### Replacing `createFactory` with `createElement` {/*replacing-createfactory-with-createelement*/} - -If you have a few `createFactory` calls that you don't mind porting manually, and you don't want to use JSX, you can replace every call a factory function with a [`createElement`](/reference/react/createElement) call. For example, you can replace this code: - -```js {1,3,6} -import { createFactory } from 'react'; - -const button = createFactory('button'); - -export default function App() { - return button({ - onClick: () => { - alert('Clicked!') - } - }, 'Click me'); -} -``` - -with this code: - - -```js {1,4} -import { createElement } from 'react'; - -export default function App() { - return createElement('button', { - onClick: () => { - alert('Clicked!') - } - }, 'Click me'); -} -``` - -Here is a complete example of using React without JSX: - - - -```js src/App.js -import { createElement } from 'react'; - -export default function App() { - return createElement('button', { - onClick: () => { - alert('Clicked!') - } - }, 'Click me'); -} -``` - - - ---- - -### Replacing `createFactory` with JSX {/*replacing-createfactory-with-jsx*/} - -Finally, you can use JSX instead of `createFactory`. This is the most common way to use React: - - - -```js src/App.js -export default function App() { - return ( - - ); -}; -``` - - - - - -Sometimes, your existing code might pass some variable as a `type` instead of a constant like `'button'`: - -```js {3} -function Heading({ isSubheading, ...props }) { - const type = isSubheading ? 'h2' : 'h1'; - const factory = createFactory(type); - return factory(props); -} -``` - -To do the same in JSX, you need to rename your variable to start with an uppercase letter like `Type`: - -```js {2,3} -function Heading({ isSubheading, ...props }) { - const Type = isSubheading ? 'h2' : 'h1'; - return ; -} -``` - -Otherwise React will interpret `` as a built-in HTML tag because it is lowercase. - - diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index 04d69287ce2..5b0e679b896 100644 --- a/src/content/reference/react/forwardRef.md +++ b/src/content/reference/react/forwardRef.md @@ -2,6 +2,14 @@ title: forwardRef --- + + +In React 19, `forwardRef` is no longer necessary. Pass `ref` as a prop instead. + +`forwardRef` will deprecated in a future release. Learn more [here](/blog/2024/04/25/react-19#ref-as-a-prop). + + + `forwardRef` lets your component expose a DOM node to parent component with a [ref.](/learn/manipulating-the-dom-with-refs) diff --git a/src/content/reference/react/legacy.md b/src/content/reference/react/legacy.md index 407232adae1..b22a9c97eeb 100644 --- a/src/content/reference/react/legacy.md +++ b/src/content/reference/react/legacy.md @@ -17,18 +17,19 @@ These APIs are exported from the `react` package, but they are not recommended f * [`Component`](/reference/react/Component) lets you define a React component as a JavaScript class. [See alternatives.](/reference/react/Component#alternatives) * [`createElement`](/reference/react/createElement) lets you create a React element. Typically, you'll use JSX instead. * [`createRef`](/reference/react/createRef) creates a ref object which can contain arbitrary value. [See alternatives.](/reference/react/createRef#alternatives) +* [`forwardRef`](/reference/react/forwardRef) lets your component expose a DOM node to parent component with a [ref.](/learn/manipulating-the-dom-with-refs) * [`isValidElement`](/reference/react/isValidElement) checks whether a value is a React element. Typically used with [`cloneElement`.](/reference/react/cloneElement) * [`PureComponent`](/reference/react/PureComponent) is similar to [`Component`,](/reference/react/Component) but it skip re-renders with same props. [See alternatives.](/reference/react/PureComponent#alternatives) - --- -## Deprecated APIs {/*deprecated-apis*/} - - - -These APIs will be removed in a future major version of React. +## Removed APIs {/*removed-apis*/} - +These APIs were removed in React 19: -* [`createFactory`](/reference/react/createFactory) lets you create a function that produces React elements of a certain type. +* [`createFactory`](https://18.react.dev/reference/react/createFactory): use JSX instead. +* Class Components: [`static contextTypes`](https://18.react.dev//reference/react/Component#static-contexttypes): use [`static contextType`](#static-contexttype) instead. +* Class Components: [`static childContextTypes`](https://18.react.dev//reference/react/Component#static-childcontexttypes): use [`static contextType`](#static-contexttype) instead. +* Class Components: [`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): use [`Context.Provider`](/reference/react/createContext#provider) instead. +* Class Components: [`static propTypes`](https://18.react.dev//reference/react/Component#static-proptypes): use a type system like [TypeScript](https://www.typescriptlang.org/) instead. +* Class Components: [`this.refs`](https://18.react.dev//reference/react/Component#refs): use [`createRef`](/reference/react/createRef) instead. diff --git a/src/content/warnings/react-dom-test-utils.md b/src/content/warnings/react-dom-test-utils.md index 794bb1d11f4..2dc33e5b220 100644 --- a/src/content/warnings/react-dom-test-utils.md +++ b/src/content/warnings/react-dom-test-utils.md @@ -2,6 +2,8 @@ title: react-dom/test-utils Deprecation Warnings --- +TODO: update for 19? + ## ReactDOMTestUtils.act() warning {/*reactdomtestutilsact-warning*/} `act` from `react-dom/test-utils` has been deprecated in favor of `act` from `react`. diff --git a/src/content/warnings/react-test-renderer.md b/src/content/warnings/react-test-renderer.md index 7926922d174..6a0a9e03ce8 100644 --- a/src/content/warnings/react-test-renderer.md +++ b/src/content/warnings/react-test-renderer.md @@ -2,6 +2,8 @@ title: react-test-renderer Deprecation Warnings --- +TODO: Update this for 19? + ## ReactTestRenderer.create() warning {/*reacttestrenderercreate-warning*/} react-test-renderer is deprecated. A warning will fire whenever calling ReactTestRenderer.create() or ReactShallowRender.render(). The react-test-renderer package will remain available on NPM but will not be maintained and may break with new React features or changes to React's internals. @@ -11,4 +13,4 @@ The React Team recommends migrating your tests to [@testing-library/react](https ## new ShallowRenderer() warning {/*new-shallowrenderer-warning*/} -The react-test-renderer package no longer exports a shallow renderer at `react-test-renderer/shallow`. This was simply a repackaging of a previously extracted separate package: `react-shallow-renderer`. Therefore you can continue using the shallow renderer in the same way by installing it directly. See [Github](https://github.com/enzymejs/react-shallow-renderer) / [NPM](https://www.npmjs.com/package/react-shallow-renderer). \ No newline at end of file +The react-test-renderer package no longer exports a shallow renderer at `react-test-renderer/shallow`. This was simply a repackaging of a previously extracted separate package: `react-shallow-renderer`. Therefore you can continue using the shallow renderer in the same way by installing it directly. See [Github](https://github.com/enzymejs/react-shallow-renderer) / [NPM](https://www.npmjs.com/package/react-shallow-renderer). diff --git a/src/sidebarReference.json b/src/sidebarReference.json index e829a36a564..cdc6dbbe3d9 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -118,10 +118,6 @@ "title": "createContext", "path": "/reference/react/createContext" }, - { - "title": "forwardRef", - "path": "/reference/react/forwardRef" - }, { "title": "lazy", "path": "/reference/react/lazy" @@ -230,14 +226,6 @@ "title": "flushSync", "path": "/reference/react-dom/flushSync" }, - { - "title": "findDOMNode", - "path": "/reference/react-dom/findDOMNode" - }, - { - "title": "hydrate", - "path": "/reference/react-dom/hydrate" - }, { "title": "preconnect", "path": "/reference/react-dom/preconnect" @@ -261,14 +249,6 @@ { "title": "preloadModule", "path": "/reference/react-dom/preloadModule" - }, - { - "title": "render", - "path": "/reference/react-dom/render" - }, - { - "title": "unmountComponentAtNode", - "path": "/reference/react-dom/unmountComponentAtNode" } ] }, @@ -290,10 +270,6 @@ "title": "Server APIs", "path": "/reference/react-dom/server", "routes": [ - { - "title": "renderToNodeStream", - "path": "/reference/react-dom/server/renderToNodeStream" - }, { "title": "renderToPipeableStream", "path": "/reference/react-dom/server/renderToPipeableStream" @@ -306,10 +282,6 @@ "title": "renderToStaticMarkup", "path": "/reference/react-dom/server/renderToStaticMarkup" }, - { - "title": "renderToStaticNodeStream", - "path": "/reference/react-dom/server/renderToStaticNodeStream" - }, { "title": "renderToString", "path": "/reference/react-dom/server/renderToString" @@ -388,14 +360,14 @@ "title": "createElement", "path": "/reference/react/createElement" }, - { - "title": "createFactory", - "path": "/reference/react/createFactory" - }, { "title": "createRef", "path": "/reference/react/createRef" }, + { + "title": "forwardRef", + "path": "/reference/react/forwardRef" + }, { "title": "isValidElement", "path": "/reference/react/isValidElement" diff --git a/vercel.json b/vercel.json index 957c2502784..b4942a094a5 100644 --- a/vercel.json +++ b/vercel.json @@ -76,7 +76,7 @@ }, { "source": "/link/strict-mode-find-node", - "destination": "/reference/react-dom/findDOMNode#alternatives", + "destination": "https://18.react.dev/reference/react-dom/findDOMNode#alternatives", "permanent": false }, { @@ -173,6 +173,41 @@ "source": "/reference/react/use-server", "destination": "/reference/rsc/use-server", "permanent": true + }, + { + "source": "/reference/react-dom/findDOMNode", + "destination": "https://18.react.dev/reference/react-dom/findDOMNode", + "permanent": true + }, + { + "source": "/reference/react/createFactory", + "destination": "https://18.react.dev/reference/react/createFactory", + "permanent": true + }, + { + "source": "/reference/react-dom/render", + "destination": "https://18.react.dev/reference/react-dom/render", + "permanent": true + }, + { + "source": "/reference/react-dom/hydrate", + "destination": "https://18.react.dev/reference/react-dom/hydrate", + "permanent": true + }, + { + "source": "/reference/react-dom/unmountComponentAtNode", + "destination": "https://18.react.dev/reference/react-dom/unmountComponentAtNode", + "permanent": true + }, + { + "source": "/reference/react-dom/server/renderToStaticNodeStream", + "destination": "https://18.react.dev/reference/react-dom/server/renderToStaticNodeStream", + "permanent": true + }, + { + "source": "/reference/react-dom/server/renderToNodeStream", + "destination": "https://18.react.dev/reference/react-dom/server/renderToNodeStream", + "permanent": true } ], "headers": [