Chuleta de React
Una referencia de React 19 imprimible y con búsqueda — componentes, JSX, hooks, las nuevas API de Actions, contexto, refs y rendimiento. Gratis.
Componentes y JSX
12function App() { return <h1>Hi</h1>; }
Un componente de función que devuelve JSX
export default function App() {}
Exportar un componente por defecto
<Greeting name="Ada" />
Renderizar un componente con props
{1 + 2} or {user.name}
Insertar una expresión JS con llaves
<>{a}{b}</>
Fragment agrupa nodos, sin DOM adicional
<div className="card">
Usar className, no class, para CSS
{isOpen && <Menu />}
Renderizar condicionalmente con &&
{ok ? <Yes /> : <No />}
Elegir entre nodos con un ternario
{items.map(i => <li key={i.id}>{i.t}</li>)}
Renderizar una lista a partir de un array
function Btn({ label, onClick }) {}
Desestructurar las props en la firma
function Card({ children }) { return children; }
Leer el JSX anidado mediante la prop children
<input value={v} onChange={onChange} />
Input controlado vinculado al estado
Renderizado y configuración
10import { createRoot } from 'react-dom/client'
Importar la API de root del cliente
createRoot(document.getElementById('root')).render(<App/>)
Montar la app en el DOM
import { StrictMode } from 'react'
Importar el envoltorio StrictMode
<StrictMode><App /></StrictMode>
Sacar a la luz errores en desarrollo
import { hydrateRoot } from 'react-dom/client'
Importar la API de hidratación
hydrateRoot(el, <App />)
Asociar React al HTML del servidor
root.unmount()
Desmontar un root montado
import App from './App.jsx'
Importar un componente desde un módulo
<App {...props} />
Extender un objeto como props
export { Button, Card }
Exportar varios componentes con nombre
Estado y efectos
12const [count, setCount] = useState(0)
Declarar una variable de estado
setCount(c => c + 1)
Actualizar a partir del valor anterior
setUser(u => ({ ...u, name }))
Actualizar el estado de objeto de forma inmutable
useEffect(() => { run(); }, [dep])
Ejecutar un efecto cuando cambien las dependencias
useEffect(() => { /* once */ }, [])
Ejecutar un efecto solo al montar
useEffect(() => () => cleanup(), [])
Devolver una función de limpieza
const ref = useRef(null)
Mantener un valor mutable entre renders
const [state, dispatch] = useReducer(r, init)
Gestionar estado complejo con un reducer
const theme = useContext(ThemeContext)
Leer el valor de contexto más cercano
const memo = useMemo(() => calc(a), [a])
Memoizar un cálculo costoso
useLayoutEffect(() => {}, [])
Ejecutar de forma síncrona tras el layout
useSyncExternalStore(sub, get)
Suscribirse a un store externo
Hooks y APIs de React 19
12import { use } from 'react'
Importar la nueva API use
const data = use(promise)
Leer una promesa, suspende hasta estar lista
const theme = use(ThemeContext)
Leer contexto, permitido condicionalmente
const [state, action, pending] = useActionState(fn, init)
Rastrear estado, acción y pendiente
const [opt, addOpt] = useOptimistic(state, reducer)
Mostrar un valor optimista al instante
const { pending } = useFormStatus()
Leer el estado de envío del formulario padre
const [isPending, startTransition] = useTransition()
Marcar las actualizaciones como no urgentes
startTransition(async () => await save())
Ejecutar una Action asíncrona en una transición
const deferred = useDeferredValue(value)
Diferir un valor para mantener la UI responsiva
const id = useId()
Generar un id único y estable
<title>Page title</title>
Renderizar metadatos en cualquier parte del árbol
function Input({ ref }) {}
ref es una prop normal, sin forwardRef
Formularios y Actions
12<form action={handleSubmit}>
Pasar una función como Action de formulario
function handleSubmit(formData) {}
La Action recibe el FormData
formData.get('email')
Leer un campo del FormData
const [state, action] = useActionState(submit, null)
Conectar una Action al estado del componente
<form action={action}>
Usar la Action envuelta en el formulario
const [s, a, pending] = useActionState(fn, init)
Exponer una bandera de pendiente para la UI
return { error: 'Invalid' }
Devolver estado de error desde una Action
function Submit() { const { pending } = useFormStatus() }
Leer pending dentro del botón de envío
<button disabled={pending}>Save</button>
Deshabilitar el envío mientras está pendiente
import { requestFormReset } from 'react-dom'
Importar el ayudante de reseteo de formulario
requestFormReset(formEl)
Resetear un formulario no controlado
<form action={action}><Submit /></form>
Componer un formulario con Action y estado
Props y composición
10function Hi({ name = 'Guest' }) {}
Prop por defecto mediante desestructuración
function Box({ children }) { return children; }
Envolver contenido con la prop children
<Box><p>Inside</p></Box>
Pasar JSX como children
function List({ render }) { return render(); }
Patrón render prop
<List render={() => <Item />} />
Proporcionar una función de renderizado
<Input {...props} />
Reenviar todas las props con spread
const { id, ...rest } = props
Tomar una prop y pasar el resto
<Avatar {...rest} size="lg" />
Extender y luego sobrescribir una prop
function Btn(props: BtnProps) {}
Tipar las props con interfaces de TypeScript
<Slot label={<b>Hi</b>} />
Pasar JSX a través de una prop con nombre
Eventos
10<button onClick={handleClick}>
Asociar un manejador de clic
function handleClick(e) {}
Recibir el evento sintético
<input onChange={e => set(e.target.value)} />
Leer el valor de un input al cambiar
<form onSubmit={e => e.preventDefault()}>
Detener el envío por defecto del formulario
e.stopPropagation()
Evitar que el evento se propague
<li onClick={() => remove(id)}>
Pasar argumentos con un closure
<input onKeyDown={e => e.key === 'Enter'}
Manejar la pulsación de una tecla específica
<div onMouseEnter={hover}>
Escuchar eventos de puntero
e.currentTarget.value
Leer el elemento al que está asociado el manejador
<button onClick={() => {}} type="button">
Evitar el envío implícito del formulario
Listas y claves
10arr.map(x => <li key={x.id}>{x.t}</li>)
Renderizar un nodo por elemento
key={item.id}
Dar a cada elemento una clave estable
key={index}
Claves de índice solo para listas estáticas
users.map(u => <Card key={u.id} {...u} />)
Extender los campos del elemento como props
{list.length === 0 && <Empty />}
Mostrar un respaldo para listas vacías
import { Fragment } from 'react'
Importar Fragment para grupos con clave
<Fragment key={id}>{a}{b}</Fragment>
Un fragment con clave en una lista
{rows.filter(r => r.on).map(...)}
Filtrar antes de mapear
Keys must be unique among siblings
Por qué las claves ayudan a React a comparar listas
{[...Array(n)].map((_, i) => ...)}
Mapear un rango de longitud fija
Context
10const ThemeContext = createContext('light')
Crear un context con un valor por defecto
import { createContext } from 'react'
Importar la fábrica de context
<ThemeContext value={theme}>
Proporcionar un valor (sintaxis de React 19)
<ThemeContext value={theme}><App /></ThemeContext>
Envolver el árbol que lo lee
const theme = useContext(ThemeContext)
Leer el context con useContext
const theme = use(ThemeContext)
Leer el context con la API use
if (cond) { const t = use(Ctx); }
use puede leer el context condicionalmente
export const ThemeContext = createContext()
Exportar un context compartido
<Ctx value={{ user, setUser }}>
Pasar un objeto como valor
Avoid new objects each render
Memoizar valores para limitar los re-renders
Refs
10const inputRef = useRef(null)
Crear un contenedor de ref
<input ref={inputRef} />
Asociar la ref a un nodo
inputRef.current.focus()
Acceder al nodo DOM mediante current
function Field({ ref }) { return <input ref={ref} /> }
ref como prop, sin forwardRef
<Field ref={inputRef} />
Pasar una ref a un componente
useImperativeHandle(ref, () => ({ focus }))
Exponer una API imperativa
const setRef = node => { box = node; }
Usar una callback ref
<div ref={setRef} />
Asociar una callback ref
const count = useRef(0)
Almacenar un valor sin re-renderizar
ref={node => { return () => cleanup(); }}
Callback ref con limpieza (React 19)
Rendimiento
10const Memo = memo(Component)
Omitir el re-render cuando las props son iguales
import { memo } from 'react'
Importar el ayudante memo
const value = useMemo(() => calc(a), [a])
Cachear un valor calculado
const fn = useCallback(() => f(a), [a])
Cachear la identidad de una función
const Lazy = lazy(() => import('./Big.jsx'))
Dividir el código de un componente
import { lazy, Suspense } from 'react'
Importar lazy y Suspense
<Suspense fallback={<Spin />}><Lazy /></Suspense>
Mostrar un respaldo durante la carga
startTransition(() => setQuery(q))
Marcar actualizaciones de estado no urgentes
const slow = useDeferredValue(query)
Diferir la UI derivada costosa
React Compiler auto-memoizes
A menudo elimina la memoización manual
Varios y metadatos
10<Suspense fallback={<Loading />}>
Límite para contenido asíncrono
class ErrorBoundary extends Component {}
Capturar errores de renderizado (clase heredada)
<title>My Page</title>
Elevar el título del documento desde un componente
<meta name="description" content="..." />
Renderizar etiquetas meta en el head
<link rel="stylesheet" href="..." />
Elevar un enlace de hoja de estilos
<Comp key={id} />
Cambiar la key para volver a montar un componente
React.lazy(() => import('./Page.jsx'))
Importar de forma perezosa un componente de ruta
createPortal(node, container)
Renderizar en un nodo DOM diferente
{/* a comment */}
Escribir un comentario dentro de JSX
cleanup return in useEffect
Liberar siempre las suscripciones/temporizadores
Ninguna entrada coincide con “:q”.
¿Necesitas ayuda?
¿Encontraste un problema con esta herramienta? Avísanos.