Avanzadoreact
Hooks Avanzados
Domina useRef, useMemo, useCallback y useReducer para optimizar y controlar componentes complejos.
useRef: Referencias persistentes
useRef crea una referencia mutable que persiste entre renders sin causar re-renderizado. Se usa para acceder a elementos del DOM o almacenar valores mutables.jsx
1function InputAutoFocus() {
2 const inputRef = useRef(null);
3
4 useEffect(() => {
5 inputRef.current.focus();
6 }, []);
7
8 return <input ref={inputRef} placeholder="Escribe aqui..." />;
9}useMemo y useCallback
useMemo memoriza el resultado de un calculo costoso. useCallback memoriza una funcion para evitar re-creaciones innecesarias.jsx
1function TablaProductos({ productos, filtro }) {
2 // Solo recalcula cuando cambian productos o filtro
3 const filtrados = useMemo(() => {
4 return productos.filter(p =>
5 p.nombre.toLowerCase().includes(filtro.toLowerCase())
6 );
7 }, [productos, filtro]);
8
9 // Solo recrea la funcion cuando cambia onSort
10 const handleSort = useCallback((campo) => {
11 console.log("Ordenando por:", campo);
12 }, []);
13
14 return <Lista items={filtrados} onSort={handleSort} />;
15}useReducer: Estado complejo
useReducer es una alternativa a useState para logica de estado compleja con multiples sub-valores o transiciones.jsx
1const initialState = { count: 0, step: 1 };
2
3function reducer(state, action) {
4 switch (action.type) {
5 case "increment":
6 return { ...state, count: state.count + state.step };
7 case "decrement":
8 return { ...state, count: state.count - state.step };
9 case "setStep":
10 return { ...state, step: action.payload };
11 case "reset":
12 return initialState;
13 default:
14 return state;
15 }
16}
17
18function Contador() {
19 const [state, dispatch] = useReducer(reducer, initialState);
20
21 return (
22 <div>
23 <p>Valor: {state.count} (paso: {state.step})</p>
24 <button onClick={() => dispatch({ type: "increment" })}>+</button>
25 <button onClick={() => dispatch({ type: "decrement" })}>-</button>
26 <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
27 </div>
28 );
29}