Quick React Guide
Posted on October 2, 2021
Tags: javascript
1 Where to put useState
stateDiagram-v2
s1 : Building App
s1if: used by \nonly this component
s2if: used by \nonly one child
s3 : colocate state
s4if : used by\nsibling or parent
s2 : lift state
leave: leave it there
s5if: prop drilling issue?
s6if: can child function outside parent?
s7 : component composition
s8 : move state to context provider
[*] --> s1
s1 --> s1if
s1if --> s2if : no
s1if --> leave: yes
s2if --> s3 : yes
s3 --> s1if
s2if --> s4if: no
s4if --> leave: no
s4if --> s2 : yes
s2 --> s1if
leave --> s5if
s5if --> done : no
s5if --> s6if : yes
s6if --> s7 : no
s6if --> s8 : yes