🚀 Guía Definitiva para Convertirte en un Experto en React Query

React Query es una de las bibliotecas más potentes para la gestión del estado del servidor en aplicaciones React. A menudo se usa para la obtención de datos, pero su verdadero poder radica en cómo maneja la caché, la sincronización y los estados de carga y error de forma automática.

En este artículo, exploraremos cómo utilizar React Query como un experto, optimizando el rendimiento de tus aplicaciones y mejorando la experiencia del usuario.

📌 ¿Qué es React Query y por qué deberías usarlo?

A diferencia de otras bibliotecas como Redux o useState + useEffect, React Query no almacena datos en el estado global, sino que los gestiona directamente desde el servidor. Esto significa que:

✅ Los datos siempre están actualizados.
✅ Maneja automáticamente estados de carga, error y éxito.
✅ Reduce el uso de useEffect, simplificando el código.
✅ Optimiza la caché, evitando múltiples solicitudes innecesarias.

🔹 Ejemplo básico con useQuery

En lugar de usar useEffect y useState para obtener datos, con React Query puedes hacer lo siguiente:

import axios from 'axios';

const fetchTodos = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/todos');
  return data;
};

export default function TodoList() {
  const { data, error, isLoading } = useQuery(['todos'], fetchTodos);

  if (isLoading) return <p>Cargando...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

🎯 En este código:

• React Query maneja el estado de carga y error automáticamente.
• Los datos se almacenan en caché, evitando nuevas solicitudes innecesarias.
• La clave 'todos' permite actualizar y refetch fácilmente los datos.

🎯 Claves para Dominar React Query

1️⃣ Usa Claves de Consulta (Query Keys) Correctamente

Las query keys identifican cada consulta en React Query. Se recomienda usar arrays en lugar de simples strings.

🔹 Ejemplo:

useQuery(['todos', { status: 'active' }], fetchTodos);

Esto permite que React Query organice mejor la caché y gestione los datos dinámicos.

2️⃣ Usa Funciones de Consulta Eficientes

Si bien puedes usar fetch(), axios o cualquier otro cliente HTTP, es recomendable estructurar las funciones para mayor reutilización.

🔹 Ejemplo con Axios:

const fetchUser = async (userId) => {
  const { data } = await axios.get(`/api/users/${userId}`);
  return data;
};

useQuery(['user', userId], () => fetchUser(userId));

De esta manera, puedes reutilizar la función en múltiples componentes sin repetir código.

3️⃣ Habilita el Prefetching para una Mejor Experiencia de Usuario

El prefetching carga los datos en segundo plano antes de que sean requeridos por el usuario. Esto mejora el rendimiento de la app.

🔹 Ejemplo:

const queryClient = useQueryClient();

const handleMouseEnter = () => {
  queryClient.prefetchQuery(['todos'], fetchTodos);
};

Si un usuario pasa el mouse sobre un enlace, los datos de la siguiente página ya estarán cargados antes de que haga clic.

4️⃣ Usa Mutations para Operaciones CRUD

Para crear, actualizar o eliminar datos, React Query proporciona useMutation.

🔹 Ejemplo de useMutation para agregar una tarea:

const mutation = useMutation(newTodo => axios.post('/api/todos', newTodo));

const handleAddTodo = () => {
  mutation.mutate({ title: 'Nueva tarea', completed: false });
};

✅ Se maneja automáticamente el estado de la solicitud.
✅ Se actualiza la caché sin recargar la página.