Quiero visualizar cómo es la interacción entre un componente react que se alimenta de un json, y este que se recarga del back end ante un evento del componente
Perfecto, Gabriel 🙌. Acá tenés un ejemplo completo en código que refleja el flujo de interacción entre un componente React, un JSON como fuente de datos, y el back end que responde ante eventos del usuario:
🔹 1. Repositorio de datos (soapRepository.ts)
export async function getSoap(id: string) {
const res = await fetch(`/api/soap/${id}`);
if (!res.ok) throw new Error("Error al obtener jabón");
return res.json(); // ← JSON con datos del jabón
}
export async function updateSoap(id: string, data: any) {
const res = await fetch(`/api/soap/${id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data),
});
if (!res.ok) throw new Error("Error al actualizar jabón");
return res.json(); // ← JSON actualizado
}
🔹 2. Hook que gestiona el ciclo completo (useSoap.ts)
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { getSoap, updateSoap } from "@repositories/soapRepository";
export function useSoap(id: string) {
const queryClient = useQueryClient();
const { data: soap, isLoading } = useQuery({
queryKey: ["soap", id],
queryFn: () => getSoap(id),
});
const mutation = useMutation({
mutationFn: (data: any) => updateSoap(id, data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["soap", id] }); // ← sincroniza
},
});
return { soap, isLoading, updateSoap: mutation.mutate };
}
🔹 3. Componente React que se alimenta del JSON y responde a eventos
import { useSoap } from "@hooks/useSoap";
export default function SoapViewer({ id }: { id: string }) {
const { soap, isLoading, updateSoap } = useSoap(id);
if (isLoading) return <p>Cargando jabón...</p>;
function handleClick() {
updateSoap({ ...soap, status: "clicked" }); // ← evento dispara actualización
}
function handleKeyPress(e: React.KeyboardEvent) {
if (e.key === "Enter") {
updateSoap({ ...soap, status: "tecla Enter" }); // ← evento de teclado
}
}
return (
<div tabIndex={0} onClick={handleClick} onKeyDown={handleKeyPress}>
<h2>{soap.nombre}</h2>
<p>Estado: {soap.status}</p>
</div>
);
}
🔹 Flujo completo
El componente se monta →
getSoap(id)trae el JSON inicial.El usuario hace click o presiona una tecla → se dispara
updateSoap.El back end responde con un nuevo JSON → React Query lo sincroniza.
El componente se re-renderiza con los datos actualizados.
¿Querés que te muestre cómo este flujo se puede extender para múltiples jabones en una lista, cada uno con su propio estado y eventos?
Sí, Gabriel 👌. React Query puede provocar re-renderizados en componentes React, pero no “le dice” directamente a React cuándo renderizar. Lo que hace es actualizar el estado interno de sus hooks, y como esos hooks están conectados al ciclo de renderizado de React, el componente se vuelve a renderizar automáticamente.
🔹 ¿Cómo lo hace React Query?
React Query usa internamente useState y useReducer para manejar el estado de las queries (loading, error, data, etc).
Cuando ese estado cambia, React re-renderiza el componente que está usando el hook.
Por ejemplo:
const { data, isLoading } = useQuery({
queryKey: ["jabón", id],
queryFn: () => fetchSoap(id),
});
👉 Cada vez que:
Se inicia la query →
isLoadingcambia → render.Llega la respuesta →
datacambia → render.Se invalida la query → se vuelve a ejecutar → render.
🔹 ¿React Query puede evitar renders innecesarios?
Sí. React Query tiene mecanismos como:
staleTime: evita refetch si los datos siguen “frescos”.select: permite transformar los datos antes de entregarlos, evitando renders si el resultado no cambia.notifyOnChangeProps: permite controlar qué propiedades del resultado disparan renders.
🔹 ¿Puede forzar un render?
Indirectamente, sí. Por ejemplo, al usar queryClient.invalidateQueries() o setQueryData(), React Query actualiza el estado de la query, lo que provoca un render en los componentes que la consumen.
✨ Conclusión
React Query no controla directamente el renderizado, pero sí provoca renders al cambiar el estado de sus queries.
Es una forma declarativa de decirle a React: “estos datos cambiaron, actualizá la UI”.
También ofrece herramientas para optimizar o evitar renders innecesarios.
¿Querés que te muestre un ejemplo donde un componente se suscribe a una query, pero solo se re-renderiza si cambia una propiedad específica del JSON (ej. status del jabón)?
Perfecto, Gabriel 🙌. Te muestro un ejemplo donde React Query suscribe un componente a una query, pero el componente solo se re-renderiza si cambia una propiedad específica del JSON (por ejemplo, el status del jabón). Esto se logra con la opción select:
🔹 Hook con select
import { useQuery } from "@tanstack/react-query";
import { getSoap } from "@repositories/soapRepository";
export function useSoapStatus(id: string) {
return useQuery({
queryKey: ["soap", id],
queryFn: () => getSoap(id),
// Solo seleccionamos la propiedad "status"
select: (data) => data.status,
});
}
👉 Aquí el hook devuelve solo el status del jabón.
👉 Si el JSON cambia en otra propiedad (ej. nombre), el componente no se re-renderiza porque el valor seleccionado (status) sigue igual.
🔹 Componente que usa el hook
import { useSoapStatus } from "@hooks/useSoapStatus";
export default function SoapStatus({ id }: { id: string }) {
const { data: status, isLoading } = useSoapStatus(id);
if (isLoading) return <p>Cargando estado...</p>;
return <p>Estado actual: {status}</p>;
}
👉 Este componente solo se re-renderiza si cambia el status.
👉 Si el back end devuelve un JSON con cambios en otras propiedades, React Query detecta que el valor seleccionado es el mismo y evita el render.
✨ Beneficio
Optimización de renders: el componente se mantiene ligero y solo responde a lo que realmente necesita.
Escalabilidad: en proyectos grandes, podés tener componentes que se suscriben a distintas partes del mismo JSON sin duplicar renders.
¿Querés que te arme un ejemplo extendido donde un componente muestra el nombre y otro el status, y solo cada uno se re-renderiza cuando cambia su parte del JSON?
Perfecto, Gabriel 🙌. Te muestro cómo armar un ejemplo extendido donde un componente muestra el nombre del jabón y otro muestra el status, y cada uno se re-renderiza solo cuando cambia su parte del JSON gracias a la opción select de React Query.
🔹 Hook base (trae el JSON completo)
// hooks/useSoap.ts
import { useQuery } from "@tanstack/react-query";
import { getSoap } from "@repositories/soapRepository";
export function useSoap(id: string) {
return useQuery({
queryKey: ["soap", id],
queryFn: () => getSoap(id),
});
}
🔹 Hooks especializados con select
// hooks/useSoapName.ts
import { useSoap } from "./useSoap";
export function useSoapName(id: string) {
return useSoap(id, {
select: (data) => data.nombre, // solo nombre
});
}
// hooks/useSoapStatus.ts
import { useSoap } from "./useSoap";
export function useSoapStatus(id: string) {
return useSoap(id, {
select: (data) => data.status, // solo status
});
}
👉 Cada hook se suscribe solo a la parte del JSON que necesita.
🔹 Componentes independientes
// components/SoapName.tsx
import { useSoapName } from "@hooks/useSoapName";
export default function SoapName({ id }: { id: string }) {
const { data: nombre, isLoading } = useSoapName(id);
if (isLoading) return <p>Cargando nombre...</p>;
return <h2>{nombre}</h2>;
}
// components/SoapStatus.tsx
import { useSoapStatus } from "@hooks/useSoapStatus";
export default function SoapStatus({ id }: { id: string }) {
const { data: status, isLoading } = useSoapStatus(id);
if (isLoading) return <p>Cargando estado...</p>;
return <p>Estado: {status}</p>;
}
🔹 Integración en App.tsx
import SoapName from "@components/SoapName";
import SoapStatus from "@components/SoapStatus";
export default function App() {
const soapId = "123";
return (
<div>
<SoapName id={soapId} />
<SoapStatus id={soapId} />
</div>
);
}
✨ Resultado
Si el back end devuelve un JSON con cambios en
nombre, soloSoapNamese re-renderiza.Si cambia
status, soloSoapStatusse re-renderiza.Esto evita renders innecesarios y mantiene la UI más eficiente en proyectos grandes.
¿Querés que te prepare también un diagrama visual mostrando cómo cada componente se suscribe solo a su parte del JSON y se re-renderiza de manera independiente?
¡Muy buena observación, Gabriel 👌! Tenés toda la razón: si definiste useSoap como una función tuya con un solo parámetro (por ejemplo id), no podés pasarle un segundo parámetro como si fuera useQuery.
Lo que pasó en mi ejemplo anterior es que mezclé dos conceptos:
useQueryde React Query sí acepta un objeto de configuración con varias opciones (queryKey,queryFn,select, etc.).useSoap, al ser un hook definido por vos, solo acepta lo que vos hayas programado. Si lo definiste con un solo parámetro (id), entonces no podés pasarle un segundo argumento.
🔹 Forma correcta
Si querés que tu hook useSoap soporte opciones como select, tenés que diseñarlo para aceptar un objeto de configuración, no solo el id. Por ejemplo:
// hooks/useSoap.ts
import { useQuery } from "@tanstack/react-query";
import { getSoap } from "@repositories/soapRepository";
export function useSoap(id: string, options?: { select?: (data: any) => any }) {
return useQuery({
queryKey: ["soap", id],
queryFn: () => getSoap(id),
...options, // ← aquí se aplican las opciones extra
});
}
🔹 Uso especializado
Ahora sí podés hacer:
// Solo nombre
export function useSoapName(id: string) {
return useSoap(id, {
select: (data) => data.nombre,
});
}
// Solo status
export function useSoapStatus(id: string) {
return useSoap(id, {
select: (data) => data.status,
});
}
👉 En este diseño, useSoap recibe dos parámetros:
id(obligatorio).options(opcional), que se pasa directamente auseQuery.
✨ Conclusión
Si tu
useSoapsolo aceptaid, entonces no podés pasarle un segundo parámetro.Para que soporte
selectu otras configuraciones, tenés que modificar la definición deuseSoappara aceptar un objeto de opciones.Así mantenés un hook base flexible y podés derivar hooks especializados (
useSoapName,useSoapStatus) sin duplicar lógica.
¿Querés que te arme un ejemplo completo con tres hooks derivados (useSoapName, useSoapStatus, useSoapPrice) y un componente que los use juntos, mostrando cómo cada uno se re-renderiza solo cuando cambia su parte del JSON?
No hay comentarios:
Publicar un comentario