Do we need to provide state and dispatch in separate providers or can we export them from the same provider??

Question

Accepted Answer

Components consuming only won't re-render when the state changes, thus optimizing performance. StateContext provides the state to components that need it. DispatchContext provides the dispatch function to components that need to trigger actions. import React, { createContext, useReducer, useContext } from "react"; // Create separate contexts for state and dispatch const StateContext = createContext(); const DispatchContext = createContext(); // Reducer function to manage state function reducer(state, action) { switch (action.type) { case "increment": return { ...state, count: state.count + 1 }; case "decrement": return { ...state, count: state.count - 1 }; default: throw new Error(`Unknown action type: ${action.type}`); } } // Provider component export function CounterProvider({ children }) { const [state, dispatch] = useReducer(reducer, { count: 0 }); return ( {children} ); } // Custom hooks for consuming the state and dispatch separately export function useCounterState() { const context = useContext(StateContext); if (context === undefined) { throw new Error("useCounterState must be used within a CounterProvider"); } return context; } export function useCounterDispatch() { const context = useContext(DispatchContext); if (context === undefined) { throw new Error("useCounterDispatch must be used within a CounterProvider"); } return context; } // Example Component function Counter() { const { count } = useCounterState(); const dispatch = useCounterDispatch(); return (

Count: {count}

); } // Usage in the App export default function App() { return ( ); }

Do we need to provide state and dispatch in separate providers or can we export them from the same provider??

Do we need to provide state and dispatch in separate providers or can we export them from the same provider??

Scenario Questions

Follow-up Questions