1. What is State Management?

State management involves handling and maintaining the state of your application, ensuring that changes in state are reflected in the UI and other parts of the application.

• Local State: Managed within individual components using useState.
• Global State: Shared across multiple components, often managed using libraries like Context API or Redux.

2. Managing Local State

Local state is handled using the useState hook. It is ideal for managing component-specific data.

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    const increment = () => setCount(count + 1);
    const decrement = () => setCount(count - 1);

    return (
        

            
Count: {count}
            Increment
            Decrement
        
    );
}

export default Counter;
                

Explanation: The state count is managed locally within the Counter component.

3. Managing Global State with Context API

The Context API is suitable for sharing global state across components without prop drilling.

import React, { createContext, useContext, useState } from 'react';

const AppContext = createContext();

function AppProvider({ children }) {
    const [theme, setTheme] = useState('light');

    return (
        
            {children}
        
    );
}

function ThemeToggler() {
    const { theme, setTheme } = useContext(AppContext);

    return (
         setTheme(theme === 'light' ? 'dark' : 'light')}>
            Toggle to {theme === 'light' ? 'dark' : 'light'} theme
        
    );
}

export { AppProvider, ThemeToggler };
                

Explanation: The ThemeToggler component toggles the global theme state using the Context API.

4. Advanced State Management with Redux

Redux is a powerful library for managing complex global state. It uses actions, reducers, and a central store to manage application state predictably.

// Install Redux and React-Redux
npm install redux react-redux

// Redux Setup
import { createStore } from 'redux';

const initialState = { count: 0 };

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

const store = createStore(counterReducer);

export default store;
                

Explanation: Redux centralizes state management with a predictable flow using reducers and actions.

5. Best Practices for State Management

• Keep local state minimal and use global state for shared data.
• Use Context API for lightweight global state needs.
• Adopt Redux or similar libraries for large-scale applications with complex state logic.
• Organize state logically and avoid deeply nested state structures.