I have a hook that looks like this
export const useThing = id => {
const { stopPolling, startPolling, ...result } = useQuery(GET_THING, {
fetchPolicy: 'cache-and-network',
variables: { id },
skip: !id
});
return {
startPolling,
stopPolling,
thing: result.data.thing,
loading: result.loading,
error: result.error
};
}
Then in my component I'm doing something like this;
const {loading, error, thing, startPolling, stopPolling} = useThing(id);
// this is passed as a prop to a childComponent
const onUpdateThing = ()=> {
setShowInfoMessage(true);
startPolling(5000);
}
const verficationStatus = thing?.things[0]?.verificationStatus || 'PENDING';
useEffect(()=> {
if(verficationStatus === 'FAILED' || verificationStatus === 'SUCCESS') {
stopPolling();
}
}, [verificationStatus])
I'm using the startPolling
and startPolling
function to dynamically poll the query. The problem with this approach is that whenever I start polling, let's say with an interval of 3 seconds, the component will re-render every 3 seconds. I want the component to render only when the server has sent the updated response.
Here are a few things I've tried to debug;
- I've tried profiling the component using React Dev Tools and it displays
hooks changed
as the cause of re-render. - I'm using multiple
useEffect
s inside my component so my next thought was to check to see if any of theuseEffect
is causing the re-renders. I've tried adding and removing every single dependency in myuseEffect
calls and it doesn't seem to help. - I'm not storing any value returned in the state either.
- Child component calls the
mutation
. - I've also tried using
React.memo
but it causes more problems than it solves.
Any ideas as to what might be causing the problem would be greatly appreciated.