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 🤔

I am not sure if the last two row condition is correct, I tried like this:

{isFancy ? ( <Counter isFancy={true} /> ) : ( <><Counter isFancy={false} /></> )}

according to the docs they should preserve state, but it is not

@asifurrahaman754 you can try this:

return (
    isFancy ? (
      <Counter isFancy={true} />
    ) : (
      <>
        <Counter isFancy={false} />
      </>
    )
  );