Home » Blog » Introducción rápida a los ganchos de React

Introducción rápida a los ganchos de React

Los React Hooks son funciones React incorporadas que permiten a los desarrolladores gestionar el estado y realizar acciones lógicas en un componente de función React.

En este artículo, aprenderemos brevemente qué son los React Hooks, los tipos de hooks, y también ejemplos básicos de uso de algunos de estos hooks en tu aplicación React.

También te puede interesar: «Integración de Stripe Checkout con React»

¿Qué son los ganchos de React?

React Hooks son funciones integradas que permiten utilizar el estado dentro de los componentes de la función. Introducidos como APIs especiales en la versión React 16.8 lanzada en 2019, los Hooks te permitirán ‘engancharte’ a características de React como los métodos del ciclo de vida. Una proeza que antes sólo era posible utilizando componentes de clase.

Los React Hooks son increíblemente poderosos porque permiten a los desarrolladores de React transformar componentes funcionales sin estado de sólo renderizar UIs reutilizables a ser capaces de guardar y mantener el estado y la lógica. Antes de eso, a los desarrolladores les resultaba difícil reutilizar la lógica y compartir el estado entre componentes de clase sin utilizar abstracciones de reacción aún más complejas. React Hooks hizo posible extraer tanto la lógica de estado entre los componentes.

En resumen, estas son las ventajas que han obtenido los desarrolladores con la introducción de React Hooks.

Estructura de código más sencilla que elimina las palabras clave «this» y «binds» .

Es más fácil reutilizar la lógica y compartir el estado sin tener que lidiar con complejas abstracciones de React que son difíciles de probar y gestionar.
Es posible un flujo de datos unidireccional descendente más preciso sin alterar el orden de los componentes existentes.
Cuando se utilizan de forma óptima, React Hooks puede ayudarte a prescindir de la necesidad de integrar una biblioteca de gestión de estados.

Ganchos React comunes

Hay varios tipos de ganchos de react incorporados. Incluso puede crear sus propios ganchos personalizados que contengan la lógica funcional que desee y que podrá reutilizar en distintos componentes.

La versión 16.8 de React viene con diez ganchos integrados clasificados en dos categorías: ganchos básicos y ganchos adicionales. De estos hooks, examinaremos dos que son los más utilizados: useState y useEffect.

Gancho React UseState

El gancho useState es el gancho más popular de React. Permite «utilizar el estado» en un componente de función. Esto significa que puedes leer, manipular y actualizar el estado utilizando el gancho useState.

A continuación se muestra una representación básica del gancho useState:

const [state, setState] = useState(initialState);

Por ejemplo, el ejemplo anterior tiene un estado que es inicialmente el mismo valor que initialState . El initialState puede tomar un número, cadena, o incluso una matriz en función del tipo de datos a mano. setState es una función que se utiliza para actualizar el valor del estado. Por ejemplo, setState(updatedState).

Utilicemos el gancho useState en un componente sencillo y funcional.

function Age() {
 const [age, setAge] = useState(10);
 
 return (
     <div>
         <p>I am {age} Years Old</p>
       <div>
          <button onClick={() => setAge(age + 1)}>Increase my age!      </button>
          <button onClick={() => setAge(age - 1)}>Decrease my age! </button>
       </div>
     </div>
 )
}

Expliquemos rápidamente cómo funciona el código anterior:

Tenemos la versión básica del gancho:

    const [age, setAge] = useState(10);

age tiene un estado inicial de 10 que luego llamamos entre la etiqueta <p>.

Los botones tienen un manejador onClick que llama a la función setAge, que aumentará o disminuirá nuestro estado de edad inicial dependiendo del botón pulsado.

Gancho React UseEffect

El gancho useEffect acepta una función que se ejecuta después de cada render. Se utiliza comúnmente para realizar efectos secundarios. Esto puede abarcar desde la manipulación del DOM o las API del navegador hasta la obtención de datos de API externas. El hook useEffect también nos ayuda a conseguir capacidades en un componente de función que antes realizaban los métodos del ciclo de vida de React. Piense en el gancho useEffect como la combinación de los métodos del ciclo de vida componentDidMount, componentDidUpdate y componentWillUnmount. Además, también podemos establecer el gancho useEffect para renderizar basado en cambios de valores específicos.

Esta es una versión básica del gancho useEffect.

useEffect(functionToRun);

Por ejemplo, utilicemos el gancho useEffect de forma más elaborada utilizando el ejemplo de componente funcional anterior.

function Age() {
 const [age, setAge] = useState(10);
 
 useEffect(() => {
   setAge(20)
 },[]);
 
 return (
   <div>
     <p>I am {age} Years Old</p>
     <div>
       <button onClick={() => setAge(age + 1)}>
         Increase my age!
       </button>
       <button onClick={() => setAge(age - 1)}>
         Decrease my age!
       </button>
     </div>
   </div>
 );
}

El useEffect en render establece el nuevo valor de edad a 20. También pasamos un array vacío que permitirá que el hook useEffect se ejecute una sola vez.

He colocado un console. log en la pantalla de arriba. Podemos ver como el valor del estado age cambió del inicial 10 a 20, causado por el hook useEffect. A continuación, veremos cómo cambia el estado a medida que pulsamos el botón.

Otros ganchos de React

También existen otros Hooks como useContext(), useMemo(), entre otros. Puedes echar un vistazo al resto en la documentación oficial.

Hay, sin embargo, dos reglas que debes seguir cuando uses React Hooks.

Llame siempre a los ganchos en el nivel superior, como se muestra en los ejemplos que hemos utilizado. Esto significa que no podemos llamar a ganchos dentro de bucles, condiciones o funciones anidadas.
Sólo utilice Hooks desde dentro de los componentes de la función React.

Muchos IDE de código, como VSCode, tienen un linter incorporado que aplica estas reglas y otras más.

Aplicación para usuarios

Por último, vamos a crear una app más compleja usando todo lo que hemos aprendido sobre React, useState y useEffect Hooks.

Obtendremos datos de una API externa con datos de usuarios falsos. Como hemos aprendido, este es un caso de uso perfecto para el gancho useEffect.

function Users(){
 const [users, setUsers] = useState([]);
 useEffect(() => {
       fetch("https://jsonplaceholder.typicode.com/users/")
           .then(res => res.json())
           .then(data => setUsers(data))
     }, [])
 
 return (
     <ul>
         {users.map(user => (
         <li key={user.id}>
             {user.name}lives in {user.address.city}
         </li>
         ))}
     </ul>
 );
}

En el ejemplo anterior, puedes ver cómo hemos utilizado:

El gancho useState para establecer y actualizar el estado incluido dentro del gancho useEffect.
El hook useEffect interactúa con la API del navegador llamada Fetch, que nos permite extraer datos de APIs externas. También pasamos un array vacío para asegurarnos de que se ejecuta una vez.

De nuevo en el vídeo de arriba, he colocado un console. log para que puedas ver cómo sacamos datos específicos para mostrar.

Resumen

Nos divertimos. Los React Hooks son realmente poderosos cuando se usan correctamente. En conclusión, hemos aprendido qué son los React Hooks y los inmensos beneficios que aportan a los desarrolladores. Además, también hemos examinado brevemente los distintos tipos de ganchos y las normas que rigen su uso. Por último, hemos creado una sencilla aplicación React que demuestra cómo utilizar los hooks useState y useEffect.

Si te sientes aventurero y quieres construir más aplicaciones con ganchos React, echa un vistazo a nuestro artículo Integración de Stripe Checkout con React.

Unimedia Technology

En Unimedia Technology contamos con un equipo de desarrolladores Re act que pueden ayudarle a desarrollar sus aplicaciones React más complejas.

Recuerde que en Unimedia somos expertos en tecnologías emergentes, así que no dude en ponerse en contacto con nosotros si necesita asesoramiento o servicios. Estaremos encantados de ayudarle.