React State con Hooks

Siempre que aprendemos algo nuevo, lo ideal es hacernos dos

preguntas...

¿Por qué esto existe?

¿Qué problema resuelve?

Estas preguntas nos ayudan a tener un entendimiento más profundo

de cualquier cosa que sea que estemos aprendiendo, en este caso
React y específicamente, el manejo del Estado con Hooks.
 Un poco de Historia

29/05/2013 - Primer Release de React en JS conf.

Lo interesante de esto es que desde el 2013, solo cambiaron algunas APis pero en líneas
generales la librería mantiene los mismo principios (State, Props, Component Composition)

En ese entonces JS no
tenía manejo de Clases
de manera nativa en el
lenguaje, la librería usaba
React.createClass() para
crear Componente y
getInitialState() para el
manejo del estado.
17/01/2015 - ES6 Class keyword en Javascript.

En ese momento el equipo de React tuvo que tomar la decisión de seguir con
React.createClass() o apegarse al standar.

Claramente optaron por la ultima opcion,

el 27/01/2015 React v0.13.0 Beta 1
en release notes, informa que no van a
continuar con una versiona propia del
sistema de clases, y prefieren usar la
manera de Javascript de crear classes.
O sea… se apagan al standar.

BIEN REACT!
Problemas con esta decisión
Cada decisión que tomamos tiene Pros and cons, en el caso de
React optar por el standar siempre es bueno, lo malo…. no todos los
desarrolladores React sabían cómo funciona JS.

Cuando extendemos una clase en ES6 en el

método constructor tenemos que llamar al
método super() para llamar al constructor de
la clase Padre, y en react habia que pasar
las props al método super.

Otro problema era el autobinding…

con createClass() react automagicamente
“bindeaba” todos los metodos a las
instancias del componente por nosotros.
Con ES6 class eso dejo de suceder, y
muchos programadores no tenían ni idea de
cómo funcionaba “this”
Class Fields

Con la introducción de class field proposals en Ecma todo eso

engorroso que tenia super y bind, se soluciono….

Entonces se solucionaron todos nuestros

problemas???
La idea de React es crear tu aplicación como bloquecitos de
componentes, que luego podes componer juntos.
Es el modelo de componentes de React, y que hace a React… React.

El problema no está el modelo de componentes, sino en cómo este

modelo es implementado.

Antes de los Hooks, los componentes que manejaban Estado tenían

una serie de métodos (Lifecycles) , que nos ayudan a ejecutar código
en momentos particulares del proceso.
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
1. componetDidMount()
2. componentDidUpdate()
3. componentWillMount()
4. shouldComponentDidUpdate()

No vamos entrar en detalle de que hacen cada uno de estos

métodos, simplemente saber que nos ayudaban a mantener
nuestro Ui y el esta sincronizados. El problema es que se duplica
mucha lógica.
 Otro Problema es compartir Logica no visual.

La comunidad introdujo dos conceptos.

1 - Higher Order Components (HOC)
La composición no
es sólo acerca de la STATE “En concreto, un componente de
UI, sino también de orden superior es una función que recibe un
la lógica, compartir componente y devuelve un nuevo
logica entre componente.”
componentes no era
tan copada. 2 - Render Props
Un componente con una render prop toma
una función que devuelve un elemento de
React y lo llama en lugar de implementar su
propia lógica de representación.

UI
El garron de esto que no es fácil de seguir, si no estas familiarizado con estas
técnicas puede traerte varios dolores de cabeza.
En Resumen….

1. Usar Classes para Componentes era lo más lógico.

2. Llamar al método Super(), era un garrón y This bastante complicado
3. Organizar los componentes por medios los métodos de ciclo de vida, en
ciertos casos nos hace duplicar lógica
4. No tenemos algo construido en la librería para manejar lógica no visual.

Necesitamos una nueva API que nos solucione estos problemas.

Que sea…
Fácil de
Simple Flexible Extensible
Componer
“A veces, la implementacion mas elegante es solo
una Función.

No un método.
No una Clase.
No un framework.

Solo una Función.” - John Carmack. Oculus VR CTO

Abracemos las Funciones. los Hooks son solo Funciones.
Todos estos hooks son los que vamos a ver en la cursada.
Creame, los van amar

1. useState - Para manejar simple estados

2. useReduce - para manejar estados mas complejos
3. useEffect - para los “side effects” (fetch, timers,
websockets…..etc)
4. useCallback y useMemo, para performance.
5. useRef - para persistir valores entre re-renders.

Los Hooks, mejoran la composición y el código reutilizable..

Ahora si…. veamos con un ejemplo nuestro primer Hook.