Redux is a state management tool and can be used with React application for managing states. Getting started with React can be overwhelming because we see a lot of state management tools are available on the internet today. Before getting started let’s understand what is state management.

State management & its need

In simple words, we can say a state is a JavaScript object which represents data associated with the component and it can change depending on the user’s action. Now, while writing the React application we might run into a situation where we need to store the data on the client-side and here we need states & its management.

Let’s come to the point, Is Redux necessary for React & when to use it?

No, a Redux is not necessary for react application. Managing application states especially in React can be done using its own state management systems like React hooks and Context. We can also use external tools like Redux, Flux, etc. Below factors can be considered whether you should stick to React hooks, Context, or go for Redux, Flux.

1. App size

If the application size is small like 10 to 15 pages/screens and have fewer data to store and handle at the client-side then React hooks / Context will be enough, but if the application size is bigger like 100+ pages/screens and have a lot of data to store at client-side then Redux/Flux can be used.

2. App Complexity

If the application has so many parent-child components and uses React hooks / Context then it might become difficult for a developer to understand the data flow between the components, so in such cases, Redux/Flux can be used.

Let’s see the examples of React hooks and Context

React hooks

import React, { useState } from 'react';

function Foo() {
  // Declare a new state variable, which we will call "count"  const [count, incrementCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => incrementCount(count + 1)}>
        Increment count
      </button>
    </div>
  );
}

Context

// Context lets us pass a value deep into the component tree
// without explicitly threading it through every component.
// Create a context for the current locale (with "en" as the default).const LocaleContext = React.createContext('en') // englishclass App extends React.Component {
    render() {
        // Use a Provider to pass the current locale to the tree below.
        // Any component can read it, no matter how deep it is.
        // In this example, we're passing "mr" (marathi) as the current value.
        return (
            <LocaleContext.Provider value="mr">
                <Toolbar />
            </LocaleContext.Provider>
        )
    }
}// A component in the middle doesn't have to
// pass the locale down explicitly anymore.function Toolbar() {
    return (
        <div>
            <LocaleButton />
        </div>
    )
}class LocaleButton extends React.Component {
    // Assign a contextType to read the current locale context.
    // React will find the closest locale Provider above and use its value.
    // In this example, the current locale is "mr".    static contextType = LocaleContext
    render() {
        return <Button locale={this.context} />
    }
}

Conclusion

We have seen that Redux is not necessary for React application and React’s own state management systems can be used depending on size and complexity.

However, Redux is more powerful than React’s own state management systems and can be used if size and complexity are large.

Check my other blog on 5 Simple Ways To Get Started With React