Explain the uesReducer and useContext hooks in React

useReducer and useContext Hooks in React

---

1. useReducer Hook

Purpose:

The useReducer hook is an alternative to useState.
It is used when state logic is complex, involves multiple sub-values, or when the next state depends on the previous state.

---

Syntax:

javascriptCopyEditconst [state, dispatch] = useReducer(reducer, initialState);

Part	Description
state	Current state value.
dispatch	Function to send actions to the reducer.
reducer	Function to determine state updates based on actions.
initialState	Initial state value.

---

Reducer Function:

javascriptCopyEditfunction reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

---

Example:

javascriptCopyEditimport { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

---

Key Points:

Feature	Description
Used for Complex State	Best for state involving multiple sub-values or complex transitions.
Action-based Updates	Uses actions to update state.
Predictable State Updates	State changes follow a strict logic defined in reducer.
Similar to Redux (but local)	Similar in concept to Redux reducers, but local to the component.

---

---

2. useContext Hook

Purpose:

The useContext hook is used to consume values from a React Context.

Context provides a way to pass data through the component tree without having to pass props manually at every level.

---

Syntax:

javascriptCopyEditconst value = useContext(MyContext);

Part	Description
MyContext	Context object created using React.createContext().
value	Current value of the context.

---

Example:

javascriptCopyEditimport { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function ThemedComponent() {
  const theme = useContext(ThemeContext);

  return <p>Current Theme: {theme}</p>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
}

---

Key Points:

Feature	Description
Avoids Prop Drilling	Helps avoid passing props down through multiple levels.
Global-like State	Useful for global values like themes, auth status, etc.
Simplifies Consumption	No need for Context.Consumer → useContext is simpler.
Works with Provider	Must wrap components with Context.Provider to provide the value.

---

Combining useReducer and useContext

Often, useReducer is used together with useContext to create a global state management solution similar to Redux.

Example:

javascriptCopyEditimport { createContext, useReducer, useContext } from 'react';

// 1. Create Context
const CounterContext = createContext();

// 2. Reducer Function
function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// 3. Provider Component
function CounterProvider({ children }) {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  );
}

// 4. Consumer Component
function CounterDisplay() {
  const { state } = useContext(CounterContext);
  return <p>Count: {state.count}</p>;
}

function CounterButtons() {
  const { dispatch } = useContext(CounterContext);
  return (
    <>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

// 5. App Component
function App() {
  return (
    <CounterProvider>
      <CounterDisplay />
      <CounterButtons />
    </CounterProvider>
  );
}

---

Key Differences:

Hook	Purpose	Common Use Case
useReducer	Manages complex state logic	When state has multiple sub-values or complex updates.
useContext	Accesses shared data across components	When passing data deeply through component trees (e.g., themes, auth).

---

When to Use Which:

Situation	Hook to Use
Simple State (e.g., boolean, counter)	useState
Complex State (e.g., object, multiple values)	useReducer
Share State Across Components	useContext
Global State with Complex Logic	useReducer + useContext

---

Summary:

Hook	Purpose	Common Pairing
useReducer	Manages complex state logic	Often used with useContext
useContext	Accesses context values without prop drilling	Can pair with useReducer for global state

---

Let me know if you need more help with these hooks or React concepts! 🚀😊