How to avoid queryFn to run in each component re-render

[doronbrikman]

Hi, I have this case here:

const fetchCard = (id) => {
  console.log("fetching card");
  // api call
};

const useCard = (id) => {
  return useQuery(["card", id], () => fetchCard(id));
};

const Card = () => {
  const query = useCard(1);
  const [count, setCount] = useState(0);

  return (
    <>
      Loading: {query.isLoading.toString()}
      <h1>
        Im a Card {query.data}, count: {count}
      </h1>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>
        increment
      </button>
    </>
  );
};

When setCount is called, Card component re-render and it causes fetchCard to run again.
To avoid it, we adjust the staleTime so it won't call our BE on those cases.

Do we have a way to control it in other way? I would expect that if nothing had change related to the useCard query it won't try to re-fetch again.

[TkDodo]

A re-render alone wouldn't cause the queryFn to run. Please show the behavior in a codesandbox reproduction.

[doronbrikman]

Yes you are right, it was the unfocus/focus of the window that cause it