question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useQuery causes a component to render multiple times

See original GitHub issue

Is it normal with this new hooks api to re-render a component multiple times? I just saw that useQuery causes a component to re-render 3 times. Here is an example: https://codesandbox.io/s/j7kw103525

It’s the same, example from the readme file, I have just added a console log to /views/Details.js

const Detail = ({
  match: {
    params: { breed, id }
  }
}) => {
  const { data, error } = useQuery(GET_DOG, {
    variables: { breed }
  });
  console.log(2);
  return (
    <View style={styles.container}>
      <Header text={breed} />
      {error ? (
        <Error />
      ) : (
        <DogList...

And the output is: 2 2 2

I have tried on my own project and got the same result.

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:22
  • Comments:31

github_iconTop GitHub Comments

20reactions
dubcscommented, Nov 6, 2019

I am still having this issue

13reactions
Alexandredccommented, May 23, 2019

I have the same problem. useQuery causes 2 renders even if the query result is already cached.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React-Query makes component to rerender multiple times
When i change the page state to cause thw query re run it renders the component 3 times and the first 2 are...
Read more >
Relation between re-render and useQuery - Help
The useQuerey hook will trigger a re-render when it receives a response from the graphql backend (whether that response is data or an...
Read more >
Why does useQuery call cause a re-render in my component?
In the above you can see your component has state (not props) data , loading and error which causes your component to re-render....
Read more >
5 Ways to Avoid React Component Re-Renderings
How to Avoid Unnecessary Re-rendering in React. React components have evolved a long way from their inception. Still, many developers find ...
Read more >
React re-renders guide: everything, all at once
If in Context there is a combination of data and API (getters and setters) they can be split into different Providers under the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found