¿Qué son los Hooks?
Los hooks son una nueva característica agregada a React (16.8), la cual consiste en un conjunto de funciones que nos permiten crear, acceder y modificar el estado en un componente stateless, dicha habilidad nos abre la puerta a un nuevo paradigma de programación en React totalmente distinto a como lo conocíamos, este artículo es la primera parte de varias que estaré preparando.¿Por qué se agregan los Hooks?
React se va moviendo a que los componentes sean escritos totalmente como funciones en lugar de clases, de hecho desde el sitio de React te recomiendan que no reescribas todos tus componentes pero que los nuevos que empieces de cero los hagas como Hooks. Esto debido a varias ventajas tales como:- Código mas fácil de testear y mantener (componentes como funciones separadas).
- Código mas legible.
- Programación funcional que se adapta mejor al paradigma de React, dado que en lugar de ser clases, son simplemente funciones que reciben y retornan valores.
- Ciclo de vida de componentes delegado en lugar de un sólo método para toda la lógica (componentDidMount).
- Aplicaciones mas ligeras, dado que la minificación de funciones es mucho más optima que la de clases en el resultado.
¿Cómo se utilizan?
Dado la siguiente clase componente:
import React, { Component } from 'react'
export default class Example extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
this.increaseCount = this.increaseCount.bind(this);
}
increaseCount() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={this.increaseCount}>
Click me
</button>
</div>
)
}
}
Podemos notar que utiliza el estado para realizar un conteo de clicks, para ello se auxilia del método increaseCount que accede al estado para aumentar el contador.
Dicho componente realizado con Hooks quedaría de la siguiente forma:
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Este componente funcional realiza las mismas operaciones, para ello utiliza el Hook useState que permitirá a nuestro componente funcional utilizar un estado.
Este componente funcional declara en el estado una propiedad llamada count que va a tener su función seter llamada setCount, para ello hace uso de useState(0), dónde el 0 es el valor inicial de dicha propiedad. Finalmente hace uso de la función set dentro del render del componente.
El Hook useState
Como vemos uno de los Hooks principales, es useState, la cual nos devuelve un valor con estado y una función para actualizarlo, tomando como valor inicial el primer argumento de ésta. Podemos declarar la cantidad de ellas que deseemos utilizando dicha función.
Tomemos como ejemplo el siguiente componente:
import React, { useState } from 'react';
function Example() {
// Declara una nueva variable de estado, la cual llamaremos “count”
const [message, setMessage] = useState('');
const [name, setName] = useState('Visitor');
return (
<div>
<div>Write your name</div>
<input type="text" onBlur={(e) => setName(e.target.value)} />
<button onClick={() => setMessage(`Welcome to Hooks ${name}.`)}>
Click me
</button>
<div>{message}</div>
</div>
);
}
En el estamos declarado 2 propiedades en el estado, message y name, en las cuáles se asigna su valor utilizando las funciones setName y setMessage.
Y ¿Qué hay del ciclo de vida?
Para el siguiente artículo veremos como trabajar con el Hook useEffect para realizar operaciones con efectos secundarios.
