Durante el pasado año y como parte de nuestra filosofía de mejora continua, hemos estado realizando diversas sesiones de formación compartida, en las que son los propios miembros de nuestro equipo los que ponen en común sus conocimientos, experiencias e ideas. Como sabemos, la capacitación constante y el aprendizaje continuo son fundamentales para mantenernos actualizados en un mundo tecnológico en constante evolución.
En esta serie de posts, comentaremos algunos aspectos clave de estas sesiones.
Píldora formativa 02:
Custom Hooks en React
Imparte:
Manuel Garre
Qué es un Hook
Un Hook es una función de javascript que permite crear/acceder al estado y a los ciclos de vida de React y que, para asegurar la estabilidad de la aplicación, debe de utilizarse siguiendo dos reglas básicas:
– Debe de ser llamado en el nivel superior de la aplicación, nunca debe de llamarse dentro de ciclos, condicionales o funciones anidadas, ya que el orden de llamada de los hooks debe de ser siempre el mismo para asegurar que el resultado sea predecible durante la renderización. Este uso únicamente en el nivel superior es lo que asegura que el estado interno de React se preserve correctamente entre diferentes llamadas del mismo hook.
– Debe de llamarse en funciones o en otros hooks personalizados de React, de forma que la lógica de estado del componente sea cláramente visible desde el resto del código para el scope establecido por React.
Ejemplos de hook:
– useState
const [login, setLogin] = useState(»)
const [password, setPassword] = useState(»)
const [hasError, setHasError] = useState(false)
const [view, setView] = useState(View.default)
– useEffect
useEffect(() => {
LoginCas && setView(View.userNotFound)
queryString.includes(‘circleID’) && setView(View.registerUser)
}, [])
Como construir Hooks personalizados?
Construir tus propios Hooks te permite extraer la lógica del componente en funciones reutilizables. Un Hook personalizado es una función de JavaScript cuyo nombre comienza con ”use” y que puede llamar a otros Hooks.
Ejemplo de Custom Hook:
index.jsx
import { useState, useEffect } from «react»;
import ReactDOM from «react-dom»;
const Home = () => {
const [data, setData] = useState(null);
useEffect(() => {
fetch(«https://jsonplaceholder.typicode.com/todos»)
.then((res) => res.json())
.then((data) => setData(data));
}, []);
return (
<>
{data &&
data.map((item) => {
return <p key={item.id}>{item.title}</p>;
})}
</>
);
};
ReactDOM.render(<Home />, document.getElementById(«root»));
Transformamos a Hook:
useFetch.jsx
import { useState, useEffect } from «react»;
export const useFetch = (url) => {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then((res) => res.json())
.then((data) => setData(data));
}, [url]);
return [data];
};
index.jsx
import useFetch from «./useFetch»;
const Home = () => {
const [data] = useFetch(«https://jsonplaceholder.typicode.com/todos»);
return (
<>
{data &&
data.map((item) => {
return <p key={item.id}>{item.title}</p>;
})}
</>
);
};
