How to throttle often re-rendered component in react - reactjs

Question

I want to throttle rendering component which connects to WS and often gets data, which cause its very often re-render.
There is my solution with useMemo hook but I'm not sure that useMemo is designed for such things.
For sure every update of data will cause re-render because is that how useState works, and I have to update this data state.
Do you have maybe some advices or ideas how to throttle re-renders of <DataVisualizator /> Component?
useInterval hook
import { useEffect, useRef } from "react";
export const useInterval = (callback: () => void, delay: number) => {
const savedCallback = useRef<() => void>();
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
useEffect(() => {
function tick() {
if (savedCallback.current) {
savedCallback.current();
}
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
};
And component which receive data and should throttle his children
import { useEffect, useMemo, useState } from "react";
import useWebSocket from "react-use-websocket";
import { useInterval } from "../Hooks";
export const WebSockets = () => {
const SOCKET_URL = "wss://someWS";
//data will be kind of Dictionary .eg { "key1": val, "anotherkey: valOther }
const [data, setData] = useState({});
const webSocketOptions = {
shouldReconnect: () => true,
retryOnError: true,
reconnectInterval: 3000,
reconnectAttempts: 5,
onError: (e) => console.log(e),
};
const { sendMessage, lastMessage } = useWebSocket(
SOCKET_URL,
webSocketOptions
);
const handleData = (message: RequestData, data: OrderBookData) => {
// lot of operations to deepClone state and set new with new Data
setData(clonedData);
};
useEffect(() => {
lastMessage && handleData(JSON.parse(lastMessage.data), data);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [lastMessage]);
const [tickThrottle, setTickThrottle] = useState(false);
useInterval(() => {
setTickThrottle(!tickThrottle);
}, 700);
//Throttling with useMemo hook
const throttledDataVisdsualizator = useMemo(
() => <DataVisualizator dataToVisualize={data} />,
// eslint-disable-next-line react-hooks/exhaustive-deps
[tickThrottle]
);
return (
<>
{throttledDataVisdsualizator}
</>
);
};

Answer 1

Solution with useMemo hook
const [tickThrottle, setTickThrottle] = useState(false);
useInterval(() => {
setTickThrottle(!tickThrottle);
}, 700);
//Throttling with useMemo hook
const throttledDataVisdsualizator = useMemo(
() => <DataVisualizator dataToVisualize={data} />,
// eslint-disable-next-line react-hooks/exhaustive-deps
[tickThrottle]
);
return (
<>
{throttledDataVisdsualizator}
</>
);