What The Ho*k
@manucastrillonm
Hola mundo!
Mi nombre es
Manuela Castrillón
Co-organizadora de Pioneras developers y Codex UdeA
Desarrolladora front-end en Huge inc.
Pizza & Buñuelos
Que está mal con React?
Reutilización de lógica entre componentes
Mixins?
Render Props?
HOC?
Componentes gigantes
Uso de clases
Como lo solucionamos?
Hooks
Que son?
Funciones que permiten organizar la lógica en los componentes de forma aislada y ‘engancharlos’ al estado y ciclo de vida del componente
Muestrame código!!!
https://github.com/ManuCastrillonM/react-hooks
Hooks API
- useState
- useEffect
- useContext
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeMethods
- useMutationEffect
- useLayoutEffect
Hooks básicos
Hooks adicionales
Reglas de los Hooks
Utiliza los Hooks solo en el 'Alto nivel' de la aplicación
Llama a los Hooks solo desde funciones componentes
El nombre de los Hooks personalizados debe iniciar con 'use'
Para asegurarte de estar siguiendo las reglas...
Cuando utilizar Hooks?
-
constructor:
-
shouldComponentUpdate:
-
render:
-
componentDidMount, componentDidUpdate, componentWillUnmount:
-
componentDidCatch, getDerivedStateFromError, getSnapshotBeforeUpdate:
useState Hook
React.memo
Es el cuerpo de la función
UseEffect Hook
Gracias!
@manucastrillonm