Optimización de Fetch con useEffect y Dependencias en React

La capacidad de crear aplicaciones web interactivas que respondan a las acciones del usuario en tiempo real es una habilidad fundamental para cualquier desarrollador de React. El uso efectivo de hooks como useEffect con dependencias nos permite optimizar nuestras aplicaciones, realizando llamadas a APIs solo cuando es necesario. Esta técnica no solo mejora el rendimiento, sino que también proporciona una experiencia de usuario más fluida y responsiva.

¿Cómo crear un buscador en React utilizando useEffect con dependencias?

Cuando desarrollamos aplicaciones que requieren búsquedas en tiempo real, necesitamos implementar un sistema que realice peticiones a una API solo cuando el usuario interactúa con la interfaz. En React, esto se logra combinando el estado local con el hook useEffect y sus dependencias. Vamos a explorar cómo crear un buscador que filtre posts según lo que el usuario escriba en un campo de entrada.

Configuración inicial del componente

Para comenzar, necesitamos crear un componente funcional que maneje tanto la entrada del usuario como los resultados de la búsqueda:

import React, { useState, useEffect } from 'react';

const SearchPost = () => {
  const [query, setQuery] = useState('');
  const [posts, setPosts] = useState([]);

  // Aquí irá nuestro useEffect

  return (
    <div>
      <h2>Lista de usuarios</h2>
      {/* Aquí irá nuestro input y la lista de resultados */}
    </div>
  );
};

export default SearchPost;

En este componente, hemos definido dos estados:

• query: almacena el texto que el usuario escribe en el campo de búsqueda
• posts: guarda los resultados obtenidos de la API

Implementación del useEffect con dependencias

El corazón de nuestro buscador es el hook useEffect que realizará las peticiones a la API. La clave está en incluir la variable query como dependencia para que la función se ejecute cada vez que cambie su valor:

useEffect(() => {
  fetch(`https://jsonplaceholder.typicode.com/posts?title=${query}`)
    .then(response => response.json())
    .then(data => setPosts(data));
}, [query]);

Este código realiza una petición a la API de JSONPlaceholder cada vez que el valor de query cambia. La URL incluye un parámetro de consulta que filtra los posts por título según lo que el usuario haya escrito.

Creación del input y visualización de resultados

Ahora necesitamos un campo de entrada para que el usuario pueda escribir su búsqueda y una forma de mostrar los resultados:

return (
  <div>
    <h2>Lista de usuarios</h2>
    <input 
      placeholder="Buscar por título" 
      value={query} 
      onChange={(event) => setQuery(event.target.value)} 
    />
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  </div>
);

El input está vinculado al estado query a través de su propiedad value, y cada vez que el usuario escribe algo, el evento onChange actualiza el estado con el nuevo valor. Esto desencadena la ejecución del useEffect, que realiza una nueva petición a la API.

¿Por qué es importante utilizar dependencias en useEffect?

Las dependencias en useEffect son fundamentales para controlar cuándo se ejecuta el código dentro del hook. Sin ellas, podríamos enfrentar varios problemas:

Optimización de rendimiento

Si no especificamos dependencias (dejando un array vacío), el efecto solo se ejecutaría una vez al montar el componente, lo que significa que nuestro buscador no respondería a los cambios en la entrada del usuario.

Por otro lado, si omitimos completamente el array de dependencias, el efecto se ejecutaría después de cada renderizado, lo que podría causar un exceso de peticiones innecesarias a la API.

Control preciso de las actualizaciones

Al incluir query como dependencia, nos aseguramos de que la petición a la API solo se realice cuando realmente necesitamos nuevos datos: cuando el usuario ha modificado su búsqueda.

useEffect(() => {
  // Este código solo se ejecuta cuando query cambia
  // ...
}, [query]);

Monitoreo de las peticiones

Para verificar que nuestras peticiones se están realizando correctamente, podemos utilizar las herramientas de desarrollo del navegador:

1. Abre la consola de desarrollador (F12 o clic derecho > Inspeccionar)
2. Ve a la pestaña "Network"
3. Escribe en el campo de búsqueda y observa cómo se generan nuevas peticiones

Esto nos permite confirmar que las peticiones solo se realizan cuando cambia el valor de query, optimizando así el uso de recursos.

¿Cómo funciona el flujo de datos en nuestro buscador?

El flujo de datos en nuestra aplicación sigue un patrón claro:

1. El usuario escribe en el campo de entrada
2. El evento onChange actualiza el estado query
3. El cambio en query desencadena el useEffect
4. Se realiza una petición a la API con el nuevo valor de búsqueda
5. Los datos recibidos actualizan el estado posts
6. El componente se vuelve a renderizar mostrando los nuevos resultados

Este flujo unidireccional es una de las fortalezas de React, ya que hace que el comportamiento de nuestra aplicación sea predecible y fácil de depurar.

La combinación de useState y useEffect con dependencias nos permite crear interfaces reactivas que responden a las acciones del usuario de manera eficiente, realizando operaciones costosas como las peticiones a APIs solo cuando es realmente necesario.

¿Has implementado buscadores en tiempo real en tus proyectos? ¿Qué otras optimizaciones has utilizado para mejorar la experiencia de usuario? Comparte tus experiencias en los comentarios.