The child component renders the first time using the passed output value. Next time, if it is asked to render, it checks if output prop is same as before, and if it is same, it will not re-render and instead gives the previously memozied component.
So this will look like const memoizedValue = { output } which is an object.
It's better whatever object you pass in ContextProvider's value is memoized.
value={{output:state.output,}}
is not receiving memoized value. Because the object {output: state.output} is not a memoized object. So even if state.output is unchanged, the {output: state.output} will not be the same as the previous value if the component that uses MyContext.Provider is re-rendered.
useContext
.React.useMemo
andReact.memo
are different.React.useMemo
is a hook which you can use inside a functional component.React.memo
is a higher-order component. You will wrap your component withReact.memo
.The component which is wrapped by
React.memo
checks if props are same and will return the previous rendered output if props didn't change.For example taking the same code,
The child component renders the first time using the passed
output
value. Next time, if it is asked to render, it checks ifoutput
prop is same as before, and if it is same, it will not re-render and instead gives the previously memozied component.omg I love you. thank you so much. one question if ok.
I noticed in the example you did not pass the value as object, if i pass as object will it cause issue with useMemo? for example
`
I did pass the object.
memoizedValue
is an object.is same as
So this will look like
const memoizedValue = { output }
which is an object.It's better whatever object you pass in ContextProvider's value is memoized.
is not receiving memoized value. Because the object
{output: state.output}
is not a memoized object. So even ifstate.output
is unchanged, the{output: state.output}
will not be the same as the previous value if the component that usesMyContext.Provider
is re-rendered.thank you very much this helps a lot