Nested components are defined in an enclosing one and can be simple functions or arrow expressions. React recreates them systematically during the render pass because it doesn't know they haven't changed. This hurts performance as the components are recreated too many times. However, this can also hide surprising bugs where the state of the nested components is lost between renders. Trying to use `useCallback` hooks for child components is also discouraged. You should actually refactor this code to define a component on its own, passing props if needed.

== Noncompliant Code Example

[source,javascript]
----
function Component() {
  function UnstableNestedComponent() {
    return <div />;
  }

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

[source,javascript]
----
function SomeComponent({ footer: Footer }) {
  return (
    <div>
      <Footer />
    </div>
  );
}

function Component() {
  return (
    <div>
      <SomeComponent footer={ () => <div /> } /> { /* footer is a component nested inside 'Component' */ }
    </div>
  );
}
----

[source,javascript]
----
class Component extends React.Component {
  render() {
    function UnstableNestedComponent() {
      return <div />;
    }

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

== Compliant Solution

[source,javascript]
----
function OutsideDefinedComponent(props) {
  return <div />;
}

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

[source,javascript]
----
function Component() {
  return <SomeComponent footer={ <div /> } />;
}
----

[source,javascript]
----
class Component extends React.Component {
  render() {
    return (
      <div>
        <SomeComponent />
      </div>
    );
  }
}
----

== See

* https://reactjs.org/docs/reconciliation.html#elements-of-different-types[Elements Of Different Types] - React documentation
