For newer React developers, the decision to use React component state vs. a Redux store can certainly feel a bit confusing. Time is often wasted wavering in indecision - Is it overkill? Is it necessary? Without a clear understanding of the pros and cons of each option, making the wrong decision may quickly lead to even more hours spent troubleshooting a poorly designed data flow in your React components - or worse yet, redevising your application upon realizing that a Redux store is the way to go. Let's try to distinguish which opportunities call for React state, or when a Redux store is in your best interest.
React Component State
React consists of two fundamental types of components. Presentational components are responsible for how your data will appear on the page. In short, these components are merely in charge of how things look. Meanwhile, functional components are responsible for providing the correct data to be displayed. Functional components achieve this by holding state - They accept data as props, which they pass to other components to be used or displayed.
Imagine you’re building an application for dog groomers. You have a presentational component that displays an index of all of your furry clients. Your functional component would be responsible for capturing the state of your client list, which is passed to your presentational component and displayed. If you add a new client to the application, the functional component would need to update its state and pass that along to the presentational component to be displayed. This state flow is unidirectional, it starts with a user action -> updates state -> changes the view to reflect the new state.
Redux Store
Now imagine you’re expanding your dog grooming application to include a weekly schedule and individual pet profiles. This would mean that the data relating to each client now needs to be passed to your original client index component, your new schedule component, and your new profile component. This is the critical point of distinction between when to use React component state or a Redux store. When data must be persisted to numerous components, it’s generally time to implement a Redux store.
The Redux store acts as a centralized location for your data. This makes passing data into your components very straightforward and clear. To dive deeper into this subject, check out Redux functions in the Redux docs (connect, mapStateToProps, etc.). It’s a very clean and powerful way to manage heavily-used and ever-changing state within your React application.
Conclusion
It’s nice to have numerous ways of maintaining state within a React app. For a simple application, using React component state to pass props around is a quick and effective solution. However, once an application begins to grow, passing around props in this manner can quickly become convoluted and difficult to troubleshoot. This is where a Redux store shines - It provides an efficient structure for storing and passing state from one convenient location.
Top comments (0)