I'm working on a web application and I'm using the React Context without using the useReducer() hook. This is a simple example of how I'm using the Context in my app:

const [stateValue, setStateValue] = useState("");
const [stateValue1, setStateValue1] = useState("");
const contextValue : MainContext = {
      stateValue: stateValue,
      setStateValue: setStateValue,
      stateValue1: stateValue1,
      setStateValue1: setStateValue1
}

So I pass to my Context Provider the contextValue and every time a child ponent has to change the stateValuex just calls the setStateValuex so that it triggers the re-rendering of the stateValuex inside all the child ponents. What would the pros and cons be on using instead the Context with the useReducer() hook?

I'm working on a web application and I'm using the React Context without using the useReducer() hook. This is a simple example of how I'm using the Context in my app:

const [stateValue, setStateValue] = useState("");
const [stateValue1, setStateValue1] = useState("");
const contextValue : MainContext = {
      stateValue: stateValue,
      setStateValue: setStateValue,
      stateValue1: stateValue1,
      setStateValue1: setStateValue1
}

So I pass to my Context Provider the contextValue and every time a child ponent has to change the stateValuex just calls the setStateValuex so that it triggers the re-rendering of the stateValuex inside all the child ponents. What would the pros and cons be on using instead the Context with the useReducer() hook?

• javascript
• reactjs
• react-hooks
• react-context

Share Follow edited Mar 24, 2021 at 18:11 Hakim Abdelcadir asked Mar 24, 2021 at 18:05 Hakim AbdelcadirHakim Abdelcadir 1,32666 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I'd approach it as two issues: 1) pros/cons of useState vs useReducer 2) pros/cons of props vs context. Then stick those answers together.

useReducer can be useful if you have a plicated state that you want to make sure all your update logic is in one centralized location. useState on the other hand is good for simple state where you don't need that kind of control.

props is the standard way to pass values from one ponent to its child. If you're passing it a short distances, this is the simplest and best approach. context is useful if you need to pass values a long way down the ponent tree. If you have a lot of cases where a ponent receives a prop not for itself, but just so it can forward it to a child, then this may indicate context would be better than props.

const contextValue : MainContext = {
  stateValue: stateValue,
  setStateValue: setStateValue,
  stateValue1: stateValue1,
  setStateValue1: setStateValue1
}

P.S: if your context value is an object, don't forget to memoize it. If you don't, you'll be creating a brand new object every time you render, and that will force any ponents consuming the context to render too

const contextValue: MainContext = useMemo(() => {
  return {
    stateValue: stateValue,
    setStateValue: setStateValue,
    stateValue1: stateValue1,
    setStateValue1: setStateValue1
  }
}, [stateValue, stateValue1])

when you use hooks or custom hooks, the states from them are indivisual. which means suppose you used useReducer in Component A and B. state from useReducer in A, B is totally different whereas if you use contextAPI the state is same.