← Back to rules

react/no-unstable-nested-components Suspicious

What it does

Disallows defining React components inside other components.

Why is this bad?

React compares element types by reference during reconciliation. A component defined during render gets a new identity on every render, so React remounts the entire nested subtree and destroys its DOM nodes and state.

Examples

Examples of incorrect code for this rule:

function Component() {
  function UnstableNestedComponent() {
    return <div />;
  }

  return <UnstableNestedComponent />;
}

Examples of correct code for this rule:

function StableComponent() {
  return <div />;
}

function Component() {
  return <StableComponent />;
}

Configuration

This rule accepts a configuration object with the following properties:

allowAsProps

type: boolean

default: false

Allow component definitions in props.

customValidators

type: string[]

default: []

Optional custom propTypes validators accepted for eslint-plugin-react compatibility.

propNamePattern

type: string

default: "render*"

Glob pattern for render-prop names that may receive inline component definitions.

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-unstable-nested-components": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/no-unstable-nested-components": "error",
  },
});

CLI

oxlint --deny react/no-unstable-nested-components --react-plugin

Version

This rule was added in vnext.

References

• Rule Source
• Open rule in Oxc Playground