Choosing an approach
🏠The everyday picture
You don't hire a removals lorry to carry one chair across the room, and you don't move house with a shopping bag. Choose the tool for the size of the job.
📘What it really is
A simple decision path for each piece of state:
- Can it be calculated from other state or props? Then it isn't state; calculate it while rendering.
- Should it be in the URL (page, filters, search, selected tab worth sharing)? Use the router.
- Does it come from a server? Use a data-fetching tool.
- Is it used by one component?
useStatethere. - Used by a few nearby components? Lift it to their common parent.
- Used across the app (user, theme)? Context, with a reducer if changes are complex.
-
A large app with lots of shared, fast-changing client state? Consider a store like Zustand or Redux Toolkit.
-
Most apps need only steps 1 to 6.
- With AI: AI sometimes adds Redux or a big store to a small app. Ask what problem it solves that the steps above don't.
🖱️Try it
Apply the decision path to every item in your Lesson 1 list and update the app to match. Remove any state that can be calculated. Write the final decisions in your README under "State".
✅Quick check
fullName is stored in state alongside firstName and lastName. What does the path say?
Show the answer
It can be calculated, so it shouldn't be state.
An AI adds Redux to a three-page app with one shared value. What do you ask?
Show the answer
What problem it solves that Context or lifting state wouldn't; probably none, so keep it simpler.