I have a React Native component where i'm calling for data in useEffect and rendering data accordingly. But i need to call for data after every 2 seconds and i'm doing that. But the whole component flickers after every two seconds. How can i stop that? Here's my component right now:
const Climate = () => {
const rooms: ControllerRoom<ClimateRoomItemType>[] =
useSelector(climateSelector);
const displayRoomList = useSelector(displayRoomListSelector);
//State
const [active, setActive] = useState<number>(-1);
const [count, setCount] = useState<number>(0);
const [isFetching, setIsFetching] = useState<boolean>(true);
//Handlers
const fetchClimate = useCallback(
() => dispatch(desktopAction.fetchClimate()),
[dispatch],
);
useLayoutEffect(() => {
fetchClimate();
fetchData();
}, []);
const fetchData = useCallback(
() => {
const interval = setInterval(() => {
fetchClimate();
}, 2000);
return () => {
fetchClimate();
clearInterval(interval);
};
},[]
);
useEffect(() => {
if (active < 0 && rooms.length > 0) {
setActive(newlist[0][0].id);
setIsFetching(false);
}
}, [rooms, isFetching]);
return(
<ControllerContainer>
{!displayRoomList ? (
<RoomsClimate
key={Math. floor(Math. random() * 100)}
rooms={rooms}
displayRoomList={displayRoomList}
/>
) : null}
</ControllerContainer>
)
}
export default memo(Climate);How can i stop flickering of component and still ask for data every 2 seconds?