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.

Common Violations

Invalid

import { flushSync } from "react-dom";

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

Resources

• Rule Source
• Test Source

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().