React es una librería JavaScript que recientemente desarrolló el concepto de hooks, funciones especializadas para ejecutar determinadas secciones de código en momentos específicos del render. Esta librería además nos permite desarrollar nuestros propios hooks para crear un código más eficiente que simplifique varios componentes. En este post, te enseñaremos cómo crear custom hooks para mejor legibilidad en React, fundamentales para simplificar nuestro código.
¿Qué son los custom hooks para mejor legibilidad en React?
Los custom hooks para mejor legibilidad en React son funciones especiales que nos ayudan a simplificar las líneas de código de nuestros componentes, lo que ayuda a mejorar y facilitar la lectura.
En nuestros posts sobre qué son los custom hooks en React y crear un custom hook de contexto en React, te hemos enseñado que estas funciones tienden a ser más útiles cuando tenemos líneas de código repetidas a lo largo de varios componentes. Sin embargo, no siempre que creamos un custom hook debe ser supergenérico y valer para todos los componentes. La realidad es que crear un custom hook puede ser una buena herramienta para quitar código de tu componente y hacerlo un poco más legible. A continuación, te enseñaremos cómo hacer esto.
Antes de empezar
Para explicarte cómo hacer custom hooks para mejor legibilidad en React, te mostraremos un ejemplo. Supongamos que tenemos el siguiente componente TweetsPage que enlista una serie de tweets:
const TweetsPage = ( ) => {
const [tweets, setTweets] = useState ([ ]);
useEffect (( ) => {
const execute = async ( ) => {
const tweets = await getLatestTweets ( );
setTweets (tweets);
};
execute ( );
return ( ) => { };
}, [ ]);
return (
<Page title= «What’s going on…»>
<div className {styles.tweetsPage}>
{tweets.length ? (
<ul>
{tweets.map (tweet => (
<li key ={tweet.id}>
<Link to = {‘/tweets/${tweet.id}’}>
< Tweet {…tweet}/>
</Link>
</li>
))}
</ul>
</div>
</Page>
Como puedes ver, el componente anterior declara un estado y, después del primer render (determinado con useEffect), llama a una API para obtener datos y guardarlos en dicho estado. Luego, empieza la parte visual del componente con el elemento Page. Entonces, este ejemplo es ideal para crear un custom hooks para mejor legibilidad en React, pues es un componente que puede volverse largo y complicado rápidamente.
Para mejorar la lectura de este componente TweetsPage, podemos guardar lo que se ejecuta antes de la sección visual en un hook personalizado. Esto hará que el componente como tal sea mucho más simple y fácil de leer.
¿Cómo crear custom hooks para mejor legibilidad en React?
Ahora que hemos elegido el trozo de código que vamos a guardar en nuestro custom hook, es momento de crearlo. Para ello, crearemos una función cuyo nombre empiece con la palabra use, en nuestro caso será useTweets. Esta convención es una de las reglas de las que hemos hablado en nuestro post sobre qué son los custom hooks en React.
const useTweets = ( ) => { }
Ahora, basta con pasar las líneas de código que queremos sacar de nuestro componente e insertarlas en el custom hook creado. En nuestro caso, pasaremos la declaración del estado y el código dentro de useEffect del componente TweetsPage al hook useTweets.
const useTweets = ( ) => {
const [tweets, setTweets] = useState ([ ]);
useEffect (( ) => {
const execute = async ( ) => {
const tweets = await getLatestTweets ( );
setTweets (tweets);
};
execute ( );
return ( ) => { };
}, [ ]);
}
Ahora, también tenemos que pensar cuál es el dato que le interesa tener al componente cuando llama a useTweets. En nuestro caso, le interesa que le devuelva tweets. Entonces, deberemos añadir un return del elemento en cuestión al final de nuestros custom hooks para mejor legibilidad en React. En nuestro caso, esto sería tan simple como lo siguiente:
return tweets;
¿Cómo aplicar los custom hooks para mejor legibilidad en React?
Ahora que hemos creado el custom hook ideal para simplificar nuestro componente, podemos usarlo. Entonces, basta con llamarlo desde TweetsPage como puedes ver a continuación:
const TweetsPage = ( ) => {
const tweets = useTweets ( );
}
Con esta simplificación, hemos sacado del componente lo que es la lógica de obtener los tweets y setearlos en el estado. Esto nos permite dejar al componente con los aspectos más visuales y reducir sus líneas de código.
¿Qué sigue?
Ahora que sabes cómo crear custom hooks para mejor legibilidad en React, ¡te invitamos a utilizarlos en tus propios proyectos! Para seguir aprendiendo sobre el desarrollo de proyectos para la web, no solo en React, sino también en herramientas y lenguajes de programación como JavaScript, HTML y CSS, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. En este espacio intensivo que mezcla la teoría con la práctica podrás convertirte en un experto del desarrollo web en pocos meses. ¡No te lo pierdas y dale un giro a tu vida!
