La encuesta del estado de JavaScript de 2020 nos da a entender que JavaScript seguirá creciendo este año 2021 tanto en uso como usuarios que la adopten, por ende, el considerar a React para 2021 es muy seductor para aquellos interesados en el desarrollo web.

Si con JavaScript nuestra meta es diseñar los componentes con los que nuestro usuario puede comunicarse, React nos ayudará a crear interfaces de usuario interactivas fácilmente, pudiendo saber cual es el estado de nuestra aplicación en todo momento y optimiza los tiempos de carga aún si nuestra información varía sin tener que recargar la página.

Los programadores tienden a vivir problemas al emplear funciones y clases por primera vez, estas son las formas de ejecución y reutilización de código por excelencia en JavaScript, eso viene dado porque el lenguaje es asíncrono, por ende, ejecuta nuestro código parte por parte, estas partes pueden ser ejecutadas en varias partes de nuestro código, en forma de subrutinas, optimizando nuestras paginas y disminuyendo la cantidad de código a escribir.

Para cualquier entusiasta eso ya es una maravilla, pero todo oculta un lado oscuro y es que nos encontraremos con problemas tales como "Child-hell" que es cuando pasas propiedades del padre al componente hijo que lo requiere, esto puede pasar porque algunos componentes no conocen sus hijos de antemano al ejecutar.

La tecnología que surge para tener mayor libertad entre los componentes es JavaScript React Hook. citando a Reactjs.org:

Los Hooks te permiten reutilizar lógica de estado sin cambiar la jerarquía de tu componente

Pudiendo también simplificar estados de componentes y sus set, puedes crear tus propios Hooks (tu lógica en una función que puedes llamar en un componente para aplicárselo), te permite simplificar el ComponentDidMount, ComponentWillUnmount en un solo Hook y un sin fin de cosas.

Si quieres darle una oportunidad a JavaScript React Hooks, tenemos un curso para tí, es el Mastering React donde aprenderás conceptos básicos como los Componentes y JSX, hasta el uso de los Contextos y los Hooks.

Ahora bien, veamos un ejemplo de Hooks:

useState Hook:

Primero tomemos nuestro editor de código predilecto e iniciemos una hoja donde usar JavaScript, una vez en ella, llamemos en la librería de React (basta con llamarla esta primera vez): import React, { useState } from 'react';

Sigue el crear nuestra función, la llamaremos PruebaUno(props) { }, ahora nuestro Hooks tiene un argumento, es el estado inicial y este retornará 2 valores: el estado actual y una función que podrá substituir dicho estado.
También puedes reemplazar la inicialización: this.state = { value: '' };

function PruebaUno(props) {
  const [value, setValue] = useState('');
}

Analicemos un momento, hemos usado los corchetes cuanto una variable de estado es declarada, esto significa que estamos asignando el primer valor retornado para useState sea value y el segundo corresponda a serValue.

Con esto tenemos un estado llamado value que será substituido al llamar a la función setValue

function NameForm(props) {
  const [value, setValue] = useState('');

 return (
    <form>
      <label>
        Name:
        <input
          type="text"
          value={value}
          onChange={event => setValue(event.target.value)}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

Con esto podremos crear una Arrow function que llame a la función setValue para actualizar nuestro estado, esto difiere con this.setState que es un class component, ya que, cuando actualizamos nuestra variable estado usando Hooks, esta es substituida.

Sin más que acotar, ¡Hasta pronto!

Referencias:
https://es.reactjs.org
https://lemoncode.net/lemoncode-blog/2019/6/8/componentes-de-clase-en-react-inconvenientes
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/this
https://2020.stateofjs.com/en-US/technologies/
https://codearmy.co/que-es-el-callback-hell-y-como-evitarlo-4af418a6ed14