React fundamentally changes how we build user interfaces by shifting from imperative to declarative programming. This shift is crucial for managing complex UIs. Let’s explore how React enables this.
Reacting to Input with State
Imperatively manipulating UI gets very complicated
- This is exactly what React solves In React- you just (declarative) declare what you want to show and React figures out how to update the UI
Thinking about UI declaratively
- Identify component’s visual states (e.g. typing, empty, error, success, etc.)
- Determine what triggers those state changes (inputs from humans + computers) 2. Often use event handlers for huma inputs 3. Can draw a flow with arrows between states (ie. “Start typing”, “press submit”, etc.)
- Represent the state with
useState+ refactor- Simple as possible
- Start with state that absolutely must be there
- Make sure you’re only tracking what is essential (ie. combine typing, submitting, success into a single status state) Note: to model state more precisely- can extract it into a reducer
- Connect event handlers to set state