I have below code snippet:
const [state, setState] = useState(null);
{data, loading, error} = useQuery(SOME_QUERY, {fetchPolicy: 'no-cache'});
useEffect(() => {
setState(data)
}, [data]);
This seems to only render twice, once for the first render, and second once the GQL call is completed. My doubt is why is this not leading to infinite re-renders?
Component render -> useQuery fires -> call completed -> state updated by useEffect -> another render happens -> useQuery again fires and so on.
Is useQuery internally managing all of this? I also see only one network call being made.
useQueryfires"? The hook is called on every render, sure, but that doesn't mean it necessarily does anything, just like theuseStateanduseEffecthooks you're using.useQuerynot do a network call every-time it gets executed? if not, how does it determine when it should do it or not? even though I am specifying it should not use the cache usingno-cache.data/loadingchanges! It keeps a state internally (and probably uses an effect for making new requests when the query/variables change, and actually does some more fancy stuff).useQuerymust be doing deep equality checks also if the query accepts a variable.