no-unstable-nested-components.md

Disallow creating unstable components inside components (react/no-unstable-nested-components)

Creating components inside components (nested components) will cause React to throw away the state of those nested components on each re-render of their parent.

React reconciliation performs element type comparison with reference equality. The reference to the same element changes on each re-render when defining components inside the render block. This leads to complete recreation of the current node and all its children. As a result the virtual DOM has to do extra unnecessary work and possible bugs are introduced.

Rule Details

The following patterns are considered warnings:

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

  return (
    <div>
      <UnstableNestedComponent />
    </div>
  );
}

function SomeComponent({ footer: Footer }) {
  return (
    <div>
      <Footer />
    </div>
  );
}

function Component() {
  return (
    <div>
      <SomeComponent footer={() => <div />} />
    </div>
  );
}

class Component extends React.Component {
  render() {
    function UnstableNestedComponent() {
      return <div />;
    }

    return (
      <div>
        <UnstableNestedComponent />
      </div>
    );
  }
}

The following patterns are not considered warnings:

function OutsideDefinedComponent(props) {
  return <div />;
}

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

function Component() {
  return <SomeComponent footer={<div />} />;
}

⚠️ WARNING ⚠️:

Creating nested but memoized components is currently not detected by this rule but should also be avoided. If the useCallback or useMemo hook has no dependency, you can safely move the component definition out of the render function. If the hook does have dependencies, you should refactor the code so that you're able to move the component definition out of the render function. If you want React to throw away the state of the nested component, use a key instead.

function Component() {
  // No ESLint warning but `MemoizedNestedComponent` should be moved outside of `Component`.
  const MemoizedNestedComponent = React.useCallback(() => <div />, []);

  return (
    <div>
      <MemoizedNestedComponent />
    </div>
  );
}

By default component creation is allowed inside component props only if prop name starts with render. See allowAsProps option for disabling this limitation completely.

function SomeComponent(props) {
  return <div>{props.renderFooter()}</div>;
}

function Component() {
  return (
    <div>
      <SomeComponent renderFooter={() => <div />} />
    </div>
  );
}

Rule Options

...
"react/no-unstable-nested-components": [
  "off" | "warn" | "error",
  {
    "allowAsProps": true | false,
    "customValidators": [] /* optional array of validators used for propTypes validation */
    "propNamePattern": string
  }
]
...

You can allow component creation inside component props by setting allowAsProps option to true. When using this option make sure you are calling the props in the receiving component and not using them as elements.

The following patterns are not considered warnings:

function SomeComponent(props) {
  return <div>{props.footer()}</div>;
}

function Component() {
  return (
    <div>
      <SomeComponent footer={() => <div />} />
    </div>
  );
}

You can allow other render prop naming conventions by setting the propNamePattern option. By default this option is "render*".

For example, if propNamePattern is set to "*Renderer" the following pattern is not considered warnings:

<Table
  rowRenderer={(rowData) => <Row data={rowData} />}
/>

When Not To Use It

If you are not interested in preventing bugs related to re-creation of the nested components or do not care about optimization of virtual DOM.