Hooks

¿Que es un hook?

Son funciones que permiten “conectar” el estado de react y el ciclo de vida desde componentes de funcion. No funcionan desde los componentes de clases, estan justamente para usar las caracteristicas de estos en los componentes de funcion.

React proporciona algunos hooks incorporados como useState pero tambien es posible crear propios

Hooks de estado:

import React, { useState } from 'react';

function Example() {
  // Declara una nueva variable de estado, que llamaremos "count".
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState seria un hook, se utiliza en componentes de funcion para agregar un estado local. Aca el hook devuelve dos caracteristicas, por un lado el valor actual del estado count y por otro una funcion que permite cambia el valor del estado setCount, tambien le pasamos un valor inicial como argumento useState(0).

Declarando multiples variables de estado:

Este hook se puede utilizar mas de una vez en el mismo componente:

function ExampleWithManyStates() {
  // Declarar múltiple variables de estado!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}
//tambien tengo un pantallazo de alguno de los tipos de datos que se pueden utilizar 

Usando la desestructuracion de arrays, definimos el nombre para las variables del hook. 🖊️

Hook de efecto

Se utiliza en la recuperacion de datos, suscripciones, modificaciones por el cliente al DOM. Estas operaciones se consideran como efectos secundarias (o simplemente efectos), porque pueden afectar a otros componentes y no se pueden hacer durante el renderizado.

Este hook permite realizar estas operaciones desde un componente de funcion y tiene la misma finalidad que componentDidMount, componentDidUpdate y componentWillUnmount en las clases de react.

Ejemplo:

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar a componentDidMount y componentDidUpdate:
  useEffect(() => {
    // Actualiza el título del documento usando la Browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Cuando se llama a useEffect, React ejecuta la funcion de efecto despues de vaciar los cambios en el DOM, Los efectos se declaran dentro del componente para que tengan acceso a sus props y estados, de manera predeterminada se ejecutan los efectos despues de cada renderizado (incluyendo la primera renderizacion).

Reglas para el uso de hooks

Ya viene incorporado un plugin linter para forzar estos comportamientos, por mas info

Construyendo Hooks

Para reutilizar la logica de estado entre componentes se utilizaban dos opciones:

Ahora gracias a los hooks personalizados se pueden hacer esto sin agregar componentes al arbol.

El estado de cada componente es completamente independiente, con los hooks se utiliza la logica del estado pero no es estado en si.