react_state_preservation_behavior.md

Render 1	Render 2	State Preserved?
<>...</>	<>{[...]}</>	yes (in any level)
<><>...</></>	<>...</>	no
[...]	[[...]]	no
[<>...</>]*	[...]	no
[<>...</>]*	<>...</>	no
[<>...</>]*	<>[...]</>	no
[<>...</>]*	[[...]]	yes
[<>...</>]*	<><>...</></>	yes
<>{[...]}</>	<><>...</></>	no
<>{[...]}</>	[[...]]	no
<><>...</></>	[[...]]	yes (only when nested two levels from top)
<><>...</></>	<><>...</></>	yes
[[...]]	[[...]]	yes
[...]	<>...</>	yes (top level only)
...	<>...</>	yes (top level only)
...	[...]	yes (top level only)

• Render warns since the fragment is unkeyed. We'll treat it as undefined behavior.

Note: The state preservation behavior is commutative of the renders; It doesn't matter whether render 1 or 2 happens first, the state preservation behavior should be the same.

I created a few permutations of different ways of using children, array, and fragment syntax in React (not mutually exclusive), trying to understand the desired behavior a bit better.

Interesting 🤔