Que es un hook?

Los hooks salieron en la versión 16.8 de React en Febrero de 2019. Son funciones especiales que existen en React que nos permiten manejar el ciclo de vida dentro de los componentes funcionales, esto hace que no sean necesarias las clases. Las clases pueden llegar a confundirnos, porque realmente no son clases como tal, son prototipos, y éstas además suponen un peor rendimiento a ti aplicación. Todos los hooks por convención empiezan con use. React te ofrece una serie de hooks de forma nativa, pero puedes usar hooks de librerías externas o incluso crear tus propios hooks.

Ventajas de los Hooks

• Son 100% retrocompatibles: Podemos seguir usando clases y hooks simultáneamente.
• Mejoran la transpilación de Babel: Al transpilar una componente de tipo clase con Babel se origina un código muy extenso. Sin embargo una función es mucho más sencilla de transpilar, por lo tanto Babel tendrá que hacer pocas modificaciones y trasnformaciones.
• Mejora en performance: La ejecución de una función es mucho más rápida que tener que evaluar una clase.

Hooks Nativos de React

useState

Estr hook nos permite manejar estado dentro de un Componente Funcional, es quizás uno de los hooks más usados. Además es fácil de usar, desectructuramos 2 elementos de useState, el <nombre-del-estado> y <la-funcion-que-cambia-el-estado>, y como parámetro le pasamos el valor inicial del estado que hemos declarado.

Ejemplo de useState

import React, { useState } from 'react';

const Header = () => {
  /**
   Creamos un estado darkMode y una función 
   setDarkMode, que nos ayudará a cambiar el 
   estado, que inicialmente es false
  */
  const [darkMode, setDarkMode] = useState(false);

  /**
   Con esta función iremos cambiando el valor
   del estado a medida que demos click.
   
   También podríamos usar directamente la función 
   en la propiedad onClick del botón con una función 
   anónima: () => {setDarkMode(!darkMode)}
   */
  const handleClick = () => {
    setDarkMode(!darkMode);
  }

  return (
    <div className="Header">

      <h1>ReactHooks</h1>
      <button 
       type="button" 
       onClick={handleClick}>
           {darkMode ? 'Dark Mode' : 'Light Mode'} 
      </button>
      
    </div>
  );
};

export default Header;

useEffect

Esto hook nos permite olvidarnos del ciclo de vida de las clases, para empezar a pensar en efectos. useEffect nos ayuda a aplicar efectos justo antes de que se renderice nuestro componente. useEffect recibe dos argumentos, un callback donde especificaremos el efecto que queremos aplicar y un array de dependencias. Depende de lo que enviemos en este array useEffect actuará de una forma u otra. Veámoslo en detalle:

• Array Vacío: Si le pasamos un array vació el efecto solo se aplicará una vez.
• Array con dependencias: Si le pasamos un array con contenido, el efecto se aplicará cada vez que cambie el valor de esa dependencia.
• Si no le pasamos nada se aplicará el efecto cada vez que nuestro componente se renderice.

Veámos un ejemplo con la API de Rick y Morty.