Many of us are familiar with the longstanding association of Redux with React applications. There have been misconceptions suggesting that a thorough understanding of Redux is essential for developing React applications. However, what if I were to assert that Redux is no longer a prerequisite?
Let's pause for a moment and examine the issue that Redux addresses.
What is the problem that Redux addresses?
Renowned for its widespread adoption, Redux is a state management library that furnishes external storage to uphold the state of a React application.
According to a survey at https://2022.stateofjs.com/en-US/opinions/#top_js_pain_points, more than 43% of developers indicated that state management is one of the top three challenges.
The Redux store serves as the definitive source of truth, encompassing the complete current state of the entire application.
Redux effectively addressed state management challenges in extensive React applications. However, teams frequently implemented Redux prematurely, resulting in unnecessarily bloated applications.
Is Redux still needed?
Looking ahead to the present day, the React ecosystem has expanded significantly, prompting the question: Is Redux still a necessity? In most instances, the answer is: No!
You are no longer obligated to turn to Redux as the default method for handling state in your React applications. Instead, there are alternative options worth considering.
In the current landscape, various approaches to state management exist before resorting to external libraries like Redux. Here are some steps I follow when managing state within a React application.
1. Local state of React component
React can be employed independently without relying on external libraries. In many cases, you can utilise the built-in useState hook. For tasks such as form completion, button clicks, and UI interactions on your page, there's no necessity for a state management library.
By employing the useState hook, you can manage the state locally. As a general guideline, consider using local state in React as your primary option!
2. Pass state as props
Having initiated with a local state, you may encounter scenarios where child components require access to this state. In such cases, prop-drilling becomes relevant. You can effortlessly transmit the state to child components by passing it down as props when needed.
Recommended by LinkedIn
While effective for straightforward use-cases, prop-drilling can become cumbersome as your application expands. Passing props through a chain of components may lead to code that is more challenging to read and maintain
3. React Context
React Context is crafted for the purpose of sharing data globally within a tree of React components. It proves useful when certain parts of your application state need to be accessible throughout the entire component tree.
Examples of such global data include user information, theme details, and more. React Context excels in storing and managing this type of global data, enabling you to sidestep the need to pass props through multiple layers of components.
The Context API is relatively straightforward. Initially, you create a state context using the createContext function, which returns a provider and a consumer. The provider envelops the component tree where you anticipate the children to consume the state..
Within the children components, accessing the state is now achievable using the useContext hook. Simple enough!
It's important to note that Context should not be employed indiscriminately; it should be used only when genuinely necessary.
In contrast to Redux, the Context API is more user-friendly, less intricate, and comes prepackaged!
4. React query
Thus far, we've explored various methods for handling an application's state using just React, including local state, prop drilling, and context.
Introducing React Query, a library designed to streamline data fetching. Unlike Redux, which is a client-state library, React Query operates as a server-state library, overseeing asynchronous operations between your server and client.
While Redux deals with client-state, React Query proves helpful by eliminating the boilerplate code and associated wiring traditionally required to manage cache data in your client-state. Instead, it accomplishes this task with just a few lines of code.
Upon incorporating React Query and migrating asynchronous code to it, managing the remaining client state within the application becomes more straightforward, often eliminating the need for additional solutions like Redux.
An illustrative example of React Query in action is provided below:
