Skip to content

Instantly share code, notes, and snippets.

@clemmy
Last active May 13, 2024 12:25
Show Gist options
  • Save clemmy/b3ef00f9507909429d8aa0d3ee4f986b to your computer and use it in GitHub Desktop.
Save clemmy/b3ef00f9507909429d8aa0d3ee4f986b to your computer and use it in GitHub Desktop.
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.

@clemmy
Copy link
Author

clemmy commented Oct 23, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment