State Management in React – Hooks, Context API and Redux

State management is a critical concept when working with React. React components can hold local state, but as applications grow, managing state across multiple components can become complex. To help manage this complexity, React provides several tools: Hooks, Context API, and Redux.

Here are some features of State Management:

• Local State (useState): Manage data within a single component.
• Global State (Context API): Share state across multiple components.
• Centralised State (Redux): Manage complex state with a global store for large apps.
• Immutability: State cannot be directly mutated; it must be updated via functions.
• Re-renders: React re-renders components when state changes.

State Management with Hooks

React Hooks were introduced in version 16.8 and provide a way to manage state and lifecycle methods in functional components. Before hooks, class components were used for managing state, but now, functional components with hooks have become the standard for most React apps.

1. useState Hook

The useState Hook is the most commonly used hook for local state management in functional components. It allows a component to have its state that can be modified using a setter function.

Syntax

const [state, setState] = useState(<default value>);

In the above syntax

• useState(<default value>): A React hook to manage state in functional components.
• <default value>: Initial value of the state (e.g., a number, string).
• [state, setState]: State holds the current value of the state, and setState is a function to update the state.

Now let's understand this with the help of an example

import React, { useState } from 'react';

function NameInput() {
    const [name, setName] = useState('');

    const handleInputChange = (event) => {
        setName(event.target.value);
    };

    return (
        <div>
            <h1>Enter Your Name</h1>
            <input
                type="text"
                value={name}
                onChange={handleInputChange}
                placeholder="Type your name"
            />
            <p>Hello, {name ? name : 'Stranger'}!</p>
        </div>
    );
}

export default NameInput;

In this example

• useState('') initializes the name state as an empty string.
• handleInputChange updates the name state whenever the user types in the input field.
• The input field uses value={name} to display the current name, and onChange={handleInputChange} to update the state.
• The component displays a greeting: "Hello, {name}", defaulting to "Stranger" if no name is typed.

2. useReducer

useReducer hook is the better alternative to the useState hook and is generally more preferred over the useState hook when you have complex state-building logic or when the next state value depends upon its previous value or when the components need to be optimized.

Syntax:

const [state, dispatch] = useReducer(reducer, initialArgs, init);

• useReducer: Manages complex state logic.
• reducer: A function that updates state based on actions.
• initialArgs: Initial state value.
• init (optional): Function to lazily initialize state.
• state: Current state.
• dispatch: Function to send actions to update the state

State Mangement with Context API

The Context API is a feature built into React that allows for global state management. It is useful when we need to share state across many components without having to pass props down through multiple levels of the component tree.

Syntax

const authContext = useContext(initialValue);

Now let's understand this with the help of example:

//auth-context.js

import React from "react";
const authContext = React.createContext({ status: null, login: () => {} });

export default authContext;

//App.js
import React, { useState } from "react";
import Auth from "./Auth";
import AuthContext from "./auth-context";

const App = () => {
    const [authstatus, setauthstatus] = useState(false);
    const login = () => {
        setauthstatus(true);
    };
    return (
        <React.Fragment>
            <AuthContext.Provider value={{ status: authstatus, login: login }}>
                <Auth />
            </AuthContext.Provider>
        </React.Fragment>
    );
};
export default App;

//Auth.js
import React, { useContext } from "react";
import AuthContext from "./auth-context";

const Auth = () => {
    const auth = useContext(AuthContext);
    console.log(auth.status);
    return (
        <div>
            <h1>Are you authenticated?</h1>
            {auth.status ? <p>Yes you are</p> : <p>Nopes</p>}

            <button onClick={auth.login}>Click To Login</button>
        </div>
    );
};
export default Auth;

Output

In this example

• auth-context.js: Creates context with default values (status, login).
• App.js: Uses useState to manage authstatus and provides it through AuthContext.Provider.
• Auth.js: Uses useContext to access authstatus and login, showing login status and a button to trigger login

For more details follow this article => ReactJS useContext Hook

State Management With Redux

Redux is a state managing library used in JavaScript apps. It simply manages the state of your application or in other words, it is used to manage the data of the application. It is used with a library like React. It makes easier to manage state and data. As the complexity of our application increases.

How Redux Works

• Store: The central place where all the app’s state is stored.
• Actions: Functions that describe changes to be made to the state.
• Reducers: Functions that handle actions and update the state based on them

Now let's understand this with the help of example

Install dependency to use Redux in your application

npm install redux react-redux

// index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import App from "./App";

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
);

// App.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

function App() {
    const count = useSelector(state => state.count);
    const dispatch = useDispatch();

    return (
        <div>
            <h1>Counter: {count}</h1>
            <button onClick={() => dispatch(increment())}>Increment</button>
            <button onClick={() => dispatch(decrement())}>Decrement</button>
        </div>
    );
}

export default App;

// store.js

import { createStore } from 'redux';
import counterReducer from './reducers';

const store = createStore(counterReducer);

export default store;

// reducers.js

const counterReducer = (state = { count: 0 }, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return {
                count: state.count + 1
            };
        case 'DECREMENT':
            return {
                count: state.count - 1
            };
        default:
            return state;
    }
};

export default counterReducer;

// actions.js

export const increment = () => {
    return {
        type: 'INCREMENT'
    };
};

export const decrement = () => {
    return {
        type: 'DECREMENT'
    };
};

Output

In this example

• index.js: Renders App with Redux Provider to connect the store.
• App.js: Uses useSelector to access count and useDispatch to trigger increment and decrement actions.
• store.js: Creates the Redux store with counterReducer.
• reducers.js: Updates state based on INCREMENT and DECREMENT actions.
• actions.js: Defines increment and decrement action creators.

For more details follow this article => Introduction to React-Redux

Comparison of Hooks, Context API, and Redux

Below are the comparison between the state management hooks: