120.md (35965B)
1 # PR #120 Bump react and react-dom 2 3 - **Status:** closed 4 - **Author:** @dependabot[bot] 5 - **Created:** 2022-03-30T08:28:57Z 6 - **Branch:** dependabot/npm_and_yarn/react-and-react-dom-18.0.0 → main 7 - **Closed:** 2022-04-27T08:28:59Z 8 - **Labels:** dependencies, javascript 9 - **Assignees:** @MTRNord 10 - **Reviewers:** @MTRNord 11 - **Diff:** [120.diff](./120.diff) 12 13 --- 14 15 Bumps [react](https://github.com/facebook/react/tree/HEAD/packages/react) and [react-dom](https://github.com/facebook/react/tree/HEAD/packages/react-dom). These dependencies needed to be updated together. 16 Updates `react` from 17.0.2 to 18.0.0 17 <details> 18 <summary>Release notes</summary> 19 <p><em>Sourced from <a href="https://github.com/facebook/react/releases">react's releases</a>.</em></p> 20 <blockquote> 21 <h2>18.0.0 (March 29, 2022)</h2> 22 <p>Below is a list of all new features, APIs, deprecations, and breaking changes. 23 Read <a href="https://reactjs.org/blog/2022/03/29/react-v18.html">React 18 release post</a> and <a href="https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html">React 18 upgrade guide</a> for more information.</p> 24 <h2>New Features</h2> 25 <h3>React</h3> 26 <ul> 27 <li><code>useId</code> is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it’s even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order.</li> 28 <li><code>startTransition</code> and <code>useTransition</code> let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results).</li> 29 <li><code>useDeferredValue</code> lets you defer re-rendering a non-urgent part of the tree. It is similar to debouncing, but has a few advantages compared to it. There is no fixed time delay, so React will attempt the deferred render right after the first render is reflected on the screen. The deferred render is interruptible and doesn't block user input.</li> 30 <li><code>useSyncExternalStore</code> is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for <code>useEffect</code> when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React.</li> 31 <li><code>useInsertionEffect</code> is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout.</li> 32 </ul> 33 <h3>React DOM Client</h3> 34 <p>These new APIs are now exported from <code>react-dom/client</code>:</p> 35 <ul> 36 <li><code>createRoot</code>: New method to create a root to <code>render</code> or <code>unmount</code>. Use it instead of <code>ReactDOM.render</code>. New features in React 18 don't work without it.</li> 37 <li><code>hydrateRoot</code>: New method to hydrate a server rendered application. Use it instead of <code>ReactDOM.hydrate</code> in conjunction with the new React DOM Server APIs. New features in React 18 don't work without it.</li> 38 </ul> 39 <p>Both <code>createRoot</code> and <code>hydrateRoot</code> accept a new option called <code>onRecoverableError</code> in case you want to be notified when React recovers from errors during rendering or hydration for logging. By default, React will use <a href="https://developer.mozilla.org/en-US/docs/Web/API/reportError"><code>reportError</code></a>, or <code>console.error</code> in the older browsers.</p> 40 <h3>React DOM Server</h3> 41 <p>These new APIs are now exported from <code>react-dom/server</code> and have full support for streaming Suspense on the server:</p> 42 <ul> 43 <li><code>renderToPipeableStream</code>: for streaming in Node environments.</li> 44 <li><code>renderToReadableStream</code>: for modern edge runtime environments, such as Deno and Cloudflare workers.</li> 45 </ul> 46 <p>The existing <code>renderToString</code> method keeps working but is discouraged.</p> 47 <h2>Deprecations</h2> 48 <ul> 49 <li><code>react-dom</code>: <code>ReactDOM.render</code> has been deprecated. Using it will warn and run your app in React 17 mode.</li> 50 <li><code>react-dom</code>: <code>ReactDOM.hydrate</code> has been deprecated. Using it will warn and run your app in React 17 mode.</li> 51 <li><code>react-dom</code>: <code>ReactDOM.unmountComponentAtNode</code> has been deprecated.</li> 52 <li><code>react-dom</code>: <code>ReactDOM.renderSubtreeIntoContainer</code> has been deprecated.</li> 53 <li><code>react-dom/server</code>: <code>ReactDOMServer.renderToNodeStream</code> has been deprecated.</li> 54 </ul> 55 <h2>Breaking Changes</h2> 56 <h3>React</h3> 57 <ul> 58 <li><strong>Automatic batching:</strong> This release introduces a performance improvement that changes to the way React batches updates to do more batching automatically. See <a href="https://github.com/reactwg/react-18/discussions/21">Automatic batching for fewer renders in React 18</a> for more info. In the rare case that you need to opt out, wrap the state update in <code>flushSync</code>.</li> 59 <li><strong>Stricter Strict Mode</strong>: In the future, React will provide a feature that lets components preserve state between unmounts. To prepare for it, React 18 introduces a new development-only check to Strict Mode. React will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount. If this breaks your app, consider removing Strict Mode until you can fix the components to be resilient to remounting with existing state.</li> 60 <li><strong>Consistent useEffect timing</strong>: React now always synchronously flushes effect functions if the update was triggered during a discrete user input event such as a click or a keydown event. Previously, the behavior wasn't always predictable or consistent.</li> 61 <li><strong>Stricter hydration errors</strong>: Hydration mismatches due to missing or extra text content are now treated like errors instead of warnings. React will no longer attempt to "patch up" individual nodes by inserting or deleting a node on the client in an attempt to match the server markup, and will revert to client rendering up to the closest <code><Suspense></code> boundary in the tree. This ensures the hydrated tree is consistent and avoids potential privacy and security holes that can be caused by hydration mismatches.</li> 62 <li><strong>Suspense trees are always consistent:</strong> If a component suspends before it's fully added to the tree, React will not add it to the tree in an incomplete state or fire its effects. Instead, React will throw away the new tree completely, wait for the asynchronous operation to finish, and then retry rendering again from scratch. React will render the retry attempt concurrently, and without blocking the browser.</li> 63 <li><strong>Layout Effects with Suspense</strong>: When a tree re-suspends and reverts to a fallback, React will now clean up layout effects, and then re-create them when the content inside the boundary is shown again. This fixes an issue which prevented component libraries from correctly measuring layout when used with Suspense.</li> 64 </ul> 65 <!-- raw HTML omitted --> 66 </blockquote> 67 <p>... (truncated)</p> 68 </details> 69 <details> 70 <summary>Changelog</summary> 71 <p><em>Sourced from <a href="https://github.com/facebook/react/blob/main/CHANGELOG.md">react's changelog</a>.</em></p> 72 <blockquote> 73 <h2>18.0.0 (March 29, 2022)</h2> 74 <p>Below is a list of all new features, APIs, deprecations, and breaking changes. 75 Read <a href="https://reactjs.org/blog/2022/03/29/react-v18.html">React 18 release post</a> and <a href="https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html">React 18 upgrade guide</a> for more information.</p> 76 <h3>New Features</h3> 77 <h3>React</h3> 78 <ul> 79 <li><code>useId</code> is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it’s even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order.</li> 80 <li><code>startTransition</code> and <code>useTransition</code> let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results).</li> 81 <li><code>useDeferredValue</code> lets you defer re-rendering a non-urgent part of the tree. It is similar to debouncing, but has a few advantages compared to it. There is no fixed time delay, so React will attempt the deferred render right after the first render is reflected on the screen. The deferred render is interruptible and doesn't block user input.</li> 82 <li><code>useSyncExternalStore</code> is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for <code>useEffect</code> when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React.</li> 83 <li><code>useInsertionEffect</code> is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout.</li> 84 </ul> 85 <h3>React DOM Client</h3> 86 <p>These new APIs are now exported from <code>react-dom/client</code>:</p> 87 <ul> 88 <li><code>createRoot</code>: New method to create a root to <code>render</code> or <code>unmount</code>. Use it instead of <code>ReactDOM.render</code>. New features in React 18 don't work without it.</li> 89 <li><code>hydrateRoot</code>: New method to hydrate a server rendered application. Use it instead of <code>ReactDOM.hydrate</code> in conjunction with the new React DOM Server APIs. New features in React 18 don't work without it.</li> 90 </ul> 91 <p>Both <code>createRoot</code> and <code>hydrateRoot</code> accept a new option called <code>onRecoverableError</code> in case you want to be notified when React recovers from errors during rendering or hydration for logging. By default, React will use <a href="https://developer.mozilla.org/en-US/docs/Web/API/reportError"><code>reportError</code></a>, or <code>console.error</code> in the older browsers.</p> 92 <h3>React DOM Server</h3> 93 <p>These new APIs are now exported from <code>react-dom/server</code> and have full support for streaming Suspense on the server:</p> 94 <ul> 95 <li><code>renderToPipeableStream</code>: for streaming in Node environments.</li> 96 <li><code>renderToReadableStream</code>: for modern edge runtime environments, such as Deno and Cloudflare workers.</li> 97 </ul> 98 <p>The existing <code>renderToString</code> method keeps working but is discouraged.</p> 99 <h2>Deprecations</h2> 100 <ul> 101 <li><code>react-dom</code>: <code>ReactDOM.render</code> has been deprecated. Using it will warn and run your app in React 17 mode.</li> 102 <li><code>react-dom</code>: <code>ReactDOM.hydrate</code> has been deprecated. Using it will warn and run your app in React 17 mode.</li> 103 <li><code>react-dom</code>: <code>ReactDOM.unmountComponentAtNode</code> has been deprecated.</li> 104 <li><code>react-dom</code>: <code>ReactDOM.renderSubtreeIntoContainer</code> has been deprecated.</li> 105 <li><code>react-dom/server</code>: <code>ReactDOMServer.renderToNodeStream</code> has been deprecated.</li> 106 </ul> 107 <h2>Breaking Changes</h2> 108 <h3>React</h3> 109 <ul> 110 <li><strong>Automatic batching:</strong> This release introduces a performance improvement that changes to the way React batches updates to do more batching automatically. See <a href="https://github.com/reactwg/react-18/discussions/21">Automatic batching for fewer renders in React 18</a> for more info. In the rare case that you need to opt out, wrap the state update in <code>flushSync</code>.</li> 111 <li><strong>Stricter Strict Mode</strong>: In the future, React will provide a feature that lets components preserve state between unmounts. To prepare for it, React 18 introduces a new development-only check to Strict Mode. React will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount. If this breaks your app, consider removing Strict Mode until you can fix the components to be resilient to remounting with existing state.</li> 112 <li><strong>Consistent useEffect timing</strong>: React now always synchronously flushes effect functions if the update was triggered during a discrete user input event such as a click or a keydown event. Previously, the behavior wasn't always predictable or consistent.</li> 113 <li><strong>Stricter hydration errors</strong>: Hydration mismatches due to missing or extra text content are now treated like errors instead of warnings. React will no longer attempt to "patch up" individual nodes by inserting or deleting a node on the client in an attempt to match the server markup, and will revert to client rendering up to the closest <code><Suspense></code> boundary in the tree. This ensures the hydrated tree is consistent and avoids potential privacy and security holes that can be caused by hydration mismatches.</li> 114 <li><strong>Suspense trees are always consistent:</strong> If a component suspends before it's fully added to the tree, React will not add it to the tree in an incomplete state or fire its effects. Instead, React will throw away the new tree completely, wait for the asynchronous operation to finish, and then retry rendering again from scratch. React will render the retry attempt concurrently, and without blocking the browser.</li> 115 </ul> 116 <!-- raw HTML omitted --> 117 </blockquote> 118 <p>... (truncated)</p> 119 </details> 120 <details> 121 <summary>Commits</summary> 122 <ul> 123 <li><a href="https://github.com/facebook/react/commit/34aa5cfe0d9b6ec4667e02bf46ab34d83dfb2d6d"><code>34aa5cf</code></a> Update local package.jsons for 18</li> 124 <li><a href="https://github.com/facebook/react/commit/72a933d2892dac9e5327678b6bd37af8d589bb22"><code>72a933d</code></a> Gate legacy hidden (<a href="https://github.com/facebook/react/tree/HEAD/packages/react/issues/24047">#24047</a>)</li> 125 <li><a href="https://github.com/facebook/react/commit/d5f1b067c8bbb826b823d0354a28ba31078b70c0"><code>d5f1b06</code></a> [ServerContext] Flight support for ServerContext (<a href="https://github.com/facebook/react/tree/HEAD/packages/react/issues/23244">#23244</a>)</li> 126 <li><a href="https://github.com/facebook/react/commit/17806594cc28284fe195f918e8d77de3516848ec"><code>1780659</code></a> Move createRoot/hydrateRoot to react-dom/client (<a href="https://github.com/facebook/react/tree/HEAD/packages/react/issues/23385">#23385</a>)</li> 127 <li><a href="https://github.com/facebook/react/commit/42f15b324f50d0fd98322c21646ac3013e30344a"><code>42f15b3</code></a> [DevTools][Transition Tracing] onTransitionComplete and onTransitionStart imp...</li> 128 <li><a href="https://github.com/facebook/react/commit/1ad8d81292415e26ac070dec03ad84c11fbe207d"><code>1ad8d81</code></a> Remove object-assign polyfill (<a href="https://github.com/facebook/react/tree/HEAD/packages/react/issues/23351">#23351</a>)</li> 129 <li><a href="https://github.com/facebook/react/commit/b3f3da205b9abfc3c70e7018b03114a33ef43ca5"><code>b3f3da2</code></a> Land warnOnSubscriptionInsideStartTransition flag (<a href="https://github.com/facebook/react/tree/HEAD/packages/react/issues/23353">#23353</a>)</li> 130 <li><a href="https://github.com/facebook/react/commit/1f3f6db73caf72a7d2287241212b7669d0c2dd2f"><code>1f3f6db</code></a> Remove createMutableSource from stable exports (<a href="https://github.com/facebook/react/tree/HEAD/packages/react/issues/23352">#23352</a>)</li> 131 <li><a href="https://github.com/facebook/react/commit/587e759302ef1cc02954831ccc72f7f668e32426"><code>587e759</code></a> Remove Numeric Fallback of Symbols (<a href="https://github.com/facebook/react/tree/HEAD/packages/react/issues/23348">#23348</a>)</li> 132 <li><a href="https://github.com/facebook/react/commit/552c067bb18062f6a1bba2fc848033abd2ea8090"><code>552c067</code></a> Remove public export for unstable-shared-subset.js (<a href="https://github.com/facebook/react/tree/HEAD/packages/react/issues/23261">#23261</a>)</li> 133 <li>Additional commits viewable in <a href="https://github.com/facebook/react/commits/v18.0.0/packages/react">compare view</a></li> 134 </ul> 135 </details> 136 <br /> 137 138 Updates `react-dom` from 17.0.2 to 18.0.0 139 <details> 140 <summary>Release notes</summary> 141 <p><em>Sourced from <a href="https://github.com/facebook/react/releases">react-dom's releases</a>.</em></p> 142 <blockquote> 143 <h2>18.0.0 (March 29, 2022)</h2> 144 <p>Below is a list of all new features, APIs, deprecations, and breaking changes. 145 Read <a href="https://reactjs.org/blog/2022/03/29/react-v18.html">React 18 release post</a> and <a href="https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html">React 18 upgrade guide</a> for more information.</p> 146 <h2>New Features</h2> 147 <h3>React</h3> 148 <ul> 149 <li><code>useId</code> is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it’s even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order.</li> 150 <li><code>startTransition</code> and <code>useTransition</code> let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results).</li> 151 <li><code>useDeferredValue</code> lets you defer re-rendering a non-urgent part of the tree. It is similar to debouncing, but has a few advantages compared to it. There is no fixed time delay, so React will attempt the deferred render right after the first render is reflected on the screen. The deferred render is interruptible and doesn't block user input.</li> 152 <li><code>useSyncExternalStore</code> is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for <code>useEffect</code> when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React.</li> 153 <li><code>useInsertionEffect</code> is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout.</li> 154 </ul> 155 <h3>React DOM Client</h3> 156 <p>These new APIs are now exported from <code>react-dom/client</code>:</p> 157 <ul> 158 <li><code>createRoot</code>: New method to create a root to <code>render</code> or <code>unmount</code>. Use it instead of <code>ReactDOM.render</code>. New features in React 18 don't work without it.</li> 159 <li><code>hydrateRoot</code>: New method to hydrate a server rendered application. Use it instead of <code>ReactDOM.hydrate</code> in conjunction with the new React DOM Server APIs. New features in React 18 don't work without it.</li> 160 </ul> 161 <p>Both <code>createRoot</code> and <code>hydrateRoot</code> accept a new option called <code>onRecoverableError</code> in case you want to be notified when React recovers from errors during rendering or hydration for logging. By default, React will use <a href="https://developer.mozilla.org/en-US/docs/Web/API/reportError"><code>reportError</code></a>, or <code>console.error</code> in the older browsers.</p> 162 <h3>React DOM Server</h3> 163 <p>These new APIs are now exported from <code>react-dom/server</code> and have full support for streaming Suspense on the server:</p> 164 <ul> 165 <li><code>renderToPipeableStream</code>: for streaming in Node environments.</li> 166 <li><code>renderToReadableStream</code>: for modern edge runtime environments, such as Deno and Cloudflare workers.</li> 167 </ul> 168 <p>The existing <code>renderToString</code> method keeps working but is discouraged.</p> 169 <h2>Deprecations</h2> 170 <ul> 171 <li><code>react-dom</code>: <code>ReactDOM.render</code> has been deprecated. Using it will warn and run your app in React 17 mode.</li> 172 <li><code>react-dom</code>: <code>ReactDOM.hydrate</code> has been deprecated. Using it will warn and run your app in React 17 mode.</li> 173 <li><code>react-dom</code>: <code>ReactDOM.unmountComponentAtNode</code> has been deprecated.</li> 174 <li><code>react-dom</code>: <code>ReactDOM.renderSubtreeIntoContainer</code> has been deprecated.</li> 175 <li><code>react-dom/server</code>: <code>ReactDOMServer.renderToNodeStream</code> has been deprecated.</li> 176 </ul> 177 <h2>Breaking Changes</h2> 178 <h3>React</h3> 179 <ul> 180 <li><strong>Automatic batching:</strong> This release introduces a performance improvement that changes to the way React batches updates to do more batching automatically. See <a href="https://github.com/reactwg/react-18/discussions/21">Automatic batching for fewer renders in React 18</a> for more info. In the rare case that you need to opt out, wrap the state update in <code>flushSync</code>.</li> 181 <li><strong>Stricter Strict Mode</strong>: In the future, React will provide a feature that lets components preserve state between unmounts. To prepare for it, React 18 introduces a new development-only check to Strict Mode. React will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount. If this breaks your app, consider removing Strict Mode until you can fix the components to be resilient to remounting with existing state.</li> 182 <li><strong>Consistent useEffect timing</strong>: React now always synchronously flushes effect functions if the update was triggered during a discrete user input event such as a click or a keydown event. Previously, the behavior wasn't always predictable or consistent.</li> 183 <li><strong>Stricter hydration errors</strong>: Hydration mismatches due to missing or extra text content are now treated like errors instead of warnings. React will no longer attempt to "patch up" individual nodes by inserting or deleting a node on the client in an attempt to match the server markup, and will revert to client rendering up to the closest <code><Suspense></code> boundary in the tree. This ensures the hydrated tree is consistent and avoids potential privacy and security holes that can be caused by hydration mismatches.</li> 184 <li><strong>Suspense trees are always consistent:</strong> If a component suspends before it's fully added to the tree, React will not add it to the tree in an incomplete state or fire its effects. Instead, React will throw away the new tree completely, wait for the asynchronous operation to finish, and then retry rendering again from scratch. React will render the retry attempt concurrently, and without blocking the browser.</li> 185 <li><strong>Layout Effects with Suspense</strong>: When a tree re-suspends and reverts to a fallback, React will now clean up layout effects, and then re-create them when the content inside the boundary is shown again. This fixes an issue which prevented component libraries from correctly measuring layout when used with Suspense.</li> 186 </ul> 187 <!-- raw HTML omitted --> 188 </blockquote> 189 <p>... (truncated)</p> 190 </details> 191 <details> 192 <summary>Changelog</summary> 193 <p><em>Sourced from <a href="https://github.com/facebook/react/blob/main/CHANGELOG.md">react-dom's changelog</a>.</em></p> 194 <blockquote> 195 <h2>18.0.0 (March 29, 2022)</h2> 196 <p>Below is a list of all new features, APIs, deprecations, and breaking changes. 197 Read <a href="https://reactjs.org/blog/2022/03/29/react-v18.html">React 18 release post</a> and <a href="https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html">React 18 upgrade guide</a> for more information.</p> 198 <h3>New Features</h3> 199 <h3>React</h3> 200 <ul> 201 <li><code>useId</code> is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it’s even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order.</li> 202 <li><code>startTransition</code> and <code>useTransition</code> let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results).</li> 203 <li><code>useDeferredValue</code> lets you defer re-rendering a non-urgent part of the tree. It is similar to debouncing, but has a few advantages compared to it. There is no fixed time delay, so React will attempt the deferred render right after the first render is reflected on the screen. The deferred render is interruptible and doesn't block user input.</li> 204 <li><code>useSyncExternalStore</code> is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for <code>useEffect</code> when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React.</li> 205 <li><code>useInsertionEffect</code> is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout.</li> 206 </ul> 207 <h3>React DOM Client</h3> 208 <p>These new APIs are now exported from <code>react-dom/client</code>:</p> 209 <ul> 210 <li><code>createRoot</code>: New method to create a root to <code>render</code> or <code>unmount</code>. Use it instead of <code>ReactDOM.render</code>. New features in React 18 don't work without it.</li> 211 <li><code>hydrateRoot</code>: New method to hydrate a server rendered application. Use it instead of <code>ReactDOM.hydrate</code> in conjunction with the new React DOM Server APIs. New features in React 18 don't work without it.</li> 212 </ul> 213 <p>Both <code>createRoot</code> and <code>hydrateRoot</code> accept a new option called <code>onRecoverableError</code> in case you want to be notified when React recovers from errors during rendering or hydration for logging. By default, React will use <a href="https://developer.mozilla.org/en-US/docs/Web/API/reportError"><code>reportError</code></a>, or <code>console.error</code> in the older browsers.</p> 214 <h3>React DOM Server</h3> 215 <p>These new APIs are now exported from <code>react-dom/server</code> and have full support for streaming Suspense on the server:</p> 216 <ul> 217 <li><code>renderToPipeableStream</code>: for streaming in Node environments.</li> 218 <li><code>renderToReadableStream</code>: for modern edge runtime environments, such as Deno and Cloudflare workers.</li> 219 </ul> 220 <p>The existing <code>renderToString</code> method keeps working but is discouraged.</p> 221 <h2>Deprecations</h2> 222 <ul> 223 <li><code>react-dom</code>: <code>ReactDOM.render</code> has been deprecated. Using it will warn and run your app in React 17 mode.</li> 224 <li><code>react-dom</code>: <code>ReactDOM.hydrate</code> has been deprecated. Using it will warn and run your app in React 17 mode.</li> 225 <li><code>react-dom</code>: <code>ReactDOM.unmountComponentAtNode</code> has been deprecated.</li> 226 <li><code>react-dom</code>: <code>ReactDOM.renderSubtreeIntoContainer</code> has been deprecated.</li> 227 <li><code>react-dom/server</code>: <code>ReactDOMServer.renderToNodeStream</code> has been deprecated.</li> 228 </ul> 229 <h2>Breaking Changes</h2> 230 <h3>React</h3> 231 <ul> 232 <li><strong>Automatic batching:</strong> This release introduces a performance improvement that changes to the way React batches updates to do more batching automatically. See <a href="https://github.com/reactwg/react-18/discussions/21">Automatic batching for fewer renders in React 18</a> for more info. In the rare case that you need to opt out, wrap the state update in <code>flushSync</code>.</li> 233 <li><strong>Stricter Strict Mode</strong>: In the future, React will provide a feature that lets components preserve state between unmounts. To prepare for it, React 18 introduces a new development-only check to Strict Mode. React will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount. If this breaks your app, consider removing Strict Mode until you can fix the components to be resilient to remounting with existing state.</li> 234 <li><strong>Consistent useEffect timing</strong>: React now always synchronously flushes effect functions if the update was triggered during a discrete user input event such as a click or a keydown event. Previously, the behavior wasn't always predictable or consistent.</li> 235 <li><strong>Stricter hydration errors</strong>: Hydration mismatches due to missing or extra text content are now treated like errors instead of warnings. React will no longer attempt to "patch up" individual nodes by inserting or deleting a node on the client in an attempt to match the server markup, and will revert to client rendering up to the closest <code><Suspense></code> boundary in the tree. This ensures the hydrated tree is consistent and avoids potential privacy and security holes that can be caused by hydration mismatches.</li> 236 <li><strong>Suspense trees are always consistent:</strong> If a component suspends before it's fully added to the tree, React will not add it to the tree in an incomplete state or fire its effects. Instead, React will throw away the new tree completely, wait for the asynchronous operation to finish, and then retry rendering again from scratch. React will render the retry attempt concurrently, and without blocking the browser.</li> 237 </ul> 238 <!-- raw HTML omitted --> 239 </blockquote> 240 <p>... (truncated)</p> 241 </details> 242 <details> 243 <summary>Commits</summary> 244 <ul> 245 <li><a href="https://github.com/facebook/react/commit/34aa5cfe0d9b6ec4667e02bf46ab34d83dfb2d6d"><code>34aa5cf</code></a> Update local package.jsons for 18</li> 246 <li><a href="https://github.com/facebook/react/commit/fe6e0741286345edb2aa23784c21f8ea611ebdea"><code>fe6e074</code></a> Fix usage of console.error to prevent transform (<a href="https://github.com/facebook/react/tree/HEAD/packages/react-dom/issues/24188">#24188</a>)</li> 247 <li><a href="https://github.com/facebook/react/commit/e7d0053e65db49a536440eb24e6c1e4961d976f6"><code>e7d0053</code></a> [fizz] Fix validateIterable call (<a href="https://github.com/facebook/react/tree/HEAD/packages/react-dom/issues/24166">#24166</a>)</li> 248 <li><a href="https://github.com/facebook/react/commit/6b85823b35f75baec9022a40df336d6aee788ce0"><code>6b85823</code></a> Clean up Selective Hydration / Event Replay flag (<a href="https://github.com/facebook/react/tree/HEAD/packages/react-dom/issues/24156">#24156</a>)</li> 249 <li><a href="https://github.com/facebook/react/commit/2e0d86d22192ff0b13b71b4ad68fea46bf523ef6"><code>2e0d86d</code></a> Allow updating dehydrated root at lower priority without forcing client rende...</li> 250 <li><a href="https://github.com/facebook/react/commit/1c44437355e21f2992344fdef9ab1c1c5a7f8c2b"><code>1c44437</code></a> Fix createRoot container signature (<a href="https://github.com/facebook/react/tree/HEAD/packages/react-dom/issues/24110">#24110</a>)</li> 251 <li><a href="https://github.com/facebook/react/commit/ef23a9ee8114c939946ceff91becc13415d99d5a"><code>ef23a9e</code></a> Flag for text hydration mismatch (<a href="https://github.com/facebook/react/tree/HEAD/packages/react-dom/issues/24107">#24107</a>)</li> 252 <li><a href="https://github.com/facebook/react/commit/796724086a8a64100abf8bbc848a07daeb37777d"><code>7967240</code></a> Match select value against primitives to string but not undefined (<a href="https://github.com/facebook/react/tree/HEAD/packages/react-dom/issues/24077">#24077</a>)</li> 253 <li><a href="https://github.com/facebook/react/commit/832e2987e01aa357c3b2e551acae0682ca36fb14"><code>832e298</code></a> Revert accdientally merged PR (<a href="https://github.com/facebook/react/tree/HEAD/packages/react-dom/issues/24081">#24081</a>)</li> 254 <li><a href="https://github.com/facebook/react/commit/02b65fd8c5dbc6bfe2c976841f2f70a593ac9129"><code>02b65fd</code></a> Allow updates at lower pri without forcing client render</li> 255 <li>Additional commits viewable in <a href="https://github.com/facebook/react/commits/v18.0.0/packages/react-dom">compare view</a></li> 256 </ul> 257 </details> 258 <br /> 259 260 261 Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. 262 263 [//]: # (dependabot-automerge-start) 264 [//]: # (dependabot-automerge-end) 265 266 --- 267 268 <details> 269 <summary>Dependabot commands and options</summary> 270 <br /> 271 272 You can trigger Dependabot actions by commenting on this PR: 273 - `@dependabot rebase` will rebase this PR 274 - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it 275 - `@dependabot merge` will merge this PR after your CI passes on it 276 - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it 277 - `@dependabot cancel merge` will cancel a previously requested merge and block automerging 278 - `@dependabot reopen` will reopen this PR if it is closed 279 - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually 280 - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) 281 - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) 282 - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) 283 284 285 </details> 286 287 288 ## Comments 289 290 ### @dependabot[bot] — 2022-04-27T08:28:58Z 291 292 Superseded by #162. 293