Advanced React Design Patterns

code sandbox

Amr Draz

Creating a Form

state management class

managing your children

Using context API

Higher order component

Render props as slots

Control vs Uncontrolled

Sate Reducer

Lazy and Suspence

useHooks

01 - Separate Logic

refactor code in examples/01 one separating the redundant logic

You should create a Form component 

02 - Manage Children

follow instructions in example/02
have Form pass state and formStateManager to it's children implicitly

Make Filed, Button, and Error into Sub Components

03 - Deeper Children

follow instructions in example/03
Instead of using Children initialize a Context Provider and Consumer passing the Consumer to the children

04 - HigherOrder with Render props pattern