no-unstable-nested-components.md

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

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

Inferno 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 Inferno.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 Inferno 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`.
By default component creation is allowed inside component props only if prop name starts with `render`. See `allowAsProps` option for disabling this limitation completely.

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

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

Rule Options

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

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>
  );
}

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.