Se dedicó a la optimización de componentes mediante los Custom Hooks en React. Se introdujo este concepto como la técnica fundamental para reutilizar lógica de estado entre diferentes componentes funcionales sin necesidad de duplicar código. Se explicó que un Custom Hook es simplemente una función de JavaScript cuyo nombre empezó con use- y que podía llamar a otros Hooks estándar (como useState o useEffect). La sesión demostró cómo abstraer lógicas complejas, como la gestión de formularios o el fetching de datos, en un Hook personalizado. Esto resultó en componentes más limpios, legibles y fáciles de mantener. Los asistentes vieron cómo esta práctica mejoró drásticamente la estructura de sus aplicaciones. ✨
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>;
})}
</>
);
};
