Ejercicios de React sobre React 19

1 · Elige la respuesta · nivel 2

¿Qué pasa mientras la promesa está pendiente?

function Comments({ commentsPromise }) {  const comments = use(commentsPromise);  return comments.map((c) => <p key={c.id}>{c.text}</p>);}

• AEl componente se suspende y se ve el fallback del <Suspense> más cercano
• Bcomments vale undefined hasta que resuelve
• CLanza un error y hay que envolverlo en try/catch
• DReact bloquea el hilo hasta que resuelve

2 · Elige la respuesta · nivel 2

En React 19, ¿cómo recibe la prop ref un componente de función?

• AComo cualquier otra prop: function Input({ ref }) {…}
• BSolo si se envuelve en forwardRef
• CCreándola con useRef dentro del hijo
• DNo se puede pasar ref a componentes de función

3 · Elige la respuesta · nivel 2

En React 19, ¿qué valor lee useContext(ThemeContext) dentro de Toolbar?

const ThemeContext = createContext("light"); function App() {  return (    <ThemeContext value="dark">      <Toolbar />    </ThemeContext>  );}

• Adark
• Blight
• Cundefined: falta .Provider
• DNinguno: un contexto no se puede renderizar

4 · Elige la respuesta · nivel 2

Si saveLike falla, ¿qué muestra el botón cuando termina la acción?

function LikeButton({ likes, saveLike }) {  const [shown, addLike] = useOptimistic(likes, (current, n) => current + n);  return (    <form action={async () => {      addLike(1);      await saveLike();    }}>      <button>♥ {shown}</button>    </form>  );}

• AVuelve a mostrar el valor de likes
• BSe queda con el +1
• CNaN
• DSe queda en blanco

5 · Elige la respuesta · nivel 2

¿Dónde hay que llamar a useFormStatus para saber si un formulario se está enviando?

function SubmitButton() {  const { pending } = useFormStatus();  return <button disabled={pending}>Enviar</button>;}

• AEn un componente que se renderiza dentro del <form>
• BEn el mismo componente que renderiza el <form>
• CEn cualquier parte de la aplicación
• DSolo en un Server Component

6 · Elige la respuesta · nivel 2

En React 19, ¿cuándo se ejecuta la función que devuelve el callback ref?

<div ref={(node) => {  const observer = new ResizeObserver(onResize);  observer.observe(node);  return () => observer.disconnect();}} />

• ACuando el elemento se quita del DOM
• BNunca: el valor devuelto se ignora
• CJusto después de montarse
• DEn cada render

7 · Elige la respuesta · nivel 2

¿Qué pasa si cambia theme pero no roomId?

function Chat({ roomId, theme }) {  const onConnected = useEffectEvent(() => {    showToast("Conectado", theme);  });   useEffect(() => {    const conn = connect(roomId);    conn.on("connected", onConnected);    return () => conn.close();  }, [roomId]);}

• ANo se reconecta, y el aviso usará el theme nuevo
• BSe cierra la conexión y se vuelve a abrir
• CEl aviso usará el theme antiguo
• DUn error: falta theme en las dependencias

8 · Elige la respuesta · nivel 2

¿Qué le pasa a Chat al cambiar a otra pestaña?

<Activity mode={tab === "chat" ? "visible" : "hidden"}>  <Chat /></Activity>

• ASe oculta pero conserva su estado, y sus efectos se limpian hasta que vuelva a verse
• BSe desmonta y pierde el estado
• CSigue visible debajo de la otra pestaña
• DSe oculta, pero sus efectos siguen activos

9 · Ordena las líneas · nivel 2

Ordena un formulario que use useActionState y desactive el botón mientras se envía.

• <button disabled={pending}>Enviar</button>
• <input name="email" />
• </form>
• <form action={submit}>
• <form onSubmit={submit}>
• );
• const [error, submit, pending] = useActionState(signup, null);
• return (
• }
• function Signup() {

function Signup() {  const [error, submit, pending] = useActionState(signup, null);  return (    <form action={submit}>      <input name="email" />      <button disabled={pending}>Enviar</button>    </form>  );}