Ganchos de reacción

Se agregaron ganchos a React en la versión 16.8.

Los ganchos permiten que los componentes de funciones tengan acceso al estado y otras características de React. Debido a esto, los componentes de clase generalmente ya no son necesarios.

¿Qué es un gancho?

Los ganchos nos permiten "engancharnos" en las funciones de React, como los métodos de estado y ciclo de vida.

import React, { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")}
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("pink")}
      >Pink</button>
      <button
        type="button"
        onClick={() => setColor("green")}
      >Green</button>
    </>
  );
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

Debes importHooks de react.

Aquí estamos usando useStateHook para realizar un seguimiento del estado de la aplicación.

El estado generalmente se refiere a los datos de la aplicación o las propiedades que deben rastrearse.

Reglas de gancho

Hay 3 reglas para los ganchos:

• Los ganchos solo se pueden llamar dentro de los componentes de la función React.
• Los ganchos solo se pueden llamar en el nivel superior de un componente.
• Los ganchos no pueden ser condicionales

Ganchos personalizados

Si tiene una lógica con estado que debe reutilizarse en varios componentes, puede crear sus propios Hooks personalizados.

Entraremos en más detalles en la sección Ganchos personalizados .