[no-unstable-nested-components] Inline components wrapped in React.memo aren't detected

[zacharyliu]

This test case isn't caught by the lint rule. Note the use of React.memo and not React.useMemo. AFAIK, it is susceptible to reconciliation problems since UnstableNestedFunctionComponent is different on each render:

function ParentComponent() {
  const UnstableNestedFunctionComponent = React.memo(() => {
    return <div />;
  });

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

I'm working on a fix for this but wanted to flag in case I'm missing something.

Also, I wonder if the lint message can be improved to avoid this scenario. I think this happens because a dev sees the lint error, read the message saying to "memoize" the component, and accidentally mixes up React.memo and React.useMemo.

IMO it's still undesirable to use useMemo or useCallback here since the DOM subtree will be wiped if any of the hook dependencies change, so maybe the message shouldn't encourage this. But at the very least maybe we should clarify the message.

[ljharb]

I think improving the message is easy and a good idea; a PR for that would be appreciated.

In this case, the thing that should be done is hoisting the component outside the parent.