[Docs] no-unstable-nested-components: Warn about memoized, nested components

[eps1lon]

The issue this rule catches is a very common beginner issue that requires understanding of the reconciler. Ideally this issue wouldn't exist but until then let's make sure you start out with a linter that catches these issues.

I adjusted the docs to no longer recommend memoizing nested component and document migration strategies.

/cc @gaearon

[ljharb]

Adding anything to a shared config is a semver-major change, so it's unlikely to land any time soon. I'd love to land the docs updates separately tho!

[eps1lon]

Adding anything to a shared config is a semver-major change, so it's unlikely to land any time soon. I'd love to land the docs updates separately tho!

Gotcha. Let's discuss the docs changes then and I'll file the semver-major separately.

[gaearon]

Should we just add this logic to rules of Hooks?

[codecov]

Codecov Report

Merging #3444 (2575bba) into master (b52e0ca) will increase coverage by 0.00%.
The diff coverage is 100.00%.

❗ Current head 2575bba differs from pull request most recent head f204f11. Consider uploading reports for the commit f204f11 to get more accurate results

@@           Coverage Diff           @@
##           master    #3444   +/-   ##
=======================================
  Coverage   97.62%   97.62%           
=======================================
  Files         123      123           
  Lines        8959     8962    +3     
  Branches     3272     3275    +3     
=======================================
+ Hits         8746     8749    +3     
  Misses        213      213           

Impacted Files	Coverage Δ
lib/rules/no-arrow-function-lifecycle.js	98.43% <100.00%> (+0.07%)	⬆️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[ljharb]

@gaearon if it's hook-related then it definitely makes sense.

[AriPerkkio]

[possible bugs are introduced](https://codepen.io/ariperkkio/pen/vYLodLB)

I'll update this demo not to include useCallback example at some point.

[AriPerkkio]

If I remember right this is the line that allows memoized nested components:

eslint-plugin-react/lib/rules/no-unstable-nested-components.js

Lines 435 to 436 in 2575bba

	// Do not mark components declared inside hooks (or falsy '() => null' clean-up methods)
	|| isReturnStatementOfHook(node, context)

This was clearly a mistake in the rule's initial design. useCallback etc. don't guarantee the component is actually created just once. And moving the component out of the render block should always be the first step to recommend.