Enganchémonos con REACT HOOKS!

abril 5, 2022 Ariel Altamirano 0 Comments

¿Qué es un Hook?

Un Hook es una función especial que permite conectarnos a características de React, para trabajar con métodos especiales, los cuales nos permitirán manejar el estado de mejor forma sin depender de clases. (Medina, 2021)

Más adelante veremos estos principales métodos especiales.

¿Qué son los React Hooks?

Son una característica opcional que salió en la versión 16.8 en febrero de 2019, sin embargo, son compatibles con versiones anteriores. (Capparelli, 2020)

Los react hooks vienen a resolver problemas de complejidad en el manejo de la lógica de estados entre componentes y también trabajan mediante funciones (Figura 1) y ya no mediante clases (Figura 2).

Figura 1. Funciones en React Hooks

Figura 2. Clases en React

Métodos principales

Como ya hemos visto anteriormente, los hooks son funciones especiales que permiten acceder a las funcionalidades de React. En esta sección del blog veremos los hooks más importantes con una pequeña descripción de lo que hacen y un ejemplo de cada uno.

Nota: Cada hook tiene que ser importado desde la librería React (Figura 3) y cada hook es creado en un nuevo archivo, el cual tiene que ser llamado desde App.js (Figura 4)

Figura 3. Importación de useState

Figura 4. Llamado de componente.

UseState

La función useState permite añadir un estado interno a nuestros componentes para hacerlos dinámicos e interactivos. (Midudev, 2019)

En el ejemplo de la figura 5, se declara una constante “text” mediante useState para cambiar el texto de un botón dependiendo su estado (true = “Texto 1” y false = “Texto 2”), cuando se da click la función handleClick cambia el estado de la constante “text”.

import React, { useState } from “react“;

const FirstExercise = () => {

const [text, setText] = useState(false);

const handleClick = () => {

setText(!text);

};

return (

<div>

<h1>Software Evolutivo</h1>

{text ? “Text 1“ : “Text 2“}

</button>

</div>

);

};

export default FirstExercise;

Figura 5. Uso de useState

UseEffect

La función useEffect permite realizar efectos secundarios desde un componente de función, es similar a componentDidMount,componentDidUpdate y componentWillUnmount en las clases React, pero unificadas en una sola función. (React, 2022)

En el ejemplo de la figura 6, se utiliza la API de Rick and Morty para obtener una lista de datos y presentarlos en pantalla. Dicha lista se obtiene en la función useEffect cuando carga el componente, en caso de querer actualizarlo en base a algún estado se tiene que agregar dicho estado entre los corchetes finales de la función useEffect, como este no es el caso se lo deja vacío.

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

const SecondExercise = () => {

const [characters, setCharacters] = useState([]);

useEffect(() => {

fetch(‘https://rickandmortyapi.com/api/character/‘)

.then(response => response.json())

.then(data => setCharacters(data.results));

}, []);

return (

<div>

{characters.map(character => (

<h2>{character.name}</h2>

))}

</div>

);

};

export default SecondExercise;

Figura 6. Uso de useEffect

UseContext

La función useContext permite simplificar el manejo de estados entre los distintos componentes padre e hijos.

Formas de utilizar useContext:

Correct: useContext(MyContext)
Incorrect: useContext(MyContext.Consumer)
Incorrect: useContext(MyContext.Provider). (React, 2022)

Para este ejemplo como se puede apreciar en las figuras 7 y 8 respectivamente, se crea un contexto, en este caso crearemos un nuevo archivo dentro de src/context llamado ThemeContext, posteriormente, desde index.js importamos el archivo creado para encapsular la aplicación sobre el provider en este caso con un value igual a blue

import React from ‘react‘;

const ThemeContext = React.createContext(null);

export default ThemeContext;

Figura 7. Creación del contexto

import React from ‘react‘;

import ReactDOM from ‘react-dom‘;

import ‘./index.css‘;

import App from ‘./App‘;

import ThemeContext from ‘./context/ThemeContext‘;

ReactDOM.render(

<React.StrictMode>

<ThemeContext.Provider value=”blue“>

<App />

</ThemeContext.Provider>

</React.StrictMode>,

document.getElementById(‘root‘)

);

Figura 8. Importación del contexto creado

Finalmente en la figura 9, se implementará el useContext dentro del ejercicio que realizamos para useState de tal manera que obtenga el valor que establecimos y se pinte el título en este caso de color azul.

import React, { useState, useContext } from “react“;

import ThemeContext from “../context/ThemeContext“;

const ThirdExercise = () => {

const [text, setText] = useState(false);

const color = useContext(ThemeContext)

const handleClick = () => {

setText(!text);

}

return (

<div>

<h1 style={{ color }}>Software Evolutivo</h1>

{text ? “Text 1“: “Text 2“}

</button>

</div>

);

};

export default ThirdExercise;

Figura 9. Uso de useContext

UseReducer

La función useReducer permite actualizar un estado interno por medio de una función llamada reducer. Puede ser una alternativa a useState. (React, 2022)

En el ejemplo de la figura 10, realizaremos el incremento o decremento de clicks mediante la llamada a la función reducer, la cual es llamada mediante el hook useReducer que recibe dos parámetros, el primero es la función reducer y el segundo un estado (initialState). Este estado inicial se actualiza en la función reducer dependiendo el tipo que es enviado como parámetro en la función onClick de cada botón que llama mediante al reducer y almacenado en la constante “state” mediante la cual se puede reflejar el cambio en pantalla.

Nota: No es una alternativa a Redux.

import React, { useReducer } from “react“;

const initialState = {

count: 0

};

const reducer = (state, action) => {

switch (action.type) {

case ‘increment‘:

return {count: state.count + 1};

case ‘decrement‘:

return {count: state.count – 1};

default:

throw new Error();

}

const FourthExercise = () => {

const [state, dispatch] = useReducer(reducer, initialState);

return (

Count: {state.count}

<button onClick={() => dispatch({type: ‘decrement‘})}>–</button>

<button onClick={() => dispatch({type: ‘increment‘})}>+</button>

</>

);

};

export default FourthExercise;

Figura 10. Uso de useReducer

Referencias

Capparelli, A. (2020). Qué son los hooks y cómo utilizarlos en tu proyecto con React. Paradigma. https://www.paradigmadigital.com/dev/hooks-como-utilizarlos-react/

Medina, K. (2021, 05 10). Introducción a React Hooks. https://medium.com/nowports-tech/introducci%C3%B3n-a-react-hooks-55918188c5e2

Midudev. (2019, February 7). React hooks, cómo utilizar el hook useState. midudev ‍. https://midu.dev/react-hooks-use-state-anadiendo-estado-a-nuestro-componente-funcional/

React. (2022). Hooks API Reference – React. React. https://reactjs.org/docs/hooks-reference.html

React. (2022). Using the Effect Hook – React. React. https://reactjs.org/docs/hooks-effect.html

Enganchémonos con REACT HOOKS!

¿Qué es un Hook?