Tengo un flujo de datos que React acepta en forma de eventos JS personalizados. Cada vez que se activa el evento, necesito actualizar el valor de un proveedor de contexto para que los componentes de consumo puedan volver a procesarse. Sin embargo, no quiero que todos los elementos secundarios se vuelvan a procesar, que es lo que está sucediendo ahora porque estoy manejando cada nuevo evento JS con una actualización del estado del proveedor. Me pregunto cómo evitar que los niños vuelvan a renderizarse en este cambio de estado.

 const DataListener = (props) => { const [data, setData] = useState([]) const Data = createContext([]); useEffect(() => { document.addEventListener('newDataEvent', (e) => { setData([...data, e.detail]); }) }, []); return ( <Data.Provider > {props.children} </Data.Provider> ); }