Why You Don’t Need Redux Anymore?
Redux has been tied with React projects for many years now. I even see job postings for React, that require Redux experience and knowledge like the one shown below:
The job posting requires significant experience using React.js / Redux. Well they are not the same, and why would someone need significant experience with Redux to get this job! I don’t get it, but that’s not in the scope of this blog post!
The point is that the industry is treating Redux as if it is synonymous with React, and you need to know Redux to code React applications. This is absolutely not true.
So let’s step back and revisit what Redux is and what problems it solves.
What problem does Redux solve?
From the State of JS Survey of 2022, you can see below that over 43% of respondents have answered that State Management is among the top 3 of the JavaScript pain points that they struggle with.
Libraries like Redux were used to relieve this specific pain point.
The react-redux is a state management library, that is extremely popular. It provides an external storage to store your entire application’s state.
What is state?
State is data that can change.
React components read data from this store, dispatch actions to the store and can also update the store.
The Redux store is the source of truth that contains the entire application’s current state.
Redux solved state management concerns in large React applications. But often teams have used Redux before they needed it. This causes applications to be bloated.
Do you still need Redux?
Now fast forward several years, the React ecosystem has grown so much, and the question arises, do we still need Redux? The answer for most cases is: No!
You don’t have to go to Redux as the default way to manage your React application’s state anymore, and there are other alternatives that you can consider instead.
Today, there are different approaches to state management, before you reach out to external state management libraries like Redux. Here are some steps I take while managing state within a React app.
1. Start with local state in React!
You can use React without any external libraries, and simply use the state hook that comes out of the box most of the times. Let’s say you want to fill out a form, click some buttons, interact with the UI on your page, etc.. You do not need a state management library to manage all of this.
You would handle the state locally, by simply using the useState hook. Rule of thumb is always use the local state in React as your first option!
2. Pass down props
Now you started with local state, but there are child components who need this state. What would you do? This is where prop-drilling comes in play. You can simply pass down state via props if a child component needs it.
In the above example, we have two components. The Counter and CounterInfo. CounterInfo receives the count as a prop from the parent component Counter. This is a common pattern you can use in React to pass props from a parent to child or down the components. Props cannot be changed, and can be passed down to components that need it.
This works perfectly fine for simple use-cases. But as your application grows, prop-drilling could be cumbersome if you pass down props through a chain of components. This could result in code that is harder to read and manage.
3. React Context
React Context is designed to share data that is global for a tree of React components. You can use React Context, when there are parts of your application state that needs to be shared with the entire application tree.
For instance user information, theme information, language settings, etc.. are examples global data that is shared across the entire application. React Context works very well to store global data like these. This way you can avoid passing props through multiple layers of components.
Context API is quite simple. First you need to create a state context using the function createContext and it will return a provider and a consumer. The provider wraps the component tree where you expect the children to consume the state. In this example, we have created the blogInfoContext. It’s provider wraps around the necessary components.
And within the children component, you can now access the state using the useContext hook. Simple enough!
You can learn more about using the Context API in detail from my blog post here: Learn the useContext hook in React
Keep in mind, that you don’t want to reach for Context at all times. It needs to be used only when it is truly needed.
In comparison to Redux, the Context API is easier to use, less complex and comes out of the box!
4. React Query
So far we saw how we can manage the application’s state with just React. Using local state, prop drilling and context.
React Query is a library that can be used to manage the data fetching for you. It is a server-state library, that is responsible for managing asynchronous operations between your server and client
Redux is a client-state library and not to be confused with React Query. But where React Query helps is that it replaces the boilerplate code and related wiring used to manage cache data in your client-state and replaces it with just a few lines of code.
For the most part, once you use React Query, and migrate all the async code to it, the remaining client state within the application can be easily managed without the use of something like Redux.
A simple example of React Query in action is shown below:
Other Alternatives
Alternatives to React Query are other libraries with similar functionality such as Vercel’s SWR and Apollo Client. Apollo Client also comes with in-built local state management options that you can consider if you would like to manage state via Apollo.
Resources
Alright folks, that’s a wrap! Hope you enjoyed this article! Here are some resources that will come handy in your journey to learn React:
You can check out my latest course on Next.js 13 on Pluralsight below:
Where can you reach me?
For information on my consulting services visit: adhithiravichandran.com
To stay connected follow me on Twitter: @AdhithiRavi
My courses: https://app.pluralsight.com/profile/author/adhithi-ravichandran
Subscribe to my stories on Medium https://adhithiravi.medium.com/subscribe
Become a medium member: https://medium.com/@adhithiravi/membership
This article was originally published in https://programmingwithmosh.com
