Sugerencias para usar ganchos en componentes de clase

Desde la versión 16.8 de React, la comunidad de desarrolladores ha adoptado ganchos por su conveniencia y su interfaz simple. Los ganchos incorporados como useState y useEffect hacen posible mantener el estado en componentes funcionales y configurar métodos de ciclo de vida.

Más importante aún, muchas bibliotecas han cambiado a ganchos de soporte en lugar de componentes personalizados o utilidades compatibles con componentes de clase. Esto obliga a una pregunta, ¿es posible usar ganchos en los componentes de la clase React?

Los desarrolladores aún necesitan la poderosa funcionalidad de los ganchos personalizados, pero es posible que deban encontrar formas alternativas de usarlos. Si está en el mismo barco, siga esta guía sobre el uso de anzuelos en componentes de clase.

Usar ganchos en los componentes de la clase React

Desde la introducción de los ganchos, muchos desarrolladores de React han decidido refactorizar docenas de componentes de clase en componentes funcionales.

Eso podría no ser posible si su aplicación contiene cientos de componentes de clase. Tomará demasiado tiempo refactorizar.

Algunos desarrolladores prefieren una sintaxis de clase y no quieren escribir componentes funcionales.

Desafortunadamente, los componentes de clase no admiten ganchos y no hay forma de usar ganchos dentro de ellos. La única forma práctica de utilizar ganchos dentro de los componentes de clase es mezclar los dos tipos de componentes en un solo árbol.

En teoría, usando ganchos, podrías usar componentes funcionales para generar valor y pasar ese valor a través de “accesorios” a los componentes de clase.

Forma alternativa de usar ganchos en los componentes de la clase React

Este es un ejemplo simple del uso de valores de ganchos en un componente de clase. Veamos un ejemplo.

import "./styles.css";
import React, { useState } from "react";
export default function App() {
  const [number, setNumber] = useState(100);
  return (
    <div className="App">
      <Header hookValue={number}></Header>
    </div>
  );
}
class Header extends React.Component {
  render() {
    const someHookValue = this.props.hookValue;
    return <h1>{someHookValue}</h1>;
  }
}

Importamos el enlace useState para crear una variable de estado number, inicializada en un valor numérico.

El componente secundario es un componente de clase Header. Pasamos la variable de estado número, que creamos usando un gancho.

Luego mostramos este valor en el componente hijo. Mire la demostración en vivo en CodeSandbox usted mismo.