2

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 useEffects inside my component so my next thought was to check to see if any of the useEffect is causing the re-renders. I've tried adding and removing every single dependency in my useEffect 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.

aaKhan
  • 247
  • 2
  • 16

0 Answers0