React

Qué debes entender

React describe la UI como una función del estado. Un componente recibe props y devuelve una descripción declarativa de la interfaz.

Cómo funciona

JSX se transforma en llamadas que crean elementos React. Los elementos son descripciones inmutables; React decide cómo aplicarlas al DOM.

Ejemplo

function Greeting({ name }) {
  return <h1>Hello {name}</h1>;
}

// render: <Greeting name="Erick" />

Repasar

Qué debes entender

El estado conserva información entre renders. Cada render observa un snapshot; actualizar state solicita otro render, no cambia la variable actual.

Cómo funciona

React asocia estado con la posición del componente en el árbol. El batching agrupa actualizaciones compatibles. El estado derivado debe calcularse cuando sea posible.

Ejemplo

const [count, setCount] = useState(0);
setCount(c => c + 1);
setCount(c => c + 1);

Repasar

Qué debes entender

React compara árboles de elementos para decidir qué actualizar. El tipo y la key ayudan a identificar la continuidad de una instancia.

Cómo funciona

Cambiar el tipo o la key puede desmontar y montar, reiniciando estado. Las keys deben ser estables entre renders y únicas entre hermanos.

Ejemplo

items.map(item => <Row key={item.id} item={item} />)

Repasar

Qué debes entender

Un Effect sincroniza React con un sistema externo: red, DOM imperativo, suscripciones o timers. No es el lugar por defecto para derivar estado.

Cómo funciona

El setup corre tras commit; antes de repetirlo React ejecuta cleanup del efecto anterior. En desarrollo Strict Mode ayuda a detectar efectos no simétricos.

Ejemplo

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, [tick]);

Repasar

Qué debes entender

La memoización evita repetir trabajo cuando sus entradas no cambiaron. Tiene costo y no corrige componentes impuros ni arquitecturas con estado mal ubicado.

Cómo funciona

React.memo compara props superficialmente; useMemo conserva un resultado; useCallback conserva la referencia de una función. React Compiler puede automatizar parte de esta memoización.

Ejemplo

const visible = useMemo(() => filter(items, query), [items, query]);

Repasar

Qué debes entender

Los Hooks permiten reutilizar lógica con estado. Deben llamarse en el nivel superior para conservar el mismo orden entre renders.

Cómo funciona

React asocia cada llamada con su posición. Un custom hook comparte lógica, no una única instancia de estado entre componentes.

Ejemplo

function useOnlineStatus() {
  const [online, setOnline] = useState(true);
  // suscripción + cleanup
  return online;
}

Repasar

Qué debes entender

Context distribuye un valor; Redux coordina estado global con flujo predecible; TanStack Query administra estado remoto, caché y sincronización. No resuelven el mismo problema.

Cómo funciona

Un cambio de valor en Context vuelve a evaluar consumidores. Redux permite suscripciones selectivas. Server state requiere políticas de stale time, refetch y deduplicación.

Ejemplo

Context: tema/autenticación
Redux: workflow global complejo
Query: datos del servidor

Repasar

Qué debes entender

Un formulario controlado usa state como fuente de verdad. Librerías como React Hook Form reducen renders y organizan validación, errores y registro de campos.

Cómo funciona

La decisión depende de complejidad. Para campos simples, controlado es suficiente; para formularios grandes, registro no controlado y schemas suelen escalar mejor.

Ejemplo

const { register, handleSubmit } = useForm();
<input {...register("email", { required: true })} />

Repasar

Qué debes entender

CSR renderiza principalmente en cliente; SSR produce HTML por solicitud; hydration conecta interactividad. Server Components renderizan en un entorno separado y reducen JavaScript cliente para partes no interactivas.

Cómo funciona

SSR y RSC son conceptos distintos. La hidratación requiere que el primer render cliente coincida con el HTML. Los límites cliente determinan cuánto JS se envía.

Ejemplo

Servidor: <ProductDetails />
Cliente: <AddToCartButton />

Repasar

Qué debes entender

Las pruebas deben dar confianza desde la perspectiva del usuario. Se consultan roles, nombres accesibles y texto antes que detalles internos.

Cómo funciona

El test renderiza, interactúa y observa resultados. user-event reproduce interacciones con mayor fidelidad que llamar handlers directamente.

Ejemplo

render(<Login />);
await user.type(screen.getByLabelText(/email/i), "a@b.com");
await user.click(screen.getByRole("button", { name: /entrar/i }));

Repasar