React 19
Ejercicios de React sobre Estado
10 ejercicios de Estado en React. Piensa la respuesta antes de abrirla: la explicación dice por qué las demás opciones fallan.
1 · Elige la respuesta · nivel 1
Nada más pintar el componente, ¿qué número se muestra?
function Likes() { const [likes, setLikes] = useState(3); return <p>{likes}</p>;}- A3
- B0
- Cundefined
- DNada
Ver la respuesta
Respuesta: A. 3
El argumento de useState es el valor inicial. likes vale 3 hasta que se llame a setLikes.
2 · Elige la respuesta · nivel 1
¿Para qué sirve setCount en este código?
const [count, setCount] = useState(0);- APara cambiar count y que el componente se vuelva a pintar
- BPara leer el valor de count
- CPara borrar el estado
- DPara crear un segundo estado
Ver la respuesta
Respuesta: A. Para cambiar count y que el componente se vuelva a pintar
useState devuelve el valor actual y una función para cambiarlo. Al llamar a setCount, React guarda el valor nuevo y vuelve a pintar el componente.
3 · Encuentra el fallo · nivel 1
Al pulsar, el número no cambia. ¿Qué línea tiene el fallo?
1function Counter() {2 const [count, setCount] = useState(0);3 return (4 <button onClick={() => count + 1}>5 {count}6 </button>7 );8}Ver la respuesta
El fallo está en la línea 4:
<button onClick={() => count + 1}>Calcular count + 1 no cambia nada ni avisa a React. Para actualizar la pantalla hay que llamar a la función del estado: onClick={() => setCount(count + 1)}.
4 · Completa el hueco · nivel 1
Completa la declaración de un estado de texto.
const [name, ___] = ___("");- setName
- useState
- useEffect
- name
- useRef
- useMemo
Ver la respuesta
Respuesta: setName · useState
const [name, setName] = useState("");useState devuelve un par: el valor actual y la función que lo actualiza. Por convención se llama set + nombre.
5 · Completa el hueco · nivel 1
Completa la declaración de un contador que empieza en 0.
const [count, setCount] = ___(___);- useState
- 0
- useEffect
- count
Ver la respuesta
Respuesta: useState · 0
const [count, setCount] = useState(0);useState recibe el valor inicial y devuelve el valor y su función para cambiarlo. useEffect sirve para otra cosa: efectos secundarios.
6 · Ordena las líneas · nivel 1
Ordena un botón que muestre cuántas veces se ha pulsado.
- {clicks}
- </button>
- <button onClick={() => setClicks(clicks + 1)}>
- <button onClick={clicks + 1}>
- );
- const [clicks, setClicks] = useState(0);
- return (
- }
- function Counter() {
Ver la respuesta
El orden correcto:
function Counter() { const [clicks, setClicks] = useState(0); return ( <button onClick={() => setClicks(clicks + 1)}> {clicks} </button> );}Sobran: <button onClick={clicks + 1}>
El estado se declara antes del return. onClick recibe una función que llama a setClicks; pasarle clicks + 1 le daría un número, no una función.
7 · Elige la respuesta · nivel 2
¿Qué número muestra el botón tras un clic?
function Counter() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); setCount(count + 1); } return <button onClick={handleClick}>{count}</button>;}- A1
- B2
- C0
- DError por llamar a setState dos veces
Ver la respuesta
Respuesta: A. 1
count vale 0 durante todo el render, así que las dos llamadas piden 0 + 1. Para encadenar actualizaciones hay que usar la forma funcional: setCount((c) => c + 1).
8 · Elige la respuesta · nivel 2
Si name valía "Ana", ¿qué imprime y cuántos renders provoca el clic?
function handleClick() { setName("Eva"); setAge(30); console.log(name);}- AAna, y un solo render
- BEva, y un solo render
- CAna, y dos renders
- DEva, y dos renders
Ver la respuesta
Respuesta: A. Ana, y un solo render
Actualizar el estado no cambia la variable del render actual, así que se imprime Ana. React agrupa todas las actualizaciones del mismo evento y hace un único render.
9 · Elige la respuesta · nivel 2
Si score valía 0, ¿cuánto vale tras el siguiente render?
setScore((s) => s + 1);setScore((s) => s + 1);setScore(10);setScore((s) => s * 2);- A20
- B2
- C10
- D4
Ver la respuesta
Respuesta: A. 20
React aplica la cola en orden: 0 + 1 = 1, 1 + 1 = 2, después un valor fijo que reemplaza (10) y por último 10 × 2 = 20.
10 · Completa el hueco · nivel 2
Completa para gestionar la lista con un reducer.
function reducer(state, action) { switch (action.type) { case "add": return [...state, action.item]; default: return state; }} const [items, ___] = ___(reducer, []);dispatch({ type: "add", item: "pan" });- dispatch
- useReducer
- setItems
- useState
- reduce
- send
Ver la respuesta
Respuesta: dispatch · useReducer
function reducer(state, action) { switch (action.type) { case "add": return [...state, action.item]; default: return state; }} const [items, dispatch] = useReducer(reducer, []);dispatch({ type: "add", item: "pan" });useReducer devuelve el estado y una función dispatch que envía acciones al reducer. El reducer calcula el estado nuevo sin mutar el anterior.