I have a stream of data that React accepts in the form of custom JS events. Each time the event fires, I need to update the value of a context provider so that the consuming components can re-render. However, I don't want all of the children to re-render, which is what's happening now because I am handling each new JS event with an update to the provider's state. I'm wondering how to avoid the children from re-rendering on this state change.

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>
    );
}