I have a component which takes another component as prop like below,
<WrapperComp
isEnabled = { enabled }
view = { (payload) => {
return <Test { ...props } testProp= { payload} />;
} } />
Here view prop is a component, everytime when props changes, it causes Test component to unmount and mount again. Is there any way to avoid this.
Wrapper component is simple component which displays View component, something like below
const WrapperComp = (
{View}
) => {
return <View payload={ 'some payload' } />;
};
I figured out why it was unmounting and mounting again, the issue here is i am passing function component as a prop whose reference is changing on every re-render so new component is passed every time wrapper rerender, one of the solution for this is to use "useCallback"
<WrapperComp
isEnabled = { enabled }
view = { useCallback((payload) => {
return <Test { ...props } testProp= { payload} />;
}, []) } />