Redux vs local state
When I say local state I mean
useState or reducer/context pattern (even if it’s placed at app root).
If there is a question of whether to use local state vs Redux, I always prefer using Redux. My reasons:
- during app lifetime, there is a higher probability your state will grow and need to connect with more components. Meaning if there is a chance state will need to be global - it will eventually happen. Setting it global upfront makes it easier to scale and avoids potentially expensive refactors.
- Redux has awesome DevTools
- Redux has a big ecosystem of supporting tools like selectors, thunks and React connect that abstract and optimize a lot of common patterns and are actively maintained by community
- Redux has middleware
- In my experience, Redux allows scaling without increasing complexity as long as verbose code is accepted as the tradeoff
Note that many things in Preact/React can be solved using
useState. I’m not advocating to hold ALL of the state in Redux. But there are situations where you need some kind of state to solve a problem and are uncertain about keeping it simple or preemptively prepare for scale.
When to use local state:
- when it’s contained to a single component
- when it’s contained to a few components with clearly separated domain (ie. modal and its sub-components)
- when you need to hold simple values like numbers, strings or booleans with limited usage
- when it solves a problem without creating a new one or increasing complexity