no-flush-sync

Full Name in eslint-plugin-react-dom

react-dom/no-flush-sync

Full Name in @eslint-react/eslint-plugin

@eslint-react/dom-no-flush-sync

Presets

dom recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

flushSync can significantly hurt performance and may unexpectedly force pending Suspense boundaries to show their fallback state.

Most of the time, flushSync can be avoided, so use flushSync as a last resort.

Examples

Using flushSync to force synchronous updates

flushSync forces React to flush pending work synchronously, which can degrade performance and cause Suspense fallbacks to appear unexpectedly.

// Problem: flushSync hurts performance and can trigger unexpected fallback states.
import { flushSync } from "react-dom";

flushSync(() => {
  setSomething(123);
});

Versions

Resources

• Rule Source
• Test Source
• Rule Changelog

Further Reading

• React Docs: flushSync

See Also

• react-dom/no-find-dom-node
  Disallows findDOMNode.
• react-dom/no-render
  Replaces usage of ReactDOM.render() with createRoot(node).render().