React 19
Ejercicios de React sobre Efectos
6 ejercicios de Efectos en React. Piensa la respuesta antes de abrirla: la explicación dice por qué las demás opciones fallan.
1 · Elige la respuesta · nivel 2
En desarrollo y con <StrictMode>, ¿qué se imprime al cargar el componente?
useEffect(() => { console.log("montado"); return () => console.log("limpieza");}, []);- Amontado, limpieza y montado otra vez
- BSolo montado
- CNada hasta que cambie algo
- Dmontado en bucle
Ver la respuesta
Respuesta: A. montado, limpieza y montado otra vez
En desarrollo, StrictMode monta, desmonta y vuelve a montar cada componente para destapar efectos sin limpieza. En producción solo se ejecuta una vez.
2 · Encuentra el fallo · nivel 2
Al cambiar query, los resultados no se actualizan. ¿Qué línea tiene el fallo?
1function Search({ query }) {2 const [results, setResults] = useState([]);3 4 useEffect(() => {5 fetchResults(query).then(setResults);6 }, []);7 8 return <List items={results} />;9}Ver la respuesta
El fallo está en la línea 6:
}, []);Con un array de dependencias vacío, el efecto solo se ejecuta al montar. Tiene que incluir query: [query].
3 · Encuentra el fallo · nivel 2
El componente hace peticiones sin parar. ¿Qué línea lo provoca?
1function Results({ query }) {2 const [data, setData] = useState([]);3 const options = { query, limit: 10 };4 5 useEffect(() => {6 search(options).then(setData);7 }, [options]);8 9 return <List items={data} />;10}Ver la respuesta
El fallo está en la línea 3:
const options = { query, limit: 10 };options es un objeto nuevo en cada render, así que la dependencia siempre cambia: el efecto se repite, setData provoca otro render y vuelta a empezar. Crea el objeto dentro del efecto y depende de [query].
4 · Encuentra el fallo · nivel 2
React avisa de que la función de un efecto no puede devolver una promesa. ¿Qué línea tiene el fallo?
1useEffect(async () => {2 const res = await fetch(`/api/users/${id}`);3 setUser(await res.json());4}, [id]);Ver la respuesta
El fallo está en la línea 1:
useEffect(async () => {Una función async siempre devuelve una promesa, y un efecto solo puede devolver su función de limpieza. Declara una función async dentro del efecto y llámala. Para cargar datos, mejor aún un framework o use() con Suspense.
5 · Completa el hueco · nivel 2
Completa para limpiar el intervalo cuando el componente se desmonte.
useEffect(() => { const id = setInterval(tick, 1000); ___ () => ___(id);}, []);- return
- clearInterval
- await
- yield
- cancelInterval
- removeInterval
Ver la respuesta
Respuesta: return · clearInterval
useEffect(() => { const id = setInterval(tick, 1000); return () => clearInterval(id);}, []);La función que devuelve un efecto es su limpieza: React la ejecuta al desmontar el componente y antes de volver a ejecutar el efecto.
6 · Ordena las líneas · nivel 2
Ordena un efecto que pida el usuario y descarte la respuesta si id cambia antes de que llegue.
- if (!ignore) setUser(user);
- ignore = true;
- };
- });
- fetchUser(id).then((user) => {
- let ignore = false;
- return () => {
- }, []);
- }, [id]);
- useEffect(() => {
Ver la respuesta
El orden correcto:
useEffect(() => { let ignore = false; fetchUser(id).then((user) => { if (!ignore) setUser(user); }); return () => { ignore = true; };}, [id]);Sobran: }, []);
Si id cambia, React ejecuta la limpieza del efecto anterior y marca ignore, así que una respuesta antigua que llegue tarde no pisa a la nueva. La dependencia [id] es la que repite la petición.