Error combining useQuery with useState

[Juanjo-GEx]

Describe the bug

When we make a fetch request to an api we can save the resulting data as status to later filter based on certain options through useState:

const [data, setData] = useState([]);

useEffect(() => {
    setIsLoading(true);
    fetch("https://rickandmortyapi.com/api/character")
      .then((res) => res.json())
      .then((data) => {
        setIsLoading(false);
        setData(data);
      })
      .catch((e) => {
        setError(e);
      });
  });

However if we apply the same concept with react query, it does not give an error because it exceeds the number of renderings:

const [data, setData] = useState([]);

const { data: personajes, isSuccess } = useQuery(
    ["personajes"],
    async () =>
      await fetch("https://rickandmortyapi.com/api/character").then((res) =>
        res.json()
      )
  );

  if (isSuccess) {
    setData(personajes);
  }

Your minimal, reproducible example

https://github.com/Juanjo-GEx

Steps to reproduce

Apply the mentioned code.

Expected behavior

The expected result would be the same as in the first example, but this is not the case and it gives an error.

How often does this bug happen?

Every time

Screenshots or Videos

ERROR:

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Platform

Chrome

react-query version

4.12.0

TypeScript version

No response

Additional context

No response

[ghost]

function Component () {
  ...
   if (isSuccess) {
    setData(personajes);
  }
}

If this is inside of component function, this will run in every render after useQuery resolve it.
When useQuery resolved it will put isSuccess in true so it will run setData in every render

---

Flow

• useQuery make the request
• request resolve and rerender
• isSuccess is true
• enter into the if. run setData(personajes);
• setState squedule a rerender
  isSuccess is true
• enter into the if. run setData(personajes);
• setState squedule a rerender
• repeat repeat and repeat

[Juanjo-GEx]

Indeed, but my question is: what is the solution to save the response of useQuery as a state of type useState?

[TkDodo]

well you'd need a useEffect for that:

const [data, setData] = useState([]);

const { data: personajes, isSuccess } = useQuery(
    ["personajes"],
    async () =>
      await fetch("https://rickandmortyapi.com/api/character").then((res) =>
        res.json()
      )
  );

  useEffect(() => {
    if (isSuccess) {
      setData(personajes);
    }
  }, [isSuccess, personajes]

but honestly, I would advise against copying the state of react-query anywhere else. This is a discussion at best, not an issue, so moving.