React and React Hooks

This page documents 86 rules from the current dependency versions and repository configuration. Each entry includes effective severity, scope, upstream description, common messages, and incorrect/correct examples.

Explicit repository rules (13 rules)

@eslint-react/dom-no-missing-button-type

A button without type defaults to submit in forms; explicit types prevent accidental submission.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Add type attribute with value '{{ type }}'.; Missing an explicit type attribute for button.
• Example type: Direct code example for an explicit repository rule

Incorrect:

<button onClick={save}>Save</button>

Correct:

<button type="button" onClick={save}>Save</button>

@eslint-react/dom-no-missing-iframe-sandbox

Unrestricted iframes expose broad permissions; a warning prompts review of origins and sandbox policy.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Add sandbox attribute with value '{{ value }}'.; Missing an explicit sandbox attribute for iframe.
• Example type: Direct code example for an explicit repository rule

Incorrect:

<iframe src="https://example.com" />

Correct:

<iframe src="https://example.com" sandbox="allow-scripts" />

@eslint-react/dom-no-unknown-property

Misspelled JSX attributes can be ignored or incorrectly forwarded to the DOM; catch them before submission.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: React does not recognize data-* props with uppercase characters on a DOM element. Found '{{name}}', use '{{lowerCaseName}}' instead; Invalid property '{{name}}' found on tag '{{tagName}}', but it is only allowed on: {{allowedTags}}; Unknown property '{{name}}' found
• Example type: Direct code example for an explicit repository rule

Incorrect:

<label class="field" for="name">Name</label>

Correct:

<label className="field" htmlFor="name">Name</label>

@eslint-react/dom-no-unsafe-target-blank

Without opener isolation, target=_blank can let the target page control the originating page.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Add 'rel="noreferrer noopener"' to the link to prevent security risks.; Using 'target="_blank"' on an external link without 'rel="noreferrer noopener"' is a security risk.
• Example type: Direct code example for an explicit repository rule

Incorrect:

<a href="https://example.com" target="_blank">Open</a>

Correct:

<a href="https://example.com" target="_blank" rel="noreferrer">Open</a>

@eslint-react/error-boundaries

Use Error Boundaries for child rendering errors, not parent try/catch; checked by react-hooks/error-boundaries.

• Effective severity and scope: disabled by default through an explicit local override
• Disabled in: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Use an Error Boundary to catch errors in child components. Try/catch can't catch errors during React's rendering process.; Use an Error Boundary instead of try/catch around the 'use' hook. The 'use' hook suspends the component, and its errors can only be caught by Error Boundaries.
• Example type: Direct code example for an explicit repository rule

Incorrect:

function Page() { try { return <Profile />; } catch { return <Fallback />; } }

Correct:

function Page() { return <ErrorBoundary fallback={<Fallback />}><Profile /></ErrorBoundary>; }

@eslint-react/exhaustive-deps

Hook dependencies must be complete and accurate; checked by react-hooks/exhaustive-deps.

• Effective severity and scope: disabled by default through an explicit local override
• Disabled in: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Example type: Direct code example for an explicit repository rule

Incorrect:

function UserCard({ id }: Props) { useEffect(() => load(id), []); return <div />; }

Correct:

function UserCard({ id }: Props) { useEffect(() => load(id), [id]); return <div />; }

@eslint-react/purity

Do not call known impure functions such as Date.now or Math.random during component/Hook rendering; checked by react-hooks/purity.

• Effective severity and scope: disabled by default through an explicit local override
• Disabled in: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Do not call '{{name}}' during render. Components and hooks must be pure. Move this call into an event handler, effect, or state initializer.
• Example type: Direct code example for an explicit repository rule

Incorrect:

function Token() { const value = Math.random(); return <span>{value}</span>; }

Correct:

function Token() { const [value] = useState(() => Math.random()); return <span>{value}</span>; }

@eslint-react/rules-of-hooks

Call Hooks only at component/custom-Hook top level, not in conditions, loops, or ordinary functions; checked by react-hooks/rules-of-hooks.

• Effective severity and scope: disabled by default through an explicit local override
• Disabled in: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Example type: Direct code example for an explicit repository rule

Incorrect:

function UserCard({ ready }: Props) { if (ready) { useEffect(load, []); } return <div />; }

Correct:

function UserCard({ ready }: Props) { useEffect(() => { if (ready) load(); }, [ready]); return <div />; }

@eslint-react/set-state-in-effect

Synchronous state updates inside effects cause extra renders; prefer derived values or external subscription callbacks. Checked by react-hooks/set-state-in-effect.

• Effective severity and scope: disabled by default through an explicit local override
• Disabled in: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Do not call the 'set' function '{{name}}' of 'useState' synchronously in an effect. This can lead to unnecessary re-renders and performance issues.
• Example type: Direct code example for an explicit repository rule

Incorrect:

function User({ name }: Props) { const [label, setLabel] = useState(''); useEffect(() => { setLabel(name.trim()); }, [name]); return <p>{label}</p>; }

Correct:

function User({ name }: Props) { const label = name.trim(); return <p>{label}</p>; }

@eslint-react/set-state-in-render

Unconditional state updates during rendering can cause repeated or infinite renders; checked by react-hooks/set-state-in-render.

• Effective severity and scope: disabled by default through an explicit local override
• Disabled in: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Do not call the 'set' function '{{name}}' unconditionally during render. This will trigger an infinite render loop.
• Example type: Direct code example for an explicit repository rule

Incorrect:

function Counter() { const [count, setCount] = useState(0); setCount(count + 1); return <span>{count}</span>; }

Correct:

function Counter() { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; }

@eslint-react/static-components

Defining components inside render recreates them and loses state; checked by react-hooks/static-components.

• Effective severity and scope: disabled by default through an explicit local override
• Disabled in: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Cannot create components during render. Components created during render will reset their state each time they are created. Declare components outside of render.; The component is created during render here.
• Example type: Direct code example for an explicit repository rule

Incorrect:

function Page() { function Header() { return <h1>Title</h1>; } return <Header />; }

Correct:

function Header() { return <h1>Title</h1>; }
function Page() { return <Header />; }

@eslint-react/unsupported-syntax

Syntax React Compiler cannot safely transform must be revised or explicitly isolated; checked by react-hooks/unsupported-syntax.

• Effective severity and scope: disabled by default through an explicit local override
• Disabled in: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Do not use 'eval' inside components or hooks. 'eval' cannot be statically analyzed and is not supported by React Compiler.; Do not use 'with' statements inside components or hooks. 'with' changes scope dynamically and is not supported by React Compiler.
• Example type: Direct code example for an explicit repository rule

Incorrect:

function Page({ source }: Props) { return <div>{eval(source)}</div>; }

Correct:

function Page({ source }: Props) { return <div>{JSON.parse(source)}</div>; }

@eslint-react/use-memo

useMemo callbacks must return cached values rather than act as side-effect Hooks; checked by react-hooks/use-memo.

• Effective severity and scope: disabled by default through an explicit local override
• Disabled in: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: `useMemo() callbacks must return a value.

This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects.; useMemo() callbacks may not be async or generator functions.

useMemo() callbacks are called once and must synchronously return a value.; useMemo() callbacks may not accept parameters.

useMemo() callbacks are called by React to cache calculations across re-renders. They should not take parameters. Instead, directly reference the props, state, or local variables needed for the computation.`

• Example type: Direct code example for an explicit repository rule

Incorrect:

function User({ name }: Props) { useMemo(() => name.trim(), [name]); return <p>{name}</p>; }

Correct:

function User({ name }: Props) { const label = useMemo(() => name.trim(), [name]); return <p>{label}</p>; }

Rules from third-party presets (73 rules)

@eslint-react/dom-no-dangerously-set-innerhtml

Checks the corresponding code constraint. Upstream description: Disallows DOM elements from using 'dangerouslySetInnerHTML'.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Using 'dangerouslySetInnerHTML' may have security implications.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<div dangerouslySetInnerHTML={{ __html: html }} />

Correct:

<div>{plainText}</div>

@eslint-react/dom-no-dangerously-set-innerhtml-with-children

Checks the corresponding code constraint. Upstream description: Disallows DOM elements from using 'dangerouslySetInnerHTML' and 'children' at the same time.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: A DOM component cannot use both children and 'dangerouslySetInnerHTML'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<div dangerouslySetInnerHTML={{ __html: html }}>Fallback</div>

Correct:

<div dangerouslySetInnerHTML={{ __html: html }} />

@eslint-react/dom-no-find-dom-node

Checks the corresponding code constraint. Upstream description: Disallows 'findDOMNode'.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: [Deprecated] Use alternatives instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

const node = findDOMNode(component);

Correct:

const nodeRef = useRef<HTMLDivElement>(null);

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

Checks the corresponding code constraint. Upstream description: Disallows 'flushSync'.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Using 'flushSync' is uncommon and can hurt the performance of your app.
• Example type: Direct code example for a third-party preset rule

Incorrect:

flushSync(() => setReady(true));

Correct:

setReady(true);

@eslint-react/dom-no-hydrate

Checks the corresponding code constraint. Upstream description: Replaces usage of 'ReactDOM.hydrate()' with 'hydrateRoot()'.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: [Deprecated] Use 'hydrateRoot()' instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

import ReactDOM from "react-dom";
ReactDOM.hydrate(<App />, root);

Correct:

import { hydrateRoot } from "react-dom/client";
hydrateRoot(root, <App />);

@eslint-react/dom-no-render

Checks the corresponding code constraint. Upstream description: Replaces usage of 'ReactDOM.render()' with 'createRoot(node).render()'.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: [Deprecated] Use 'createRoot(node).render()' instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

ReactDOM.render(<App />, root);

Correct:

createRoot(root).render(<App />);

@eslint-react/dom-no-render-return-value

Checks the corresponding code constraint. Upstream description: Disallows the return value of 'ReactDOM.render'.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Do not depend on the return value from 'ReactDOM.render'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

const instance = ReactDOM.render(<App />, root);

Correct:

createRoot(root).render(<App />);

@eslint-react/dom-no-script-url

Checks the corresponding code constraint. Upstream description: Disallows 'javascript:' URLs as attribute values.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Using a 'javascript:' URL is a security risk and should be avoided.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<a href="javascript:alert(1)">Open</a>

Correct:

<button type="button" onClick={open}>Open</button>

@eslint-react/dom-no-unsafe-iframe-sandbox

Checks the corresponding code constraint. Upstream description: Enforces that the 'sandbox' attribute for 'iframe' elements is not set to unsafe combinations.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Unsafe 'sandbox' attribute value on 'iframe' component.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<iframe sandbox="allow-scripts allow-same-origin" src={url} />

Correct:

<iframe sandbox="allow-scripts" src={url} />

@eslint-react/dom-no-use-form-state

Checks the corresponding code constraint. Upstream description: Replaces usage of 'useFormState' with 'useActionState'.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: [Deprecated] Use 'useActionState' from 'react' package instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

import { useFormState } from 'react-dom';
function Form() { const [state, action] = useFormState(save, initialState); return <form action={action}>{state.message}</form>; }

Correct:

import { useActionState } from 'react';
function Form() { const [state, action] = useActionState(save, initialState); return <form action={action}>{state.message}</form>; }

@eslint-react/dom-no-void-elements-with-children

Checks the corresponding code constraint. Upstream description: Disallows 'children' in void DOM elements.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: '{{elementType}}' is a void element tag and must not have children.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<img src={url}>Avatar</img>

Correct:

<img src={url} alt="Avatar" />

@eslint-react/jsx-no-children-prop

Checks the corresponding code constraint. Upstream description: Disallows passing 'children' as a prop.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Do not pass 'children' as props.; Move 'children' to element content.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<UserCard children={<span>Name</span>} />

Correct:

<UserCard><span>Name</span></UserCard>

@eslint-react/jsx-no-children-prop-with-children

Checks the corresponding code constraint. Upstream description: Disallows passing 'children' as a prop when children are also passed as nested content.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Do not pass 'children' as a prop when the element already has children content.; Remove the nested children content.; Remove the 'children' prop.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<UserCard children={<span>A</span>}><span>B</span></UserCard>

Correct:

<UserCard><span>B</span></UserCard>

@eslint-react/jsx-no-comment-textnodes

Checks the corresponding code constraint. Upstream description: Prevents comment strings from being accidentally inserted into a JSX element's text nodes.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Possible misused comment in text node. Comments inside children section of tag should be placed inside braces.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<div>// temporary note</div>

Correct:

<div>{/* temporary note */}</div>

@eslint-react/jsx-no-key-after-spread

Checks the corresponding code constraint. Upstream description: Prevent patterns that cause deoptimization when using the automatic JSX runtime.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Placing 'key' after spread props causes deoptimization when using the automatic JSX runtime. Put 'key' before any spread props.
• Example type: Direct code example for a third-party preset rule

Incorrect:

const props = { className: 'row' };
<div {...props} key="row" />;

Correct:

const props = { className: 'row' };
<div key="row" {...props} />;

@eslint-react/jsx-no-leaked-dollar

Checks the corresponding code constraint. Upstream description: Catches $ before {expr} in JSX — typically from template literal ${expr} being copy-pasted into JSX without removing the $. The $ "leaks" into the rendered output.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Leaked '$' in JSX. This '$' will be rendered as text nodes.; Remove the text node '$'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<span>Total: ${total}</span>

Correct:

<span>Total: {total}</span>

@eslint-react/jsx-no-leaked-semicolon

Checks the corresponding code constraint. Upstream description: Catches ; at the start of JSX text nodes — typically from accidentally placing a statement-ending ; inside JSX. The ; "leaks" into the rendered output.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Leaked ';' in JSX. This ';' will be rendered as text nodes.; Remove the text node ';'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<span>;
{label}</span>

Correct:

<span>{label}</span>

@eslint-react/jsx-no-namespace

Checks the corresponding code constraint. Upstream description: Disallow JSX namespace syntax, as React does not support them.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: A React component '{{name}}' must not be in a namespace, as React does not support them.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<svg:path />

Correct:

<path />

@eslint-react/naming-convention-context-name

Checks the corresponding code constraint. Upstream description: Enforces identifier names assigned from createContext calls to be a valid component name with the suffix Context.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: A context name must be a valid component name with the suffix 'Context'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

const Theme = createContext('light');

Correct:

const ThemeContext = createContext('light');

@eslint-react/naming-convention-id-name

Checks the corresponding code constraint. Upstream description: Enforces identifier names assigned from 'useId' calls to be either 'id' or end with 'Id'.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: An identifier assigned from 'useId' must be named 'id' or end with 'Id'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

const userIdentifier = useId();

Correct:

const userId = useId();

@eslint-react/naming-convention-ref-name

Checks the corresponding code constraint. Upstream description: Enforces identifier names assigned from 'useRef' calls to be either 'ref' or end with 'Ref'.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: A ref identifier must be named 'ref' or ending in 'Ref'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

const element = useRef<HTMLDivElement>(null);

Correct:

const elementRef = useRef<HTMLDivElement>(null);

@eslint-react/no-access-state-in-setstate

Disallows unsafe, invalid, or misleading constructs. Upstream description: Disallows accessing 'this.state' inside 'setState' calls.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Do not access 'this.state' within 'setState'. Use the update function instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

class Counter extends Component { increment() { this.setState({ count: this.state.count + 1 }); } render() { return <span>{this.state.count}</span>; } }

Correct:

class Counter extends Component { increment() { this.setState((state) => ({ count: state.count + 1 })); } render() { return <span>{this.state.count}</span>; } }

@eslint-react/no-array-index-key

Disallows unsafe, invalid, or misleading constructs. Upstream description: Disallows using an item's index in the array as its key.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Do not use item index in the array as its key.
• Example type: Direct code example for a third-party preset rule

Incorrect:

items.map((item, index) => <Row key={index} item={item} />)

Correct:

items.map((item) => <Row key={item.id} item={item} />)

@eslint-react/no-children-count

Disallows unsafe, invalid, or misleading constructs. Upstream description: Disallows the use of 'Children.count' from the 'react' package.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Using 'Children.count' is uncommon and can lead to fragile code. Use alternatives instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

const count = Children.count(children);

Correct:

const count = items.length;

@eslint-react/no-children-for-each

Disallows unsafe, invalid, or misleading constructs. Upstream description: Disallows the use of 'Children.forEach' from the 'react' package.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Using 'Children.forEach' is uncommon and can lead to fragile code. Use alternatives instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

Children.forEach(children, renderChild);

Correct:

items.forEach(renderItem);

@eslint-react/no-children-map

Disallows unsafe, invalid, or misleading constructs. Upstream description: Disallows the use of 'Children.map' from the 'react' package.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Using 'Children.map' is uncommon and can lead to fragile code. Use alternatives instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

const rows = Children.map(children, wrapChild);

Correct:

const rows = items.map(renderItem);

@eslint-react/no-children-only

Disallows unsafe, invalid, or misleading constructs. Upstream description: Disallows the use of 'Children.only' from the 'react' package.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Using 'Children.only' is uncommon and can lead to fragile code. Use alternatives instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

const child = Children.only(children);

Correct:

const child = Array.isArray(children) ? children[0] : children;

@eslint-react/no-children-to-array

Disallows unsafe, invalid, or misleading constructs. Upstream description: Disallows the use of 'Children.toArray' from the 'react' package.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Using 'Children.toArray' is uncommon and can lead to fragile code. Use alternatives instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

const list = Children.toArray(children);

Correct:

const list = items.slice();

@eslint-react/no-clone-element

Disallows unsafe, invalid, or misleading constructs. Upstream description: Disallows 'cloneElement'.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Using 'cloneElement' is uncommon and can lead to fragile code. Use alternatives instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

const button = cloneElement(child, { disabled: true });

Correct:

const button = <Button {...props} disabled />;

@eslint-react/no-component-will-mount

Disallows unsafe, invalid, or misleading constructs. Upstream description: Replaces usage of 'componentWillMount' with 'UNSAFE_componentWillMount'.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: [Deprecated] Use 'UNSAFE_componentWillMount' instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

class Page extends Component { componentWillMount() { load(); } }

Correct:

class Page extends Component { componentDidMount() { load(); } }

@eslint-react/no-component-will-receive-props

Disallows unsafe, invalid, or misleading constructs. Upstream description: Replaces usage of 'componentWillReceiveProps' with 'UNSAFE_componentWillReceiveProps'.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: [Deprecated] Use 'UNSAFE_componentWillReceiveProps' instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

class Page extends Component { componentWillReceiveProps(next: Props) { sync(next); } }

Correct:

class Page extends Component { componentDidUpdate(previous: Props) { if (previous.id !== this.props.id) sync(this.props); } }

@eslint-react/no-component-will-update

Disallows unsafe, invalid, or misleading constructs. Upstream description: Replaces usage of 'componentWillUpdate' with 'UNSAFE_componentWillUpdate'.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: [Deprecated] Use 'UNSAFE_componentWillUpdate' instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

class Page extends Component { componentWillUpdate() { saveLayout(); } }

Correct:

class Page extends Component { componentDidUpdate() { saveLayout(); } }

@eslint-react/no-context-provider

Disallows unsafe, invalid, or misleading constructs. Upstream description: Replaces usage of '<Context.Provider>' with '<Context>'.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: In React 19, you can render '<Context>' as a provider instead of '<Context.Provider>'.; Replace '<Context.Provider>' with '<Context>'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<ThemeContext.Provider value={theme}><Page /></ThemeContext.Provider>

Correct:

<ThemeContext value={theme}><Page /></ThemeContext>

@eslint-react/no-create-ref

Disallows unsafe, invalid, or misleading constructs. Upstream description: Disallows 'createRef' in function components and Hooks.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: [Deprecated] Use 'useRef' instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

function Input() { const inputRef = createRef<HTMLInputElement>(); return <input ref={inputRef} />; }

Correct:

function Input() { const inputRef = useRef<HTMLInputElement>(null); return <input ref={inputRef} />; }

@eslint-react/no-direct-mutation-state

Disallows unsafe, invalid, or misleading constructs. Upstream description: Disallows direct mutation of 'this.state'.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Do not mutate state directly. Use 'setState()' instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

class Counter extends Component { increment() { this.state.count += 1; } render() { return <span>{this.state.count}</span>; } }

Correct:

class Counter extends Component { increment() { this.setState((state) => ({ count: state.count + 1 })); } render() { return <span>{this.state.count}</span>; } }

@eslint-react/no-forward-ref

Disallows unsafe, invalid, or misleading constructs. Upstream description: Replaces usage of 'forwardRef' with passing 'ref' as a prop.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: In React 19, 'forwardRef' is no longer necessary. Pass 'ref' as a prop instead.; Replace 'forwardRef' with passing 'ref' as a prop.
• Example type: Direct code example for a third-party preset rule

Incorrect:

const Input = forwardRef<HTMLInputElement, Props>((props, ref) => <input ref={ref} />);

Correct:

function Input({ ref, ...props }: Props & { ref?: Ref<HTMLInputElement> }) { return <input ref={ref} {...props} />; }

@eslint-react/no-leaked-conditional-rendering

Disallows unsafe, invalid, or misleading constructs. Upstream description: Prevents problematic leaked values from being rendered.

• Effective severity and scope: error: React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Potential leaked value {{value}} that might cause unintentionally rendered values or rendering crashes.
• Example type: Direct code example for a third-party preset rule

Incorrect:

interface Props { count: number }
function List({ count }: Props) { return <div>{count && <Items />}</div>; }

Correct:

interface Props { count: number }
function List({ count }: Props) { return <div>{count > 0 ? <Items /> : null}</div>; }

@eslint-react/no-missing-key

Disallows unsafe, invalid, or misleading constructs. Upstream description: Disallows missing 'key' on items in list rendering.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Missing 'key' for element when rendering list.; Use fragment component instead of '<>' because it does not support 'key'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

items.map((item) => <Row item={item} />)

Correct:

items.map((item) => <Row key={item.id} item={item} />)

@eslint-react/no-nested-component-definitions

Disallows unsafe, invalid, or misleading constructs. Upstream description: Disallows nesting component definitions inside other components.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Do not nest component definitions inside other components or props. {{suggestion}}
• Example type: Direct code example for a third-party preset rule

Incorrect:

function Page() { function Header() { return <h1>Title</h1>; } return <Header />; }

Correct:

function Header() { return <h1>Title</h1>; }
function Page() { return <Header />; }

@eslint-react/no-nested-lazy-component-declarations

Disallows unsafe, invalid, or misleading constructs. Upstream description: Disallows nesting lazy component declarations inside other components or hooks.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Do not declare lazy components inside other components or hooks. Instead, always declare them at the top level of your module.
• Example type: Direct code example for a third-party preset rule

Incorrect:

function Page() { const Settings = lazy(() => import('./Settings')); return <Settings />; }

Correct:

const Settings = lazy(() => import('./Settings'));
function Page() { return <Settings />; }

@eslint-react/no-set-state-in-component-did-mount

Disallows unsafe, invalid, or misleading constructs. Upstream description: Disallows calling 'this.setState' in 'componentDidMount' outside functions such as callbacks.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Do not call 'this.setState' in 'componentDidMount' outside functions such as callbacks.
• Example type: Direct code example for a third-party preset rule

Incorrect:

class Page extends Component { componentDidMount() { this.setState({ ready: true }); } }

Correct:

class Page extends Component { componentDidMount() { subscribe(() => this.setState({ ready: true })); } }

@eslint-react/no-set-state-in-component-did-update

Disallows unsafe, invalid, or misleading constructs. Upstream description: Disallows calling 'this.setState' in 'componentDidUpdate' outside functions such as callbacks.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Do not call 'this.setState' in 'componentDidUpdate' outside functions such as callbacks.
• Example type: Direct code example for a third-party preset rule

Incorrect:

class Page extends Component { componentDidUpdate() { this.setState({ ready: true }); } }

Correct:

class Page extends Component { componentDidUpdate() { schedule(() => this.setState({ ready: true })); } }

@eslint-react/no-set-state-in-component-will-update

Disallows unsafe, invalid, or misleading constructs. Upstream description: Disallows calling 'this.setState' in 'componentWillUpdate' outside functions such as callbacks.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Do not call 'this.setState' in 'componentWillUpdate' outside functions such as callbacks.
• Example type: Direct code example for a third-party preset rule

Incorrect:

class Page extends Component { componentWillUpdate() { this.setState({ ready: true }); } }

Correct:

class Page extends Component { componentWillUpdate() { schedule(() => this.setState({ ready: true })); } }

@eslint-react/no-unnecessary-use-prefix

Disallows unsafe, invalid, or misleading constructs. Upstream description: Enforces that a function with the 'use' prefix uses at least one Hook inside it.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: If your function doesn't call any Hooks, avoid the 'use' prefix. Instead, write it as a regular function without the 'use' prefix.
• Example type: Direct code example for a third-party preset rule

Incorrect:

function useFormatter(value: string) { return value.trim(); }

Correct:

function formatValue(value: string) { return value.trim(); }

@eslint-react/no-unsafe-component-will-mount

Disallows unsafe, invalid, or misleading constructs. Upstream description: Warns about the use of 'UNSAFE_componentWillMount' in class components.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Do not use 'UNSAFE_componentWillMount'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

class Page extends Component { UNSAFE_componentWillMount() { load(); } }

Correct:

class Page extends Component { componentDidMount() { load(); } }

@eslint-react/no-unsafe-component-will-receive-props

Disallows unsafe, invalid, or misleading constructs. Upstream description: Warns about the use of 'UNSAFE_componentWillReceiveProps' in class components.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Do not use 'UNSAFE_componentWillReceiveProps'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

class Page extends Component { UNSAFE_componentWillReceiveProps(next: Props) { sync(next); } }

Correct:

class Page extends Component { componentDidUpdate(previous: Props) { if (previous.id !== this.props.id) sync(this.props); } }

@eslint-react/no-unsafe-component-will-update

Disallows unsafe, invalid, or misleading constructs. Upstream description: Warns about the use of 'UNSAFE_componentWillUpdate' in class components.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Do not use 'UNSAFE_componentWillUpdate'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

class Page extends Component { UNSAFE_componentWillUpdate() { saveLayout(); } }

Correct:

class Page extends Component { componentDidUpdate() { saveLayout(); } }

@eslint-react/no-unused-class-component-members

Disallows unsafe, invalid, or misleading constructs. Upstream description: Warns about unused class component methods and properties.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Unused method or property '{{methodName}}'' of class '{{className}}'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

class Page extends Component { unused = 1; render() { return <div />; } }

Correct:

class Page extends Component { title = 'Page'; render() { return <div>{this.title}</div>; } }

@eslint-react/no-use-context

Disallows unsafe, invalid, or misleading constructs. Upstream description: Replaces usage of 'useContext' with 'use'.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: In React 19, 'use' is preferred over 'useContext' because it is more flexible.; Replace 'useContext' with 'use'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

const theme = useContext(ThemeContext);

Correct:

const theme = use(ThemeContext);

@eslint-react/rsc-function-definition

Checks the corresponding code constraint. Upstream description: Validates and transforms React Client/Server Function definitions.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Functions exported from files with 'use server' directive are React Server Functions and therefore must be async.; The '{{name}}' directive must be at the very beginning of the file, before any imports or other code.; The '{{name}}' directive must be written with single or double quotes, not backticks.
• Example type: Direct code example for a third-party preset rule

Incorrect:

"use server";
export function save() { persist(); }

Correct:

"use server";
export async function save(): Promise<void> { await persist(); }

@eslint-react/use-state

Checks the corresponding code constraint. Upstream description: Enforces correct usage of 'useState', including destructuring, symmetric naming of the value and setter, and wrapping expensive initializers in a lazy initializer function.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: useState should be destructured into a value and setter pair, e.g., const [state, setState] = useState(...).; To prevent re-computation, consider using lazy initial state for useState calls that involve function calls. Ex: 'useState(() => getValue())'.; The setter should be named 'set' followed by the capitalized state variable name, e.g., 'setState' for 'state'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

const state = useState(0);

Correct:

const [count, setCount] = useState(0);

@eslint-react/web-api-no-leaked-event-listener

Checks the corresponding code constraint. Upstream description: Enforces that every 'addEventListener' in a component or custom hook has a corresponding 'removeEventListener'.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: An 'addEventListener' in '{{effectMethodKind}}' should have a corresponding 'removeEventListener' in its cleanup function.; A/an '{{eventMethodKind}}' should not have an inline listener function.
• Example type: Direct code example for a third-party preset rule

Incorrect:

useEffect(() => { window.addEventListener('resize', resize); }, []);

Correct:

useEffect(() => { window.addEventListener('resize', resize); return () => window.removeEventListener('resize', resize); }, []);

@eslint-react/web-api-no-leaked-fetch

Checks the corresponding code constraint. Upstream description: Enforces that every 'fetch' in a component or custom hook has a corresponding 'AbortController' abort in the cleanup function.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: A 'fetch' must be provided with an 'AbortController' for proper cleanup.; A 'fetch' started in effect must be aborted with 'AbortController.abort' in the cleanup function.
• Example type: Direct code example for a third-party preset rule

Incorrect:

useEffect(() => { fetch(url).then(read); }, [url]);

Correct:

useEffect(() => { const controller = new AbortController(); fetch(url, { signal: controller.signal }).then(read); return () => controller.abort(); }, [url]);

@eslint-react/web-api-no-leaked-intersection-observer

Checks the corresponding code constraint. Upstream description: Enforces that every 'IntersectionObserver' created in a component or custom hook has a corresponding 'IntersectionObserver.disconnect()'.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Dynamically added 'IntersectionObserver.observe' should be cleared all at once using 'IntersectionObserver.disconnect' in the cleanup function.; An 'IntersectionObserver' instance created in 'useEffect' must be disconnected in the cleanup function.; An 'IntersectionObserver' instance created in component or custom hook must be assigned to a variable for proper cleanup.
• Example type: Direct code example for a third-party preset rule

Incorrect:

useEffect(() => { const observer = new IntersectionObserver(update); observer.observe(node); }, [node]);

Correct:

useEffect(() => { const observer = new IntersectionObserver(update); observer.observe(node); return () => observer.disconnect(); }, [node]);

@eslint-react/web-api-no-leaked-interval

Checks the corresponding code constraint. Upstream description: Enforces that every 'setInterval' in a component or custom hook has a corresponding 'clearInterval'.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: A 'setInterval' created in '{{ kind }}' must be cleared with 'clearInterval' in the cleanup function.; A 'setInterval' must be assigned to a variable for proper cleanup.
• Example type: Direct code example for a third-party preset rule

Incorrect:

useEffect(() => { setInterval(refresh, 1000); }, []);

Correct:

useEffect(() => { const timer = setInterval(refresh, 1000); return () => clearInterval(timer); }, []);

@eslint-react/web-api-no-leaked-resize-observer

Checks the corresponding code constraint. Upstream description: Enforces that every 'ResizeObserver' created in a component or custom hook has a corresponding 'ResizeObserver.disconnect()'.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Dynamically added 'ResizeObserver.observe' should be cleared all at once using 'ResizeObserver.disconnect' in the cleanup function.; A 'ResizeObserver' instance created in 'useEffect' must be disconnected in the cleanup function.; A 'ResizeObserver' instance created in component or custom hook must be assigned to a variable for proper cleanup.
• Example type: Direct code example for a third-party preset rule

Incorrect:

useEffect(() => { const observer = new ResizeObserver(update); observer.observe(node); }, [node]);

Correct:

useEffect(() => { const observer = new ResizeObserver(update); observer.observe(node); return () => observer.disconnect(); }, [node]);

@eslint-react/web-api-no-leaked-timeout

Checks the corresponding code constraint. Upstream description: Enforces that every 'setTimeout' in a component or custom hook has a corresponding 'clearTimeout'.

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: A 'setTimeout' created in '{{ kind }}' must be cleared with 'clearTimeout' in the cleanup function.; A 'setTimeout' must be assigned to a variable for proper cleanup.
• Example type: Direct code example for a third-party preset rule

Incorrect:

useEffect(() => { setTimeout(refresh, 1000); }, []);

Correct:

useEffect(() => { const timer = setTimeout(refresh, 1000); return () => clearTimeout(timer); }, []);

react-hooks/config

Checks the corresponding code constraint. Upstream description: Validates the compiler configuration options

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Example type: Direct code example for a third-party preset rule

Incorrect:

export default [{ rules: { "react-hooks/config": ["error", { compilationMode: "invalid" }] } }];

Correct:

export default [{ rules: { "react-hooks/config": ["error", { compilationMode: "infer" }] } }];

react-hooks/error-boundaries

Checks the corresponding code constraint. Upstream description: Validates usage of error boundaries instead of try/catch for errors in child components

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Example type: Direct code example for a third-party preset rule

Incorrect:

function Page() { try { return <Profile />; } catch { return <Fallback />; } }

Correct:

function Page() { return <ErrorBoundary fallback={<Fallback />}><Profile /></ErrorBoundary>; }

react-hooks/exhaustive-deps

Checks the corresponding code constraint. Upstream description: verifies the list of dependencies for Hooks like useEffect and similar

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Example type: Direct code example for a third-party preset rule

Incorrect:

function UserCard({ id }: Props) { useEffect(() => load(id), []); return <div />; }

Correct:

function UserCard({ id }: Props) { useEffect(() => load(id), [id]); return <div />; }

react-hooks/gating

Checks the corresponding code constraint. Upstream description: Validates configuration of gating mode

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Example type: Direct code example for a third-party preset rule

Incorrect:

export default [{ rules: { "react-hooks/gating": ["error", { gating: { source: "" } }] } }];

Correct:

export default [{ rules: { "react-hooks/gating": ["error", { gating: { source: "featureFlags", importSpecifierName: "isCompilerEnabled" } }] } }];

react-hooks/globals

Checks the corresponding code constraint. Upstream description: Validates against assignment/mutation of globals during render, part of ensuring that side effects must render outside of render

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Example type: Direct code example for a third-party preset rule

Incorrect:

let currentUser = null;
function User({ user }: Props) { currentUser = user; return <p>{user.name}</p>; }

Correct:

function User({ user }: Props) { return <p>{user.name}</p>; }

react-hooks/immutability

Checks the corresponding code constraint. Upstream description: Validates against mutating props, state, and other values that are immutable

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Example type: Direct code example for a third-party preset rule

Incorrect:

function User({ user }: Props) { user.name = 'Fast'; return <p>{user.name}</p>; }

Correct:

function User({ user }: Props) { const nextUser = { ...user, name: 'Fast' }; return <p>{nextUser.name}</p>; }

react-hooks/incompatible-library

Checks the corresponding code constraint. Upstream description: Validates against usage of libraries which are incompatible with memoization (manual or automatic)

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Example type: Direct code example for a third-party preset rule

Incorrect:

import { useForm } from 'react-hook-form';
function Form() { const form = useForm(); const name = form.watch('name'); return <p>{name}</p>; }

Correct:

import { useWatch } from 'react-hook-form';
function Form() { const name = useWatch({ name: 'name' }); return <p>{name}</p>; }

react-hooks/preserve-manual-memoization

Checks the corresponding code constraint. Upstream description: Validates that existing manual memoized is preserved by the compiler. React Compiler will only compile components and hooks if its inference matches or exceeds the existing manual memoization

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Example type: Direct code example for a third-party preset rule

Incorrect:

import { useCallback } from 'react';
function User({ user }: Props) { const open = useCallback(() => { if (user?.id) console.log(user.id); }, [user?.id]); return <button onClick={open}>Open</button>; }

Correct:

import { useCallback } from 'react';
function User({ user }: Props) { const id = user?.id; const open = useCallback(() => { if (id) console.log(id); }, [id]); return <button onClick={open}>Open</button>; }

react-hooks/purity

Checks the corresponding code constraint. Upstream description: Validates that components/hooks are pure by checking that they do not call known-impure functions

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Example type: Direct code example for a third-party preset rule

Incorrect:

function Token() { const value = Math.random(); return <span>{value}</span>; }

Correct:

function Token() { const [value] = useState(() => Math.random()); return <span>{value}</span>; }

react-hooks/refs

Checks the corresponding code constraint. Upstream description: Validates correct usage of refs, not reading/writing during render. See the "pitfalls" section in useRef() usage

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Example type: Direct code example for a third-party preset rule

Incorrect:

function Input() { const inputRef = useRef<HTMLInputElement>(null); return <span>{inputRef.current?.value}</span>; }

Correct:

function Input() { const inputRef = useRef<HTMLInputElement>(null); return <input ref={inputRef} />; }

react-hooks/rules-of-hooks

Checks the corresponding code constraint. Upstream description: enforces the Rules of Hooks

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Example type: Direct code example for a third-party preset rule

Incorrect:

function UserCard({ ready }: Props) { if (ready) { useEffect(load, []); } return <div />; }

Correct:

function UserCard({ ready }: Props) { useEffect(() => { if (ready) load(); }, [ready]); return <div />; }

react-hooks/set-state-in-effect

Checks the corresponding code constraint. Upstream description: Validates against calling setState synchronously in an effect. This can indicate non-local derived data, a derived event pattern, or improper external data synchronization.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Example type: Direct code example for a third-party preset rule

Incorrect:

function User({ name }: Props) { const [label, setLabel] = useState(''); useEffect(() => { setLabel(name.trim()); }, [name]); return <p>{label}</p>; }

Correct:

function User({ name }: Props) { const label = name.trim(); return <p>{label}</p>; }

react-hooks/set-state-in-render

Checks the corresponding code constraint. Upstream description: Validates against setting state during render, which can trigger additional renders and potential infinite render loops

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Example type: Direct code example for a third-party preset rule

Incorrect:

function Counter() { const [count, setCount] = useState(0); setCount(count + 1); return <span>{count}</span>; }

Correct:

function Counter() { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; }

react-hooks/static-components

Checks the corresponding code constraint. Upstream description: Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Example type: Direct code example for a third-party preset rule

Incorrect:

function Page() { function Header() { return <h1>Title</h1>; } return <Header />; }

Correct:

function Header() { return <h1>Title</h1>; }
function Page() { return <Header />; }

react-hooks/unsupported-syntax

Checks the corresponding code constraint. Upstream description: Validates against syntax that we do not plan to support in React Compiler

• Effective severity and scope: warn: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Example type: Direct code example for a third-party preset rule

Incorrect:

function Page({ source }: Props) { return <div>{eval(source)}</div>; }

Correct:

function Page({ source }: Props) { return <div>{JSON.parse(source)}</div>; }

react-hooks/use-memo

Checks the corresponding code constraint. Upstream description: Validates usage of the useMemo() hook against common mistakes. See useMemo() docs for more information.

• Effective severity and scope: error: React JSX, React TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Example type: Direct code example for a third-party preset rule

Incorrect:

function User({ name }: Props) { const label = useMemo(async () => name.trim(), [name]); return <p>{label}</p>; }

Correct:

function User({ name }: Props) { const label = useMemo(() => name.trim(), [name]); return <p>{label}</p>; }