Hace aproximadamente un mes hubo un gran revuelo en la comunidad de React, dado que en el marco de la React Conf 2018 el equipo detras de React presento una nueva característica llamada Hooks, la cual en el momento de estar escribiendo este post esta en una versión experimental pero se espera que para la version 16.7 de React ya se integre oficialmente a la API de React.
Los hooks son una nueva forma de usar características propias de React como el estado o el ciclo de vida sin la necesidad de escribir una clase que es como se hacia hasta ahora, lo cual no significa que el equipo detras de React piense dejar de usar clases en un futuro cercano ya que hay una gran multitud de proyectos que usan componentes creados de esta manera.
Para ilustrar como funcionan los hooks, voy a crear una serie de ejemplos donde primero lo hare usando clases y despues usando los nuevos hooks de React.
Primero veamos este ejemplo
1import React, { Component } from 'react' 2 3class Door extends Component { 4 constructor(...props) { 5 super(...props) 6 this.state = {open: false} 7 } 8 9 render() { 10 const { open } = this.state 11 return ( 12 <div> 13 <h1>La puerta esta {open ? 'abierta' : 'cerrada'}</h1> 14 <button onClick={() => this.setState({ open: !this.state.open })}> 15 {open ? 'Cerrar' : 'Abrir'} 16 </button> 17 </div> 18 ) 19 } 20} 21 22export default Door 23
En este sencillo ejemplo solo declaramos un estado en el constructor de nuestro componente, renderizamos un mensaje diciendo que una puerta esta abierta o cerrada dependiendo del valor de la propiedad open de nuestro estado y a su vez estamos usando un botón para modificar el valor de nuestro estado.
Ahora realicemos este mismo ejemplo usando los hooks de React
1import React, { useState } from 'react' 2 3const Door = () => { 4 const [open, setOpen] = useState(false) 5 6 return ( 7 <div> 8 <h1>La puerta esta {open ? 'abierta' : 'cerrada'}</h1> 9 <button onClick={() => setOpen(!open)}> 10 {open ? 'Cerrar' : 'Abrir'} 11 </button> 12 </div> 13 ) 14} 15 16export default Door 17
En este código primero que todo estamos usando el hook useState() el cual nos permite usar la característica de estado en este componente a pesar de no ser una clase, este hook nos recibe como parámetro el valor por defecto que queremos que tenga nuesto estado y nos devuelve un array con dos posiciones, la primera posición es el valor que le asignaremos por defecto en este caso false, y como segunda posición nos devuelve la función que usaremos para actualizar este valor en nuestro componente, despues retornamos nuestro jsx y aqui como se hizo anteriormente usamos un botón para actualizar el valor de open y dependiendo del valor que vaya tomando se renderiza que la puerta esta abierta o cerrada.
Otra de las características que se suelen usar mucho en el desarrollo con React es el ciclo de vida de un componente, para lo cual tambien se pueden usar los hooks.
primero que todo hagamos un ejemplo usando clases
1import React, { Component } from 'react'; 2 3class DataList extends Component { 4 constructor(...props) { 5 super(...props) 6 7 this.state = { posts: [] } 8 } 9 10 componentDidMount() { 11 this.getPosts() 12 } 13 14 getPosts() { 15 fetch('https://jsonplaceholder.typicode.com/posts') 16 .then(response => response.json()) 17 .then(posts => this.setState({ posts })) 18 .catch(err => console.log(err.message)) 19 } 20 21 render() { 22 const { posts } = this.state 23 return ( 24 <ul> 25 {posts.map(post => <li key={post.id}>{post.title}</li>)} 26 </ul> 27 ); 28 } 29} 30 31export default DataList; 32
En este sencillo ejemplo solo estamos declarando un estado posts como un array, despues en el componentDidMount() que es un método del ciclo de vida que se ejecuta cuando el componente se renderizo, estamos haciendo una peticion a la api de jsonplaceholder, para traernos una lista de posts usando el método getPosts() que nosotros mismos declaramos, actualizamos el estado de los posts y los renderizamos como una lista en el método render().
Ahora hagamos el mismo ejemplo con los React hooks
1import React, { useEffect, useState } from 'react'; 2 3const DataList = () => { 4 const [posts, setPosts] = useState( [] ) 5 6 function getPosts() { 7 fetch('https://jsonplaceholder.typicode.com/posts') 8 .then(response => response.json()) 9 .then(posts => setPosts(posts)) 10 .catch(err => console.log(err.message)) 11 } 12 13 useEffect(() => { 14 getPosts() 15 }, []) 16 17 return ( 18 <ul> 19 {posts.map(post => <li key={post.id}>{post.title}</li>)} 20 </ul> 21 ) 22} 23 24export default DataList 25
En este ejemplo primero que todo estamos definiendo un nuevo estado con useState(), el cual sera por defecto un array vacio, despues estamos definiendo la función getPosts() que sera la encargada de hacer la petición a la API y usando el hook useEffect() es que ejecutamos la función que nos traera los posts, este hook useEffect() nos permitira reemplazar los métodos del ciclo de vida componentDidMount(), componentDidUpdate() y componentWillUnmount(), en este ejemplo estamos usando el useEffect() como si se tratara del componentDidMount(), esto debido al array vacio que le estamos pasando como segundo parámetro, con esto le estamos indicando que solo se va a ejecutar en una ocasión, despues simplemente renderizamos estos nuevos articulos cuando retornemos.
Como pueden ver usar los React hooks nos permiten tener componentes muchos más limpios, sin la necesidad de utilizar una clase, en próximos articulos te mostrare los otros usos de useEffect() y como crear custom hooks lo cual nos permitira reutilizar lógica entre componentes de una forma muy óptima, hasta la próxima.