flushSync ensures DOM updates synchronously
flushSync forces React to flush any pending work and update the DOM synchronously. By the time the next line of code runs after flushSync, React has already updated the DOM.
React · API reference · all subjects
react-dom
94 notes in this subject, read out of this brain and free to use. This is page 1 of 2.
flushSync performance pitfall
Using flushSync is uncommon and can significantly hurt the performance of your app. It should be used sparingly as a last resort. If an app only uses React APIs and does not integrate with third-party libraries, flushSync should be unnecessary.
flushSync return value
flushSync returns undefined.
flushSync effects on Suspense boundaries
flushSync may force pending Suspense boundaries to show their fallback state and may unexpectedly reveal fallback states.
flushSync may run pending Effects
flushSync may run pending Effects and synchronously apply any updates they contain before returning. It may also flush updates outside the callback when necessary to flush updates inside the callback, such as pending updates from a click event.
flushSync use case: third-party integrations
flushSync is useful for integrating with third-party code like browser APIs. Some browser APIs expect results inside callbacks to be written to the DOM synchronously by the end of the callback so the browser can do something with the rendered DOM.
flushSync example with onbeforeprint
The browser onbeforeprint API allows changing the page immediately before the print dialog opens. flushSync can be used inside the onbeforeprint callback to immediately flush React state to the DOM so that by the time the print dialog opens, the updated state is displayed.
flushSync cannot be called during render
React cannot flushSync in the middle of a render. If you call flushSync inside rendering a component, inside useLayoutEffect or useEffect hooks, or inside class component lifecycle methods, it will noop and warn: 'Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.'
flushSync fix: move to event handlers
If flushSync is called inside an Effect, move the flushSync call to an event handler instead. Calling flushSync in event handlers is safe and correct.
flushSync workaround: defer to microtask
If it is difficult to move flushSync to an event handler, you can defer flushSync to a microtask using queueMicrotask. This allows the current render to finish and schedules another synchronous render to flush the updates. However, this pattern is even worse for performance and should be exhausted as a last resort only.
flushSync signature and import
flushSync is imported from 'react-dom'. The signature is flushSync(callback), where callback is a function that React will immediately call and flush any updates it contains synchronously.
renderToStaticNodeStream removed in React 19
renderToStaticNodeStream was removed in React 19. Use react-dom/server APIs instead.
react-dom package scope
The react-dom package contains methods that are only supported for web applications running in the browser DOM environment. They are not supported for React Native.
createPortal API
createPortal lets you render child components in a different part of the DOM tree.
prefetchDNS API
prefetchDNS lets you prefetch the IP address of a DNS domain name that you expect to connect to. It is a resource preloading API.
preconnect API
preconnect lets you connect to a server you expect to request resources from, even if you don't know what resources you'll need yet. It is a resource preloading API.
preload API
preload lets you fetch a stylesheet, font, image, or external script that you expect to use. It is a resource preloading API.
preloadModule API
preloadModule lets you fetch an ESM module that you expect to use. It is a resource preloading API.
preinit API
preinit lets you fetch and evaluate an external script or fetch and insert a stylesheet. It is a resource preloading API.
preinitModule API
preinitModule lets you fetch and evaluate an ESM module. It is a resource preloading API.
react-dom/server entry point
react-dom/server is an entry point in the react-dom package that contains APIs to render React components on the server.
findDOMNode removed in React 19
findDOMNode was removed in React 19.
hydrate removed in React 19
hydrate was removed in React 19. Use hydrateRoot instead.
render removed in React 19
render was removed in React 19. Use createRoot instead.
unmountComponentAtNode removed in React 19
unmountComponentAtNode was removed in React 19. Use root.unmount() instead.
flushSync API
flushSync lets you force React to flush a state update and update the DOM synchronously.
preconnect purpose
preconnect lets you eagerly connect to a server that you expect to load resources from. It provides the browser with a hint to open a connection to the given server, which can speed up the loading of resources from that server if the browser chooses to do so.
preconnect parameter: href
The href parameter of preconnect is a required string representing the URL of the server you want to connect to.
preconnect return value
preconnect returns nothing (void).
preconnect multiple calls behavior
Multiple calls to preconnect with the same server have the same effect as a single call.
preconnect in browser rendering contexts
In the browser, you can call preconnect in any situation: while rendering a component, in an Effect, in an event handler, and so on.
preconnect in server-side rendering
In server-side rendering or when rendering Server Components, preconnect only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
preconnect when specific resources are known
If you know the specific resources you'll need, you should call other resource preloading APIs instead that will start loading the resources right away.
preconnect to same server as webpage
There is no benefit to preconnecting to the same server the webpage itself is hosted from because it's already been connected to by the time the hint would be given.
preconnect usage in rendering
Example: Call preconnect when rendering a component if you know that its children will load external resources from that host. import { preconnect } from 'react-dom'; function AppRoot() { preconnect("https://example.com"); return ...; }
preconnect usage in event handler
Example: Call preconnect in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state. import { preconnect } from 'react-dom'; function CallToAction() { const onClick = () => { preconnect('http://example.com'); startWizard(); } return ( <button onClick={onClick}>Start Wizard</button> ); }
preconnect function signature and import
The preconnect function is imported from 'react-dom'. It takes a single parameter: href (a string representing the URL of the server to connect to). It returns nothing. The basic usage is: preconnect("https://example.com");
prefetchDNS example: during component rendering
This example shows calling prefetchDNS when rendering a component if you know its children will load external resources from that host: import { prefetchDNS } from 'react-dom'; function AppRoot() { prefetchDNS("https://example.com"); return ...; }
prefetchDNS function signature and import
The prefetchDNS function is exported from react-dom. It accepts a single parameter href (a string representing the URL of the server), and returns nothing. It is imported as: import { prefetchDNS } from 'react-dom'.
prefetchDNS purpose and behavior
prefetchDNS lets you eagerly look up the IP address of a server that you expect to load resources from. It provides the browser with a hint that it should perform the DNS lookup, which can speed up loading of resources from that server.
prefetchDNS parameter requirements
prefetchDNS takes one parameter: href (required, type: string). The href parameter is the URL of the server you want to connect to.
prefetchDNS returns nothing
The prefetchDNS function returns nothing (void).
prefetchDNS multiple calls same server
Multiple calls to prefetchDNS with the same server have the same effect as a single call. Duplicate calls do not provide additional benefit.
prefetchDNS browser usage contexts
In the browser, you can call prefetchDNS in any situation: while rendering a component, in an Effect, in an event handler, and so on.
prefetchDNS server-side rendering behavior
In server-side rendering or when rendering Server Components, prefetchDNS only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
prefetchDNS with known specific resources
If you know the specific resources you will need, you can call other resource preloading functions instead that will start loading the resources right away. These alternatives may be more efficient than prefetchDNS when specific resources are known.
prefetchDNS same-origin server redundancy
There is no benefit to prefetching DNS for the same server the webpage itself is hosted from because its IP address has already been looked up by the time the hint would be given.
prefetchDNS vs preconnect for multiple domains
Compared with preconnect, prefetchDNS may be better if you are speculatively connecting to a large number of domains, in which case the overhead of preconnections might outweigh the benefit. prefetchDNS is lighter-weight when you need DNS lookups for many domains.
prefetchDNS example: in event handler
This example shows calling prefetchDNS in an event handler before transitioning to a page or state where external resources will be needed. This starts the DNS lookup earlier than if you call it during rendering of the new page: import { prefetchDNS } from 'react-dom'; function CallToAction() { const onClick = () => { prefetchDNS('http://example.com'); startWizard(); } return ( <button onClick={onClick}>Start Wizard</button> ); }
preinitModule function signature and import
preinitModule is imported from 'react-dom'. The function signature is preinitModule(href, options) where href is a string representing the URL of the module, and options is an object containing configuration properties.
preinitModule parameters
preinitModule accepts two parameters: (1) href: a string, the URL of the module to download and execute; (2) options: an object with properties: as (required string, must be 'script'), crossOrigin (string, CORS policy - possible values 'anonymous' and 'use-credentials'), integrity (string, cryptographic hash to verify authenticity), nonce (string, cryptographic nonce for strict Content Security Policy).
preinitModule return value
preinitModule returns nothing.
preinitModule purpose and behavior
preinitModule lets you eagerly fetch and evaluate an ESM module. It provides the browser with a hint to start downloading and executing the given module, which can save time. Modules that you preinit are executed when they finish downloading.
preinitModule multiple calls idempotency
Multiple calls to preinitModule with the same href have the same effect as a single call.
preinitModule can be called in multiple contexts
In the browser, you can call preinitModule in any situation: while rendering a component, in an Effect, in an event handler, and so on.
preinitModule in server-side rendering and Server Components
In server-side rendering or when rendering Server Components, preinitModule only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
preinitModule example - rendering
Example of calling preinitModule when rendering a component: ```js import { preinitModule } from 'react-dom'; function AppRoot() { preinitModule("https://example.com/module.js", {as: "script"}); return ...; } ``` Use this pattern when you know a component or its children will use a specific module and you're OK with the module being evaluated immediately upon download.
preinitModule example - event handler
Example of calling preinitModule in an event handler: ```js import { preinitModule } from 'react-dom'; function CallToAction() { const onClick = () => { preinitModule("https://example.com/module.js", {as: "script"}); startWizard(); } return ( <button onClick={onClick}>Start Wizard</button> ); } ``` Use this pattern to call preinitModule before transitioning to a page or state where the module will be needed, starting the process earlier than if called during rendering of the new page or state.
preloadModule alternative for downloading without executing
If you want the browser to download a module but not execute it right away, use preloadModule instead of preinitModule.
preinit for non-ESM modules
If you want to preinit a script that isn't an ESM module, use preinit instead of preinitModule.