React Best Practices
Global State
Global state is tricky, often unnessecery. If you're writing a standard, content driven website, you probably shouldn't be using global state at all (if you're using content in multiple places, maybe consider using markdown). Depending on the scale and complexity of your project, you may want to consider several different options.
Redux
Redux is the one-stop shop for global state management. It is a large package with a lot of boilerplate that handles everything you could ever need from global state. It has a large ecosytem of add-ons and plugins and even has it's own Chrome extension. Redux works great for large apps.
| Pros | Cons |
|---|---|
| 👍 Works well on large scale apps | 👎 Lots of boilerplate |
| 👍 Access previous states | 👎 Lots of jargon |
| 👍 Easy to debug (Chrome extension) | 👎 Large library |
| 👍 Large ecosystem of add-ons |
Unstated
Unstated is a tiny, 200 bytes super high performance global state solution. It's super simple to learn and contains no boilerplate, but is very minimalistic. Unstated is great for small apps.
| Pros | Cons |
|---|---|
| 👍 40x smaller than Redux | 👎 Less features than Redux |
| 👍 Easy to learn api | 👎 No Chrome extension |
| 👍 No boilerplate | 👎 Hooks makes it slightly redundant |
| 👍 Easy to add to existing apps |
Zustand
Zustand is a very small, 650 bytes unopinionated global state solution. It uses hooks for stores and requires no boilerplate code. While not as feature-packed as redux, it does offer many impressive features for it's size including memoization, async actions, transient updates and middleware. Zustand is a great solution for medium sized apps.
| Pros | Cons |
|---|---|
| 👍 No boilerplate | 👎 Bigger than Unstated, but less features than Redux |
| 👍 Hook based stores | |
| 👍 Middleware support | |
| 👍 Async actions |