Estoy probando use-context-selector lib para evitar una representación innecesaria en reaccionar ContextApi. Creo esta sencilla aplicación:

 export const HomeProvider = (props: PropsWithChildren<{}>) => { const [x, setX] = React.useState(0); const [y, setY] = React.useState(0); return ( <HomeContext.Provider value={{ x, setX, y, setY }}> {props.children} </HomeContext.Provider> ); }; export const HomeModule = () => { return ( <HomeProvider> <CounterScreen></CounterScreen> <br /> <br /> <MessageScreen></MessageScreen> </HomeProvider> ); };

Los componentes secundarios son:

 export const MessageScreen = () => { const x = useContextSelector(HomeContext, (context) => context.x); const setX = useContextSelector(HomeContext, (context) => context.setX); return ( <> <h1>Teste X</h1> {x} <button onClick={() => setX(x + 1)}>X</button> </> ); };

 export const MessageScreen = () => { const x = useContextSelector(HomeContext, (context) => context.x); const setX = useContextSelector(HomeContext, (context) => context.setX); return ( <> <h1>Teste Y</h1> {y} <button onClick={() => setY(y + 1)}>X</button> </> ); };

El resultado, cuando hago clic en cualquiera de esos botones, es que, de hecho, los componentes secundarios no se vuelven a representar:

https://i.stack.imgur.com/9adCh.png

Pero, cuando uso la opción: Highlight updates when components render en la configuración, se resaltan todos los componentes en la pantalla.

Entonces, ¿me estoy perdiendo algo o tengo razón acerca de que los componentes secundarios no se vuelven a renderizar? Vi otros videos en youtube que muestran que al usar esta biblioteca, el componente que no se renderizó no estaba resaltado.