Optimización de solicitudes de servidor con React Hooks

Introducción

Como desarrollador de React, ¿estás cansado de lidiar con solicitudes de servidor mal gestionadas? No busques más; los React Hooks son una potente función de la biblioteca de React que permite a los desarrolladores usar el estado y otras características de React en componentes funcionales, y pueden ayudarte a optimizar tus solicitudes de servidor y llevar el rendimiento de tu aplicación web al siguiente nivel.

Quizás te preguntes: "¿Qué importancia tienen las solicitudes al servidor? ¿Por qué son importantes?". Pues bien, te lo cuento: las solicitudes al servidor son fundamentales para la experiencia del usuario. Una gestión deficiente de las solicitudes al servidor puede provocar tiempos de carga lentos, un rendimiento deficiente y una experiencia de usuario frustrante. React Hooks ofrece una forma de gestionar las solicitudes al servidor de forma eficiente y organizada, lo que se traduce en una carga más rápida, un rendimiento mejorado y una mejor experiencia de usuario.

Este tutorial lo guiará a través del uso de React Hooks para mejorar el rendimiento de las solicitudes del servidor, administrar las solicitudes del servidor de manera más efectiva y ayudarlo a crear aplicaciones web más optimizadas.

Al final de este tutorial, comprenderá completamente cómo usar React Hooks para optimizar las solicitudes del servidor y podrá implementar estas técnicas en sus proyectos para mejorar el rendimiento y la experiencia del usuario de sus aplicaciones web.

Requisitos previos

• Entendiendo JavaScript
• Introducción a los Hooks de React
• Aprenda a realizar solicitudes al servidor en JavaScript.
• Un entorno de trabajo de desarrollo
• Un editor de código

Además, sería beneficioso tener experiencia trabajando con API y comprender los principios RESTful.

Si eres nuevo en la optimización de solicitudes al servidor, no te preocupes: este tutorial está diseñado para desarrolladores de todos los niveles. Si aún no estás familiarizado con los conceptos, quizás necesites investigar y experimentar un poco más por tu cuenta. Pero no te preocupes; con un poco de paciencia y práctica, ¡podrás dominar el arte de la optimización de solicitudes al servidor en un abrir y cerrar de ojos! Así que, ¡comencemos y mejoremos el rendimiento de tu aplicación React!.

Configurar un nuevo proyecto React

Configurar un nuevo proyecto React puede ser una tarea abrumadora para desarrolladores principiantes, pero con la herramienta Create React App (CRA), nunca ha sido tan fácil. CRA es una popular herramienta de interfaz de línea de comandos que automatiza el proceso de configuración de un nuevo proyecto React y proporciona un entorno de desarrollo optimizado para crear aplicaciones React.

Para crear un proyecto de React, necesitas instalar Node.js y npm en tu ordenador. Si aún no los tienes, puedes descargarlos del sitio web oficial de Node.js. Una vez instaladas, abre la terminal o el símbolo del sistema en el directorio donde quieres crear la aplicación y usa el siguiente comando para crear un nuevo proyecto de React:

 npx create-react-app digital-ocean-tutorial

Si la aplicación se crea correctamente, se mostrará el siguiente resultado:

...
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd digital-ocean-tutorial
npm start

Esto creará un nuevo directorio con el mismo nombre que su proyecto, que contiene todos los archivos necesarios para su nuevo proyecto React.

Una vez completado el proceso de configuración, navegue al nuevo directorio del proyecto React ejecutando el siguiente comando:

cd digital-ocean-tutorial

Y luego ejecute el siguiente comando para iniciar el servidor de desarrollo:

npm start

Si todo salió bien, el servidor debería iniciarse y se mostrará el siguiente resultado:

Compiled successfully!
You can now view digital-ocean-tutorial in the browser
http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build.

Esto iniciará tu nuevo proyecto de React en tu navegador web predeterminado. Ahora deberías ver el mensaje "Bienvenido a React", lo que significa que tu proyecto está configurado correctamente y listo para que empieces a crear tu próxima gran aplicación.

Con CRA, usted puede concentrarse en escribir código sin preocuparse por configurar su entorno de desarrollo.

Ahora que tiene configurado su proyecto React, veamos las diferentes formas en que podemos optimizar las solicitudes del servidor utilizando los ganchos de React.

Sincronizar componentes con el gancho UseEffect

El gancho useEffect de React permite a los desarrolladores sincronizar un componente con un sistema externo, como un servidor, gestionando efectos secundarios como la obtención de datos de forma eficiente y sencilla. Uno de los usos más comunes del gancho useEffect es realizar solicitudes al servidor y actualizar el estado del componente.

Una forma de usar el gancho useEffect para las solicitudes al servidor es llamar a una función que realice la solicitud dentro del gancho useEffect. Esta función debe usar la API Fetch o una biblioteca como Axios para realizar la solicitud y luego actualizar el estado del componente con los datos de respuesta mediante el gancho setState.

Veamos un ejemplo de cómo usar el gancho useEffect para obtener datos de una API sustituta JSON y actualizar el estado del componente. Vaya al archivo app.js, dentro de la carpeta src de su proyecto, elimine el código predeterminado y reemplácelo con el siguiente fragmento de código:

import React, { useEffect, useState } from 'react';
function MyComponent() {
const [data, setData] = useState([]);
useEffect(() => {
async function fetchData() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
setData(data);
}
fetchData();
}, []);
return (
<div>
{data.map((item) => (
<div key={item.id}>
<h2>- {item.title}</h2>
<p>{item.body}</p>
</div>
))}
</div>
);
}
export default MyComponent

En el ejemplo anterior, el gancho useEffect se llama con una matriz de dependencias vacía, lo que significa que solo se ejecuta en la renderización inicial del componente. El estado del componente se inicializa con una matriz vacía y se llama a la función fetchData dentro del gancho useEffect para realizar una solicitud al servidor y actualizar el estado con los datos de respuesta.

Si actualiza el navegador o la aplicación, debería poder ver el resultado de la solicitud realizada en el ejemplo de código anterior, como se muestra en la imagen a continuación:

Es importante tener en cuenta que las repeticiones de renderizado innecesarias pueden causar problemas de rendimiento, por lo que es recomendable minimizar el número de renderizaciones causadas por el gancho useEffect. Una forma de lograrlo es incluir únicamente las propiedades y las variables de estado utilizadas por el gancho en la matriz de dependencias.

La gestión adecuada de errores al solicitar al servidor también es importante para evitar fallos en el componente. La gestión de errores se puede realizar añadiendo un bloque try-catch en la función fetchData y usando el gancho setError para actualizar el estado del componente con un mensaje de error. De esta forma, la aplicación puede mostrar un mensaje de error al usuario si se produce un problema.

Si sigue las mejores prácticas, podrá gestionar con confianza las solicitudes del servidor en un componente React y crear una mejor experiencia de usuario.

Optimice el rendimiento de las solicitudes del servidor mediante el gancho useMemo

El gancho useMemo de React es una herramienta de optimización del rendimiento que permite a los desarrolladores recordar datos almacenando los resultados de los cálculos para que puedan reutilizarse sin tener que repetir el proceso. Esto puede ser especialmente útil al trabajar con solicitudes de servidor, ya que ayuda a evitar la re-renderización innecesaria y a mejorar el rendimiento de los componentes.

Una forma de usar el gancho useMemo en una solicitud al servidor es recordar los datos devueltos por el servidor y usarlos para actualizar el estado del componente. Esto se puede hacer llamando al gancho useMemo dentro del gancho useEffect, pasando los datos del servidor como primer argumento y una matriz de dependencias como segundo. La matriz de dependencias debe contener las propiedades o variables de estado utilizadas para calcular los datos almacenados.

Para probar este método usando el gancho useMemo para memorizar datos de la API sustituta JSON y actualizar el estado del componente, reemplace el código en app.js con el siguiente fragmento de código:

import { useEffect, useState, useMemo } from 'react';
function MyComponent({ postId }) {
const [data, setData] = useState({});
useEffect(() => {
async function fetchData() {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
const data = await response.json();
setData(data);
}
fetchData();
}, [postId]);
const title = useMemo(() => data.title, [data]);
return (
<div>
<h2>{title}</h2>
</div>
);
}
export default MyComponent

En el ejemplo anterior, se llama al gancho useEffect con postId como matriz de dependencias, lo que significa que se ejecutará siempre que cambie la propiedad postId. El estado del componente se inicializa con un objeto vacío y, a continuación, se llama a la función fetchData dentro del gancho useEffect para realizar una solicitud al servidor y actualizar el estado con los datos de respuesta. Dentro del componente, usamos el gancho useMemo para mantener el título pasando data.title como primer argumento y [data] como segundo, de modo que el título se actualice siempre que cambien los datos.

A continuación se muestra el resultado de la solicitud en el ejemplo de código anterior:

Tenga en cuenta que useMemo no siempre es necesario y solo debe usarse cuando el componente depende de propiedades o estados que pueden cambiar con frecuencia y requieren un alto consumo computacional. El uso inadecuado de useMemo puede provocar fugas de memoria y otros problemas de rendimiento.

Administrar el estado de la solicitud del servidor con el gancho useReducer

El gancho useReducer en React es similar al gancho useState, pero permite una gestión de estados más compleja y predecible. En lugar de actualizar el estado directamente, useReducer permite enviar acciones que describen la actualización del estado y una función reductora que actualiza el estado según la acción de envío.

Una de las ventajas de usar el gancho useReducer para gestionar las solicitudes del servidor es una mejor separación de tareas. En lugar de tener la lógica para gestionar las solicitudes del servidor dispersa por todo el componente, se puede encapsular en la función reductora, lo que facilita la comprensión y el mantenimiento del código del componente.

Para probar este enfoque usando el gancho useReducer para recordar datos de una API de variable JSON y actualizar el estado del componente, reemplace el código en app.js con el siguiente fragmento de código:

import { useReducer } from 'react';
const initialState = { data: [], loading: false, error: '' };
const reducer = (state, action) => {
switch (action.type) {
case 'FETCH_DATA_REQUEST':
return { ...state, loading: true };
case 'FETCH_DATA_SUCCESS':
return { ...state, data: action.payload, loading: false };
case 'FETCH_DATA_FAILURE':
return { ...state, error: action.payload, loading: false };
default:
return state;
}
};
function MyComponent() {
const [state, dispatch] = useReducer(reducer, initialState);
const fetchData = async () => {
dispatch({ type: 'FETCH_DATA_REQUEST' });
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
} catch (error) {
dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
}
};
return (
<div>
{state.loading ? (
<p>Loading...</p>
) : state.error ? (
<p>{state.error}</p>
) :
<div>
{state.data.map((item) => (
<div key={item.id}>
<h2>{item.title}</h2>
<p>{item.body}</p>
</div>
))}
</div>
)}
<button onClick={fetchData}>Fetch Data</button>
</div>
);
}
export default MyComponent

En el fragmento de código proporcionado, se llama al gancho useReducer con la función reductora y se pasa el estado inicial como argumento. El estado del componente se inicializa con un array vacío como dato, una variable de carga establecida en falso y una variable de mensaje de error vacía. Al hacer clic en el botón "Obtener datos", se ejecuta la función fetchData, que envía acciones en respuesta al estado de la solicitud, que puede ser correcta o incorrecta.

A continuación se muestra el resultado de la solicitud realizada en el ejemplo de código anterior:

Además, el gancho useReducer permite una gestión más eficiente de estados complejos. El uso de acciones y reductores para actualizar el estado facilita el control del impacto de las diferentes acciones en diferentes partes del estado, lo que facilita la adición de nuevas funciones y la resolución de problemas en la aplicación.

Resultado

En resumen, este tutorial ha cubierto los fundamentos de la optimización de las solicitudes al servidor con React Hooks. React Hooks es una potente función de la biblioteca de React que permite a los desarrolladores usar el estado y otras características de React en componentes funcionales. Con los hooks useEffect, useMemo y useReducer, puedes gestionar y optimizar fácilmente las solicitudes al servidor, lo que se traduce en tiempos de carga más rápidos, un mejor rendimiento y una mejor experiencia de usuario. Siguiendo las técnicas de este tutorial, puedes mejorar el rendimiento y la experiencia de usuario de tus aplicaciones web.

Ahora te toca probar estas técnicas en tus propios proyectos. A continuación, puedes explorar temas más avanzados como la paginación y el almacenamiento en caché. Recuerda que React Hooks es una tecnología en constante evolución, así que mantente al día con las últimas actualizaciones y las mejores prácticas para seguir optimizando tus solicitudes al servidor.