Gancho use() de React: cómo aplicarlo y por qué

Este nuevo gancho puede ayudar a simplificar una gran cantidad de código repetitivo.

Las aplicaciones React que desarrolle a menudo obtendrán datos de una API externa, y el equipo de React se ha asegurado de satisfacer esta necesidad. Elusar()Hook simplifica el proceso de obtención de datos.

Con este enlace, reducirá la cantidad de código repetitivo que necesita para definir promesas y actualizar el estado de la aplicación. Aprende todo sobre Reactusar()Hook y cómo usarlo en tus proyectos de React.

Considere el siguiente componente, por ejemplo:

Una vez que React representa este componente, consume la API usando fetch(). Luego guarda los datos en el estado del componente si la solicitud fue exitosa o establece elesErrorvariable a verdadero si no lo fuera.

Dependiendo del estado, muestra datos de la API o un mensaje de error. Mientras la solicitud de API está pendiente, muestra el texto "Cargando..." en la página.

El componente anterior es un poco engorroso ya que está lleno de código repetitivo. Para solucionar este problema, introduzca elusar()Enganche y refactorice su código.

Con el gancho use(), puede reducir el componente anterior a solo dos líneas de código. Pero antes de hacer eso, tenga en cuenta que este gancho es bastante nuevo, por lo que solo puede usarlo en la versión experimental de React. Así que asegúrate de estar usando esa versión:

Ahora está listo para usar el gancho, comenzando por reemplazar elusoEstadoyusoEfectoimporta con solousar:

Dentro deDatos componente, lo único que conservará es la solicitud de recuperación. Pero necesitarás incluir la solicitud de recuperación dentro de tuusar() gancho; devuelve datos JSON o un error. Luego establece la respuesta a una variable llamadadatos:

¡Eso es todo! Como puede ver, el código anterior reduce el componente a solo dos líneas de código. Eso demuestra cuán útil puede ser el gancho use() en escenarios como este.

Una parte importante delusar() Hook maneja los estados de carga y error. Puedes hacer esto dentro del componente principal deDatos.

Para implementar la funcionalidad de carga, ajuste elDatoscomponente conSuspenso . Este componente requiere un accesorio alternativo que se representará cada vez que esté en el estado de carga:

Elusar() El gancho en el componente de datos desencadena este suspenso para cargar. Si bien la promesa aún no se ha resuelto, elAplicación El componente mostrará el estado de reserva. Entonces, cuando elDatosEl componente recibe los datos de respuesta, representa el contenido en lugar del estado de carga.

Cuando se trata de detectar errores, es necesario saber cómo funciona Error Boundary para utilizarlo. Normalmente, lo usará cuando trabaje con Suspense.

Un ejemplo de un límite de error se encuentra en el siguiente código:

Este ejemplo de límite de error tiene un objeto de estado que rastrea el estado del error y cuál es el error. A continuación, obtiene el estado derivado de ese error. Elprestar() La función muestra el elemento de reserva si hay un error. De lo contrario, renderiza lo que esté dentro del.

El componente anterior funciona prácticamente igual que Suspense. Entonces, en el componente App, puedes envolver todo dentro delLímite de errorcomponente así:

Si alguno de los códigos anidados arroja un error, su límite de error lo detectará a través degetDerivedStateFromError()y actualiza el estado, lo que a su vez muestra el texto alternativo: "¡Ups! Hay un error".

Por lo tanto, el gancho use() puede ayudar a reducir la cantidad de código repetitivo y facilita la carga y los estados de error. Pero el gancho use() también tiene otro uso muy útil.

Supongamos que estás enviando undebería buscarbooleano como accesorio para elDatoscomponente y solo desea ejecutar la solicitud de recuperación sidebería buscaresverdadero.

No puedes envolver los ganchos tradicionales de React dentro de unsideclaración, pero elusar() El gancho es diferente. Puedes usarlo prácticamente en cualquier lugar que desees (envuelto en unparabucle,sideclaración, etc.):

Con el código anterior, React mostrará "datos predeterminados" de forma predeterminada. Pero si le dice que haga una búsqueda pasando eldebería buscarprop del padre, hará la solicitud y asignará la respuesta adatos.

Otra cosa interesante sobre elusar() El gancho es que no solo tienes que usarlo con promesas. Por ejemplo, al momento de escribir, puede pasar en un contexto:

Si bien usar useContext() está perfectamente bien, no puede usarlo dentro de sentencias y bucles if. Pero puedes envolver el gancho use() dentro de declaraciones if y bucles for.

El gancho use() es solo uno de los muchos ganchos proporcionados por React. Familiarizarse con estos ganchos y la mejor manera de utilizarlos es esencial para mejorar su conocimiento de React.

Kingsley es un desarrollador web independiente de Nigeria. Ha estado escribiendo JavaScript y Node.js profesionalmente durante más de 3 años. Durante este tiempo, ha trabajado con clientes de todo el mundo. Kingsley también educa a los desarrolladores a través de sus escritos. Escribe para varias publicaciones y agencias de tecnología, incluidas FreeCodeCamp, Tutsplus, ContentLab y MakeUseOf.