Como consumir una API con REACT 19 | use - suspense

En este artículo, exploraremos cómo consumir una API utilizando la nueva API use en React 19, una característica que simplifica la gestión de datos asíncronos en las aplicaciones.

Primero que nada te dejo el video de este articulo, no te olvides de suscribirte a mi canal! subo mucho contenido de este estilo 😁

Primero te dejo el codigo completo ;)

import {use, Suspense } from 'react';


const fetchUsers = async () => {
  const res = await 
  fetch('https://jsonplaceholder.typicode.com/users');
  return res.json();
};


const userPromise = fetchUsers();

const Users = () => {
  const users = use(userPromise);

  return (
    <ul>
      {users.map((user) => (
        <div key={user.id}>
          <h2>{user.name}</h2>
        </div>
      ))}
    </ul>
  );
};


function App() {
  return (
    <Suspense fallback={<h1>Loading...</h1>}>
      <Users />
    </Suspense>
  );
}

export default App;

Ahora si..

El Escenario

Supongamos que tienes una aplicación en la que necesitas consumir una API (ejemplo una API para traer nombres de usuarios). Anteriormente, habrías utilizado useEffect, pero con React 19, las cosas son diferentes. Ahora, puedes utilizar la API use, que permite manejar promesas de forma mucho mas simple.

Desglosando el Código

1. fetchUsers y userPromise

Primero, se define la función fetchUsers para obtener datos de una API y se almacena la promesa en userPromise.

const fetchUsers = async () => {

  const res = await fetch('https://jsonplaceholder.typicode.com/users');

  return res.json();

};

const userPromise = fetchUsers();  

2. El Componente Users

Luego, en el componente Users, se usa la API use para manejar la promesa:

const Users = () => {

  const users = use(userPromise);

  return (

    <ul>

      {users.map((user) => (

        <div key={user.id}>

          <h2>{user.name}</h2>

        </div>

      ))}

    </ul>

  );

};

3. Suspense en Acción

function App() {

  return (

    <Suspense fallback={<h1>Loading...</h1>}>

      <Users />

    </Suspense>

  );

}

Consideraciones

Es importante recordar que use no admite promesas creadas en la fase de renderizado, por lo que deben crearse fuera de esta fase, como se hizo con userPromise. Aunque de todas formas en el blog de react dicen que en un futuro van a traer soluciones al respecto.

Conclusión

React 19 introduce herramientas poderosas para simplificar el desarrollo de aplicaciones. La API use es una de ellas, haciendo que la gestión de datos asíncronos sea más intuitiva y eficiente.

Muchas Gracias!
Saludos,
Pablo.