Hey folks! I'm diving into a significant task at my new job as a senior frontend developer: I'm being asked to revamp our entire state management strategy. Currently, the app relies heavily on React's Context API with around seven contexts enveloping the main component, which isn't great for performance. I'm pondering whether to go with Redux Toolkit (which I'm already comfortable using) or to try out Zustand. My main fear with Redux Toolkit is its potential bloat, while Zustand appears to take a more minimalistic approach. I've noticed that Zustand can integrate with the Redux DevTools for state debugging and time travel, but I'm curious—how reliable is that? Additionally, do you think I should create multiple Zustand stores or utilize a single store with slices? And what strategies do you suggest for managing contexts that consist of over 3,000 lines of code? Any insights would be fantastic!
1 Answer
Absolutely, Zustand is reliable! You can choose to set it up either way—multiple stores or single stores with slices. Given that you have a context with around 3,000 lines of code, it might be wise to break that down; no code should really be that bloated in one context. Also, what's the app's context? I usually find it beneficial to create smaller, more manageable state segments, especially since most data typically comes from an API. Often, I just use React Query to handle most data and reserve context for specific needs. Don’t feel pressured to stick with a single mainstream library just because it's popular; aim for what fits your application's structure and needs.
What do you think about splitting that context first and then transitioning to Zustand? It seems like a plan to simplify the migration!