Cheat Sheet de React

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

Componente de función

const App = () => <h1>Hello</h1>;

Componente con arrow function

function Greet({ name }) {
  return <p>Hi {name}</p>;
}

Componente con props

export default App;

Exportar componente como default

<App title="Hi" count={5} />

Usar componente con props

<>
  <A /> <B />
</>

Fragmento (sin wrapper)

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

Renderizar lista con keys

{condition && <Alert />}

Render condicional (and)

{loading ? <Spinner /> : <Data />}

Render condicional (ternario)

<div className="btn primary">Click</div>

Clase CSS (className)

<div style={{color: 'red', fontSize: 14}}>X</div>

Estilos inline (objeto)

<button onClick={() => setN(n + 1)}>+</button>

Event handler

const [count, setCount] = useState(0);

Estado con valor inicial

setCount(count + 1);

Actualizar estado

setCount(c => c + 1);

Actualización funcional

setUser({...user, name: 'Alice'});

Actualizar objeto con spread

setItems([...items, newItem]);

Añadir a array estado

useEffect(() => {
  fetchData();
}, []);

Ejecutar al montar

useEffect(() => {
  ...
}, [dep1, dep2]);

Ejecutar cuando cambian deps

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

Effect con cleanup

const ref = useRef(null);
<input ref={ref} />

Ref del DOM

const renders = useRef(0);

Ref mutable (sin re-render)

const value = useMemo(() => expensive(x), [x]);

Memoizar cálculo

const fn = useCallback(() => doThing(x), [x]);

Memoizar callback

const theme = useContext(ThemeContext);

Consumir context

const [state, dispatch] = useReducer(reducer, initial);

Patrón reducer

function useDebounce(value, delay) { ... }

Hook personalizado

const [email, setEmail] = useState('');
<input value={email} onChange={e => setEmail(e.target.value)} />

Input controlado

<input type="checkbox" checked={on} onChange={e => setOn(e.target.checked)} />

Checkbox controlado

<form onSubmit={e => { e.preventDefault(); submit(); }}>

Manejador de submit

<input ref={inputRef} defaultValue="hi" />

Input no controlado (ref)

const ThemeContext = createContext('light');

Crear context

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

Proveer valor de context

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
  </Routes>
</BrowserRouter>

Rutas básicas

<Link to="/about">About</Link>

Enlace de navegación

const navigate = useNavigate();
navigate('/home');

Navegación programática

const { id } = useParams();

Leer parámetros de URL

const [params] = useSearchParams();

Leer query string

const Button = React.memo(({ onClick }) => ...);

Memoizar componente

const Heavy = lazy(() => import('./Heavy'));
<Suspense fallback={<Loader/>}><Heavy /></Suspense>

Code splitting con Suspense