react

• Software engineering
• Sistemas
• nextjs
• react native

Recursos principales

• curso React-50-proyectos
  • 50.Projects.for.React.and.the.Static.Web.Colby.Fayock.1.0.pdf
  • GitHub - 50 projects
  • Business & Real-World
  • GitHub - Business & Real-World
• curso Udemy React 18
  • readme fundamentals
  • npx create-react-app@latest nombre (mejor usar Vite)
  • estructura: root injection, entry point src/index.js, gitignore, package.json/lock, scripts
  • nodejs-Instalar librerías y borrar node modules
  • componentes funcionales (React, ReactDOM, createRoot, render)
  • extensiones vscode Sistemas
    • snippets react
    • rcc, rafce, rfce
  • createElement() vs JSX return()
  • fragment, camelCase
• github curso react v3
• accomazzoFullstackReactComplete2017
• React-apuntes-libro-accomazzo
• React-full-course-2022 ♥
• React-ReactJSJobseekers
• react-old

Entrevistas React

• Entrevista Semi Senior (MR s0da)
  • instalar eslint, Vite recomendado, snippets
  • prueba técnica: contador, listado, buenas prácticas
• Qué te preguntan en React (2024-2025)

Tipado con TypeScript en React

• ComponentProps typescript
  • ComponentProps para interfaces
  • destructuring con spread vs rest
  • typeof para props derivadas

Conceptos React esenciales

• state, actions, context, refs
• Redux vs context
• suspense & lazy loading
• providers groups
• patrones y optimización de componentes
• update algorithm / reconciliación

Tools

• react-scan

React 19 – Conceptos avanzados

Manejo de estados

• Context
  • state global
  • useReducer
    • action con payload
    • single source of truth
• Redux
  • Redux Toolkit
  • RTK Query
  • múltiples entidades
• Comienza – SWR
• state with revalidate
• Zustand
• Jotai
  • atoms
• Observables (RxJS - Introduction)
  • behavior subject

Enrutamiento y navegación

• react-router-dom
• query params
• diferencia entre nodo DOM y nodo JSX

Hooks de optimización

• useMemo
• useRef
• useCallback
• memo

Detección de cambios y render

• strict mode
  • bootstrap doble renderizado
• re-renders y triggers
• diferencia estado vs parámetros
• commit phase

Compartir data entre componentes

• padre → hijo
  • composition pattern
  • prop drilling
• hermanos
  • observers
  • services
  • context
• singleton pattern
  • errores de carrera
• observables
• provider dependency

Batching de estado

• setState
• usar callback para estado previo

Hooks principales

• useState
• useEffect
  • para side effects externos
  • no para reaccionar a estados internos del mismo componente
  • dependencias
  • async en efectos

Formularios

react-hook-form

• useForm
• validación
  • zod → schemas
  • yup

Arquitecturas en React

• SCREAM, CLEAN
• container vs presentational components
• Computer Science

Consumo de APIs

• axios vs fetch
• Backend
• interrupción con tokens/headers
• api
• interceptores

Otros conceptos avanzados

• container vs componente
• Portals
• HOC (High Order Components)
• custom hooks
  • lógica reutilizable
  • encapsulación
  • useState/useReducer internos
• suspense vs lazy
  • placeholders
• error boundary
• CSS modules

Pruebas técnicas – ejemplos

• scroll infinito con lazy load
• IntersectionObserver
• fetch a APIs con dependencias entre estados
• end to end tests
• configurar entorno (Vite)
• Automatizacion y Build
  • npm react & react-dom
• linters
• flujos complejos con useEffect

apuntes react

UI Intro

• Named & default exports
• JSX → usar converter
• Expresiones: objetos ``, strings, concatenación con +
• Props, destructuring y spread {...props}, {children}
• Ejercicios: extraer componentes, controlar tamaño thumbnail, usar children

Renderizado condicional

• return temprano, null
• DRY
• ternary, && (solo usarlo con boolean a la izquierda)
• asignar JSX a variables
• JSX dentro de la condición
• Ejercicios: importance &&, refactor if → variables/obj

Listas y keys

• map, filter, keys con {person.id}
• usar <Fragment key={person.id}>
• crypto.randomUUID(), uuid
• evitar key={Math.random()} o index
• Ejercicios:
  • separar listas, nested maps
  • <Recipe {...recipe} key={recipe.id}>
  • shortcut props
  • keys en contexto
  • listar con separador condicionado

Pureza

• side effects pasando guest como prop
• read-only
• <React.StrictMode>
• mutación vs inmutabilidad
• event handlers: https://react.dev/learn/responding-to-events
• useEffect
• memo
• “set” state
• Ejercicios: reloj, perfil, mutación → slice()
• Métodos mutables: push, pop, reverse, sort
• No mutables: slice, filter, map

UI Tree

• Dependencia hijos/data
• conditional rendering
• top-level y leaf components
• module dependency tree
• bundler: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem

Interactivity

• manejar interacciones, actualizar estado, cambiar UI
• useState
  • Trigger → Render → Commit
  • state snapshot

Queue de estados

• series de actualizaciones
• updater: setScore(s => s + 1)
• copiar objetos y arrays con ...
• onChange, ejemplo:
  • setPerson({ ...person, name: e.target.value });

Immer

• https://github.com/immerjs/use-immer
• import { useImmer } from 'use-immer';
• useImmer({})
• updatePerson(draft => { draft.name = e.target.value })
• arrays con propiedad seen

Event Handlers

• leer event, props, callbacks
• <button onClick={handleClick}>
• onClick={() => alert(message)}
• pasar handler: onClick={onClick}
• custom props: onClick={onSmash}
• propagación:
  • onScroll no propaga
  • detener con e.stopPropagation()
• captura:
  • onClickCapture={() => {}}
• alternativa a propagación: pasar handlers a padres
• e.preventDefault()
• side effects & state

Estado como memoria del componente

• hook use solo en top-level
• useState
• variables locales como let sculpture = sculptureList[index]
• formularios → mejor un objeto de estado
• orden de los hooks → fijo
• lista de estados como array interno
• estado aislado, privado
• compartir estado: https://react.dev/learn/sharing-state-between-components
• Ejercicios:
  • carrusel con setIndex((index === sculptureList.length - 1 ) ? 0 : index + 1 )
  • prev/next flags
  • handlers clausuran variables
  • evitar estados innecesarios

Render Cycle

• Trigger Render Commit
• Initial render
• createRoot
• setState → queue render
• render recursivo
• pure calculations
• strict mode → errores
• rendimiento anidado: https://reactjs.org/docs/optimizing-performance.html
• DOM API: appendChild
• repaint browser

Snapshot de estado

• setState encola y persiste snapshot
• async no rompe la referencia temporal

Batching y series de estados

• batching en event handlers
• setNumber(n => n + 1)
• reemplazar inmediatamente: setNumber(number + 5)
• updater debe ser pura
• naming según estado
• ejercicio: calcular estado final

Objetos en estado

• mutación → no
• setPosition({x: e.clientX, y: e.clientY })
• mutación local
• spread shallow:
  • setPerson({ ...person, [e.target.name]: e.target.value })
• objetos anidados:
  • setPerson({...person, artwork: {...person.artwork, title: e.target.value}})
• evitar anidar profundamente: https://react.dev/learn/choosing-the-state-structure#avoid-deeply-nested-state
• Immer:
  • updatePerson(draft => { draft.artwork.city = 'Lagos' })
• Ejercicios:
  • actualizar shape con coords
  • immer para coords y color

Arrays en estado

• Métodos mutables:
  • push, unshift, pop, shift, splice, assign, reverse, sort
• No mutables:
  • concat, spread [...arr], filter, slice, map
• Ejemplos:
  • setArtists([...artists, {id: nextId++, name}])
  • artists.filter(a => a.id !== artist.id)
  • reverse con copia:

const nextList = [...list]
nextList.reverse()
setList(nextList)

• mutación accidental de objetos compartidos:
  • evitar modificar items referenciados
  • copiar item:
    return { ...artwork, seen: nextSeen }
• arrays anidados → immer:
  • updateMyList(draft => { draft.find(a => a.id === id).seen = nextSeen })

Ejemplo de Código – Actualizar estado con spread

function Form() {
const [person, setPerson] = useState({ name: '', city: '' })

function handleChange(e) {
	setPerson({
		...person,
		[e.target.name]: e.target.value
	})
}

return (
	<input
	 name="name"
	 value={person.name}
	 onChange={handleChange}
	/>
)
}

`

Ejemplo – Arrays sin mutación

function addArtist(name) {
setArtists([...artists, { id: crypto.randomUUID(), name }])
}

apuntes react para estados

1. Manejar estado (State Management)

1.1. Reaccionar al input con el state

• Declarar explícitamente qué mostrar: estados visuales, mensajes, loaders, errores.
  • Útil crear living styleguides que muestren todos los estados en una sola página.
• Accionar cambios del estado:
  • Inputs humanos.
  • Cambios automáticos (timers, peticiones, etc.).
• Representar el estado en memoria con useState:
  • Añadir primero los estados visuales necesarios.
  • Borrar lo redundante o derivable → evitar “paradojas de estado”.
    • ❌ isEmpty innecesario → usar: answer.length === 0
    • ❌ isError duplicado → usar: error !== null
  • Reducir múltiples variables que describen la misma realidad en un solo estado derivado usando reducers u objetos de estado.

1.2. Reducers para unificar múltiples estados

• Evitan contradicciones entre estados.
• Un solo objeto representa el estado global del componente.
• Útil cuando:
  • Varias variables dependen entre sí (ej: error no nulo sin sentido si status === 'success').
  • Se tienen múltiples transiciones de estado complejas.

1.3. Event handlers y estado

• Handlers actualizan el estado de forma predecible.
• Considerar:
  • Evitar re-render innecesario.
  • Orden correcto de actualizaciones.

1.4. Ejercicios importantes

• Activar una clase CSS según estado.
  • Manejar eventos superpuestos con e.stopPropagation().
  • Otra solución: devolver dos JSX hermanos (no anidar si no es necesario).
• Editor de perfil:
  • Refactorizar comportamiento usando vanilla JS (updateDOM) antes de pasarlo a React para clarificar la lógica.

---

2. Elegir la estructura del estado (State Shape)

2.1. Agrupar en un objeto

• Cuando varias partes del estado evolucionan juntas.

2.2. Evitar contradicciones de estado

• Reemplazar múltiples booleanos por un estado finito ('typing', 'sending', 'sent').
• Ejemplo correcto:

	const [status, setStatus] = useState('typing')
	```


### 2.3. Redundancia → calcular siempre que sea posible
- No reflejar (mirroring) props en el estado.
	- Solo permitido cuando es un valor “initial” o “default” que luego se ignora.
- No duplicar datos:
	- ❌ Guardar `selectedItem`
	- ✔ Guardar `selectedId`, luego hacer `items.find()`

### 2.4. Objetos anidados profundos → normalizar
- Aplanar estructuras:
	- Ejemplo: cada `place` tiene `childIds`.
	- Usar claves dinámicas y arrays de IDs.
- Estados efímeros (ej: hover) deben vivir **cerca del componente que los usa**.

### 2.5. Ejercicios relevantes
- Cronómetro:
	- No duplicar tiempo si ya viene en props.
- Lista de paquetes:
	- Arreglar contador redundante.
- Resaltar letras:
	- Problema: desaparece el resaltado cuando actualizas el array → estado duplicado.
	- Solución: guardar solo el `id` en el estado; usar `letter.id` en handlers.
- Selección múltiple:
	- Array de IDs → `includes()`, `.filter()`
	- Si es muy grande → usar `Set`
		- Métodos: `.has()`, `.add()`, `.delete()`, `.size`

---

## 3. Compartir estado entre componentes

### 3.1. Lifting State Up
- Subir el estado al padre.
- Pasar:
	- Datos como props.
	- Handlers como props.
- Controlados vs no controlados:
	- **Controlled**: UI reflejada desde el estado.
	- **Uncontrolled**: DOM mantiene el estado.

### 3.2. Ejemplo: Accordion
- Solo un panel activo.
- Usar `activeIndex`.
- Pasar handler a los hijos.
- Mantener un **single source of truth**.

### 3.3. Ejercicios
- Mantener listas en sync.
- Renderizar según estado del padre.

---

## 4. Preservar y resetear estado

### 4.1. Posición en el árbol
- React preserva estado cuando el componente:
	- Mantiene el mismo tipo.
	- Mantiene la misma posición en el render tree.
- No preserva cuando cambia:
	- Tipo de componente.
	- Posición.
	- Key.

### 4.2. Forzar reset de estado
- Cambiar `key`:
	
```jsx
	<Chat key={email} />
	```


### 4.3. Preservar estado de componentes eliminados
- Ocultarlos con CSS en lugar de desmontarlos.
- Aplanar estado:
	- Guardar mensajes pendientes.
	- Cargar estado inicial desde `localStorage`.

### 4.4. Ejercicios
- Input desaparece:
	- Usar `&&`, ternary o `{null}` para controlar render.
- Intercambiar campos del formulario:
	- Añadir keys para forzar reset.
- Limpiar imágenes al cambiar URL:
	- Cambiar `key` en el `<img>`.
- Lista con estado equivocado al reordenar:
	- Usar `id` como key, nunca el índice.

---

## 5. Extraer lógica compleja a un reducer (`useReducer`)

### 5.1. Caso: TaskApp
- Acciones representadas como objetos:
	
```js
	dispatch({ type: 'add', text: 'Nueva tarea' })
	```


### 5.2. Reducer
- Firma:
	
```js
	function reducer(state, action) {
		switch(action.type) {
			case 'add':
				return [...]
			// ...
		}
	}
	```


### 5.3. Conexión con `useReducer`
- Argumentos:
	- Reducer.
	- Estado inicial.
- Retorno:
	- `state`, `dispatch`.

### 5.4. Analogía
- Similar a `Array.prototype.reduce`:
	- Estado = acumulador.
	- Acción = item que modifica el acumulador.

---

## 6. Pasar datos profundos con Context (`useContext` + `createContext`)
- Evitar “prop drilling”.
- Ideal para:
	- Tema visual.
	- Usuario autenticado.
	- Config global.
- No abusar: puede dificultar el control de renders.

---

## 7. Escalar estado con Reducer + Context
- Combinar ambas técnicas:
	- Reducer controla lógica.
	- Context distribuye estado y dispatch.
- Patrón estándar:
	- `StateContext`
	- `DispatchContext`
- Evitar redundancias como `error !== null` cuando ya hay un `status` bien definido.




# apuntes react docs parte 2 — conceptos avanzados no cubiertos

## 1. Renderización y sincronización del estado

### 1.1. Cómo React decide renderizar
- Cada actualización de estado programa un **render**, pero React puede:
	- Agrupar (batching) múltiples actualizaciones.
	- Omitir renderizados si el resultado no cambia visualmente.
- React ejecuta el render en **modo concurrente**, pudiendo pausar, interrumpir o descartar renders antes de comprometerlos al DOM.

### 1.2. Batching automático
- React agrupa actualizaciones de estado dentro de eventos, promesas y efectos.
- Útil para evitar renders extra.
	
```js
	setA(1)
	setB(2)
	// React lo agrupa en un único render
	```


### 1.3. Transiciones (useTransition)
- Permiten diferenciar:
	- Actualizaciones **urgentes** (ej: escribir en un input).
	- Actualizaciones **no urgentes** (filtrar lista grande).
- Evita que la UI se bloquee.
	
```js
	const [isPending, startTransition] = useTransition()
	startTransition(() => setFilter(value))
	```


---

## 2. Persistencia y sincronización externa del estado

### 2.1. Efectos asincrónicos con `useEffect`
- Se usan para **sincronizar React con sistemas externos**, no para calcular estado derivado.
- Casos comunes:
	- Subscribirse a APIs.
	- Conectar WebSockets.
	- Timers y observers.
	- Leer/escribir en `localStorage`.

### 2.2. Efectos bien diseñados
- Deben:
	- Declarar dependencias correctas.
	- Limpiar suscripciones en el return del efecto.
- Evitar:
	- Efectos redundantes por mala dependencia.
	- Guardar funciones o datos derivados en el estado.
	- Usar efectos para lógica que pertenece al render.

### 2.3. Efectos no reactivos
- Usar `useEffectEvent` (nuevo API) para evitar capturar valores obsoletos sin re-trigger del efecto.
- Útil en animaciones, listeners, integraciones.

---

## 3. Sincronización de referencias y el DOM (useRef, useLayoutEffect)

### 3.1. `useRef`
- Mantiene valores que **no causan render**.
- Casos:
	- Guardar timeouts.
	- Guardar valores previos.
	- Acceder a elementos del DOM.

### 3.2. `useLayoutEffect`
- Corre **antes del paint visual**, útil para medir elementos.
- Riesgo: bloquea la UI si se abusa.
- Ejemplo:
	- Lectura de tamaño de un nodo.
	- Calcular posiciones previas a animaciones.

---

## 4. Patrones de renderizado avanzado

### 4.1. Keyed renders y reconciliación
- React usa keys para:
	- Mantener estabilidad del estado.
	- Reordenar listas.
- Conceptos:
	- **Reconciling**: React intenta reusar nodos con la misma key.
	- Cambiar keys → fuerza recreación de subárboles completos.
- Buenas prácticas:
	- Siempre usar IDs únicos.
	- Evitar keys generadas por índice en listas dinámicas.

### 4.2. Memoización
- Evitar trabajos repetitivos:
	- `useMemo()` → memoriza valores derivados.
	- `useCallback()` → memoriza funciones y estabiliza props.
	- `React.memo()` → memoriza componentes.
- Beneficios:
	- Menos renders.
	- Props estables para dependencias de efectos.

### 4.3. Cuando **NO** usar memoización
- Si la computación no es costosa.
- Si el componente es pequeño.
- Si genera más complejidad que beneficio.

---

## 5. Patrones para estado global

### 5.1. Reducer + Context escalable
- Dividir:
	- `StateContext`
	- `DispatchContext`
- Evita renders excesivos en árboles grandes.
- Patrón recomendado para:
	- Apps medianas.
	- Lógica compleja compartida.

### 5.2. Estado global con librerías
Sin repetir nada visto anteriormente, estas librerías introducen **conceptos nuevos**:

- **Zustand**
	- Estado global minimalista basado en *stores*.
	- Selectores para evitar renders innecesarios.

- **Jotai**
	- Estado basado en *átomos*, cada átomo maneja su propio renderizado.

- **Redux Toolkit**
	- Flujo unidireccional, reducers puros.
	- Concepto de *slices*, devtools y acciones serializables.

---

## 6. Suspense y carga asíncrona

### 6.1. Suspense para datos
- React puede **pausar el render** hasta que un recurso esté disponible.
- Se combina con:
	- loaders del router.
	- data-fetching reactivo.

### 6.2. Boundaries
- Permiten manejar errores y estados de carga en secciones específicas del UI.
- Un error no tumba toda la app.

### 6.3. Streaming Server Rendering
- React puede enviar HTML en chunks.
- Comienza a renderizar antes de tener todos los datos.
- Especialmente útil en React Server Components (RSC).

---

## 7. Patrones de UI reactiva moderna (sin repetición de lo previo)

### 7.1. Sincronizar UI con máquina de estados ligera
- La UI sigue estados finitos:
	- `'idle'`
	- `'loading'`
	- `'loaded'`
	- `'error'`
- Reemplaza booleanos descoordinados.

### 7.2. Optimizaciones UI
- Evitar renders “cascada” usando memoización selectiva.
- Dividir componentes grandes en subcomponentes puros.
- Preferir pasar valores derivados, no estructuras completas.

### 7.3. UI prediction
- React concurrent puede preparar pantallas “en segundo plano” antes de mostrarlas.
- Minimiza flashes o saltos.

---

## 8. Testing del estado (conceptos nuevos)

### 8.1. Testear componentes con estado
- Renderizar el componente y simular eventos.
- Usar:
	- `@testing-library/react`
	- Interacción realista: `userEvent`

### 8.2. Testear reducers
- Reducers son funciones puras → testear con inputs/outputs.
- No requiere montar el componente.

### 8.3. Testear efectos
- Mockear APIs externas.
- Asegurar limpieza correcta (`cleanup`).

---

## 9. Debugging y herramientas

### 9.1. React DevTools
- Inspeccionar:
	- Árbol de componentes.
	- Estado actual.
	- Hooks.
	- Render reasons.
- “Highlight updates” para ver renders innecesarios.

### 9.2. Profiler
- Medir:
	- Tiempo de render.
	- Renders repetidos.
	- Componentes costosos.

---

## 10. Arquitectura recomendada para escalar estado

### 10.1. Estado local → Reducer → Context → Librería global
Evolución posible:
1. `useState`
2. `useReducer` en componentes con lógica compleja
3. Reducer + Context para secciones de la app
4. Librería de estado para grandes aplicaciones

### 10.2. Separación de dominios
- Estado UI.
- Estado de datos.
- Estado global de sesión.
- Estado derivado (no se almacena, se calcula).

### 10.3. Estado persistente
- Persistencia con:
	- localStorage.
	- IndexedDB.
	- Librerías de *hydration* (Zustand persist, Jotai storage).


# React roadmap

## Recursos
- [roadmap](https://roadmap.sh/react)

---

## Resumen general del camino en React
- componentes y props
- vistas y JSX
- comunicación entre componentes
- eventos
- hook `useState`
- hook `useEffect`
- ciclo de montaje y desmontaje
- HTTP y AJAX
- promesas, async/await, manejo de errores
- formularios, eventos y envío a la vista
- router y navegación
- rutas, subrutas y componentes anidados
- hooks, refs, memo, context
- validación y formularios (Formik, React Hook Form)
- consumo de API REST
- stack MERN (Node + Express + Mongo)
- autenticación con JWT

---

## Fundamentals
- Crear una React App (SPA)
- Function Components
- Class Components
- JSX
- Props
	- son **read-only**
	- un componente **no puede modificar sus props**
- State
	- permite cambiar la salida con el tiempo durante re-renders
- Hooks esenciales
	- `useState`
	- `useEffect`
	- manejo del ciclo de vida mediante hooks
- Conditional rendering
- Lists & Keys
- Formularios básicos (controlled components)
- Composition vs Inheritance

---

## Advanced Topics
- HTTP Requests
	- contexto de petición y manejo de estados de carga
	- Context API para compartir datos
	- Refs para manipulación de DOM o valores persistentes
	- Error Boundaries
	- Portals
- Métodos GET, POST
- Hooks avanzados
	- `useContext`
	- `useReducer`
	- `useRef`
	- `useMemo`
	- `useCallback`
	- Custom Hooks
- Higher Order Components (HOC)
- Render Props
- Reconciliation (algoritmo de comparación de React)

---

## Ecosystem

### State Management
- Redux
- MobX
- Recoil
- Apollo Client (GraphQL State Management + Cache)
- React Query / TanStack Query

### Routing
- React Router
- React Location

### Styling
- Styled Components
- Emotion
- Tailwind CSS
- Chakra UI
- Material UI
- Ant Design

### Forms
- Formik
- React Hook Form

### Testing
- Jest + React Testing Library
- Cypress

### Misc
- TypeScript
- Storybook para documentar componentes
- React i18Next (i18n)
- Firebase / Supabase (auth + backend as a service)
- Librerías prácticas:
	- data visualization (Recharts, Victory, Nivo)
	- drag & drop (dnd-kit, react-beautiful-dnd)
	- date pickers
	- skeleton loaders / shimmers
	- animaciones (Framer Motion, React Spring)

---

## Next Steps
- Gatsby (static site generation)
- Next.js (server rendering + RSC)
- Remix (full stack web framework)
- React Native (apps móviles)


# Omnivore react


```base
type: list
name: "Notas con #react en Omnivore"
order:
  - property: date_saved
    direction: desc
columns:
  - file.name
  - date_saved
filters:
  and:
    - file.inFolder("Omnivore")
    - file.hasTag("react", "React")
views:
  - type: table
    name: Table
    sort:
      - property: file.mtime
        direction: DESC