0

I'm following this pattern to try to optimize the component tree rendering however I need the initial state to be passed via props to my provider that looks like this:

const EditorProvider = ({
  children,
  initialState,
}: {
  children: React.ReactNode
  initialState: EditorState
}) => {
  const [state, dispatch] = React.useReducer(reducer, initialState)

  return (
    <StateContext.Provider value={state}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </StateContext.Provider>
  )
}

If I'm understanding correctly the above optimization fails because whenever I call the dispatch the initialState changes thus triggering a re-render.

Am I correct? If yes, how can I handle this case properly?

0 Answers0