Managing global state in React means managing data that needs to be accessible throughout different parts of your application, such as user authentication info, theme settings, or a shopping cart. React provides several ways to handle global state, and I’ll explain a few beginner-friendly approaches.

1. Using React’s Built-in State (Props and Context)

For simple use cases where you need to share state across components, React’s built-in state management (useState and useContext) can be enough.

Using useState and Props

When components are related (e.g., parent-child), you can pass the state from a parent component down to child components through props.

Example:

import React, { useState } from 'react';

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

return (
<div>
<h1>Counter: {count}</h1>
<ChildComponent count={count} setCount={setCount} />
</div>
);
}

function ChildComponent({ count, setCount }) {
return (
<div>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
}

export default App;

In this example:

• useState is used to manage the count state.
• The count state and the setCount function are passed down as props to the ChildComponent.
• When the button in ChildComponent is clicked, it updates the state in the parent App component.

Using useContext for Sharing State Across Components

If you need to share state between components that are not directly related (e.g., sibling components or deeply nested components), you can use React Context.

• React Context allows you to create a global state that any component in the tree can access.

Example

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

// Create a context for our state
const CountContext = createContext();

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

return (
<CountContext.Provider value={{ count, setCount }}>
<div>
<h1>Global Counter: {count}</h1>
<ChildComponent />
</div>
</CountContext.Provider>
);
}

function ChildComponent() {
const { count, setCount } = useContext(CountContext);

return (
<div>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
}

export default App;

In this example:

• A context (CountContext) is created to store the global state.
• CountContext.Provider is used to wrap the components that need access to the global state (here, the entire App).
• useContext(CountContext) is used inside any component (like ChildComponent) to access the global state (count) and the function to update it (setCount).

2. Using External Libraries (Redux or Zustand)

When your application grows larger and the state management becomes more complex (for example, if you have many components that need to access or update the state), you might need more advanced state management tools like Redux or Zustand.

Using Redux (A More Advanced Approach)

Redux is a widely-used library for managing global state, but it can be complex for beginners. Here’s a quick overview:

• Store: The central place where all the state is kept.
• Actions: Objects that describe what happened and may carry some data.
• Reducers: Functions that describe how the state changes based on actions.
• Dispatch: The function used to send actions to the store to update the state.

Here’s a very simplified example of Redux:

1. Install Redux and React-Redux:

   npm install redux react-redux


2. Create a Redux Store:

   import { createStore } from 'redux';
   
   const initialState = { count: 0 };
   
   function countReducer(state = initialState, action) {
   switch (action.type) {
   case 'INCREMENT':
   return { count: state.count + 1 };
   default:
   return state;
   }
   }
   
   const store = createStore(countReducer);

3. Connect Redux to React:

   import React from 'react';
   import { Provider, useDispatch, useSelector } from 'react-redux';
   import { store } from './store';
   
   function App() {
   return (
   <Provider store={store}>
   <Counter />
   </Provider>
   );
   }
   
   function Counter() {
   const count = useSelector(state => state.count);
   const dispatch = useDispatch();
   
   return (
   <div>
   <h1>Count: {count}</h1>
   <button onClick={() => dispatch({ type: 'INCREMENT' })}>
   Increment
   </button>
   </div>
   );
   }
   
   export default App;

In this example:

• The state (count) is managed in the Redux store.
• useSelector is used to access the state, and useDispatch is used to dispatch actions that update the state.

3. When to Use Context vs Redux

• Use React Context when:

  • Your app’s state is simple.
  • You don’t need to track complex or nested state.
  • Your app isn’t too big, and performance is not an issue.

• Use Redux when:

  • Your app has complex state that needs to be shared across many components.
  • You need more control over how the state is updated and want more advanced features (like middleware).
  • You have a large-scale application with many actions and state transitions.

Summary:

• Props and useState: Best for simple, local state management.
• React Context: Good for simple global state when you need to pass state to distant components.
• Redux: Used for larger applications with complex state that needs to be shared and managed across many components.