Thinking in React
Step 1: Break The UI Into A Component Hierarchy
Step 2: Build A Static Version in React
passing data from parent to child with props
don’t use state at all to build this static version
build top-down or bottom-up
Step 3: Identify The Minimal Representation Of UI State
Think of all of the pieces of data in our example application
go through each one and figure out which one is state
- Is it passed in from a parent via props? If so, it probably isn’t state
- Does it remain unchanged over time? If so, it probably isn’t state
- Can you compute it based on any other state or props in your component? If so, it isn’t state
Step 4: Identify Where Your State Should Live
For each piece of state in your application
- Identify every component that renders something based on that state
- Find a common owner component (a single component above all the components that need the state in the hierarchy)
- Either the common owner or another component higher up in the hierarchy should own the state
Step 5: Add Inverse Data Flow
pass the state change functions to the components deep in the hierarchy which will change the states by events