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