# New Way of Data Fetching

> Build a simple React page that fetches Rick and Morty characters using the new Suspense-driven use() data fetching approach. The goal is to replace the standard useState/useEffect flow with use() while keeping the same UI behavior.

- Difficulty: beginner
- Tags: use, suspense, fetching, react 19
- Estimated time: 30 minutes
- Tests: 4
- Requires subscription: no

## Overview

Build a simple React page that fetches Rick and Morty characters using the new Suspense-driven `use()` data fetching approach. The goal is to replace the standard `useState`/`useEffect` flow with `use()` while keeping the same UI behavior.


## Requirements

- Fetch the character list from `https://rickandmortyapi.com/api/character/`.
- Use React Suspense with `use()` to read a stable promise (no `useEffect` + `useState` fetching).
- Show the provided skeleton UI while data is pending.
- Render character cards after the data resolves.
- Keep the existing layout and styling conventions.


## Notes

- Create the fetch promise outside the component so it is stable across renders.
- The Suspense fallback should be the `CharactersSkeleton` component.
- Simulated latency is optional; you can remove it or change its duration without breaking tests.
- The tests focus on using `use()` and not `useEffect`; using `useEffect` will fail even the title test.


## Tests

01. renders the app title
02. shows skeleton while loading
03. renders characters after loading
04. uses React use() instead of useEffect