useEffect() y useState(): ¿Es buena idea actualizar todo a Hooks?

Tags:

hooks
javascript
react

5 minutos de lectura ☕☕

Es bien conocido que mientras más estemos escribiendo JavaScript plano sin hacer que Babel compile tantas cosas nuestro código estará mucho más optimizado y será más rápido. Para esto llega React Hooks, disponible desde la versión >=16.8.0 reemplazando prácticamente todo lo que habíamos usado anteriormente con componentes de tipo clase, solo hay dos métodos que no han podido reemplazar los Hooks aún: componentDidCatch y getDerivedStateFromError 😔.

Normalmente nosotros hacemos un componente de tipo clase de esta manera:

import React, { Component } from 'react'
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
export default Counter

El código aparte de que se ve largo 😒 hace que Babel transpile más cosas innecesarias, que el código se haga más largo y que pese mucho más nuestro JavaScript final. Para hacer que todos estos puntos mejoren llegaron los Hooks, haremos el mismo código pero usando el Hook de useState():

import React, { useState } from 'react';
export default function Counter () {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

¿Muchísimo más condensado el código cierto 😨😱? Aparte de esto estamos usando prácticamente JavaScript plano esto hace que Babel no tenga que compilar aún más código innecesario, ¡e incluso podemos hacer el estado de nuestros inputs de los formularios con Hooks! 😎💪

Podemos hacerlo de la siguiente manera:

import React, { useState } from 'react'
export default function ContactForm () {
// Declaramos primero inputs el estado y setInputs la función, y lo igualamos a un objeto
const [inputs, setInputs] = useState({})
const handleChange = e => {
// Con esto accederemos a las propiedades del evento de forma asíncrona
e.persist()
// Ahora llamamos a la función, le pasamos el estado actual y le pasamos también el nombre del campo y su valor. Lo guardará justamente como un objeto
setInputs(inputs => ({ ...inputs, [e.target.name]: e.target.value }))
}
return (
<form>
{/*...*/}
<label htmlFor='name'>Name</label>
<input type='text' name='name' onChange={handleChange} />
{/*...*/}
</form>
)
}

Gracias a esto podemos hacer que nuestras aplicaciones estén más actualizadas, mucho más rápida para nuestros clientes y utilizando las últimas características. Ahora, ¿qué pasa con componentDidMount() el cual usamos para mayormente obtener data? Ahora es mucho más fácil:

import React, { useEffect } from 'react'
export default function Home () {
// Simplemente llamaremos a la función useEffect() y dentro podremos lo que necesitamos hacer cuando el componente cargue
useEffect(() => {
miFuncionQueHaceFecthDeData()
}, [])
}

¡Listo eso es todo 😎! ¿Qué es el array que coloqué al final? Eso sirve para decirle a ese useEffect() si depende de algún estado para funcionar y también si no se le coloca ese array aunque sea vacío entrará en un bucle infinito; así asegura que se ejecute una vez y solo cuando se necesite.

¿Es recomendable actualizar todo a Hooks? Desde mi punto de vista, si, ¿por qué? Mientras menos código que tenga que compilar Babel será mucho mejor para tu negocio o aplicación. ¿Lo mejor? Aprendes a usar mucho mejor JavaScript 💪