Context.Provider as HOC with memoized children - children still rerender on any state change

here is my setup:

const Screen = withVideoPlayer(() => {
      const load = useContextSelector(VideoPlayerContext, c => c.load);

      console.log("Screen rerendered")
  ...
})

const withVideoPlayer = <P extends object>(WrappedComponent: FC<P>) => {
    const ComponentWithPlayerContext = (props: P) => {
        const controller = useInitVideoPlayerController();

        const Memoized = useMemo(() => memo(WrappedComponent), [WrappedComponent]);

        return (
            <VideoPlayerContext.Provider value={controller}>
                <Memoized {...props} />
            </VideoPlayerContext.Provider>
        );
    };

    return ComponentWithPlayerContext;
};

const useInitVideoPlayerController = () => {

  const load = useCallback(
        async (
            video: IVideo | IVideoTrailer,
            options?: Partial<{
                autoplay: boolean;
                position: number;
            }>,
        ) => {
            dispatch({ type: 'load', payload: { video, options } });
        },
        [],
  );

  ...

  return {
      ... a bunch of state properties and methods wrapped with useCallback
      load,
  };
}

the problem is the Screen component rerenders any time the context is changed, even though it only uses “load” method which is wrapped with useCallback without dependencies. If i remove const load = useVideoPlayer(c=>c.load) from Screen, the rerenders don’t happen anymore.

could this be related to this? https://github.com/dai-shi/use-context-selector/issues/86

[lightrow]

so i assume if we used React’s own Context, it would always go to phase 2?

[dai-shi]

Yes, that is an expected behavior. React render has two phases, 1) render phase for invoking render function and b) commit phase to apply changes to DOM. What you see with console.log in the render function is 1) and what you see in useEffect is 2). It impacts on performance if your render function is computationally heavy. In such cases, you want to use useMemo and/or React.memo to avoid extra computations.