¿Cómo dejar de volver a renderizar el componente secundario si el padre actualiza el contexto o el estado en reaccionar js?
Ya estoy usando React.memo todavía se está volviendo a renderizar.
este es mi componente hijo
const Ab = () => { console.log("---ff-ddd"); const pageContext = useContext(PageContext); useEffect(() => { setTimeout(() => { pageContext.updateGlobalMenu({}); }, 5000); }, []); return <div>ddd</div>; }; export default React.memo(Ab);Estoy actualizando el contexto. Quiero que actualice el valor de contexto pero no vuelva a renderizar el componente secundario
export default function IndexPage() { const [globalMenu, setGlobalMenu] = useState(""); const updateGlobalMenu = (menuContent) => { setGlobalMenu(menuContent); }; return ( <PageContext.Provider value={{ updateGlobalMenu }} > <Ab /> </PageContext.Provider> ); }aquí está mi código
https://codesandbox.io/s/friendly-bartik-3cnqvf?file=/pages/index.js:156-470
si lo ves imprime dos veces consola . significa que se está volviendo a renderizar dos veces
Si el valor de PageContext cambia, se representará cualquier componente que consuma ese contexto (incluido Ab ). React.memo no puede detener esto. En su caso, está cambiando el valor en cada renderizado, por lo que tiene espacio para mejorarlo memorizando el valor del contexto. De esa manera, el valor no cambiará a menos que sea necesario:
export default function IndexPage() { const [globalMenu, setGlobalMenu] = useState(""); const updateGlobalMenu = useCallback((menuContent) => { setGlobalMenu(menuContent); }, []); const value = useMemo(() => ({ updateGlobalMenu }), [updateGlobalMenu]); return ( <PageContext.Provider value={value}> <Ab /> </PageContext.Provider> ); }También puede, además de la memorización de la respuesta anterior, dividir su parte de "api" y "datos" del estado en dos proveedores diferentes.
updateGlobalMenu estará en el proveedor PageContextAPI , globalMenu estará en el proveedor PageContextData . De esa manera, cuando actualice los datos, solo se volverá a procesar el proveedor con los datos.
Eche un vistazo a este artículo, cubrí esta técnica en detalle aquí: https://www.developerway.com/posts/how-to-write-performant-react-apps-with-context