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?