🚀 New FREE React Challenge: New way of data fetching

Our latest React Challenge is live, and it’s all about taking your data fetching skills to the next level!

In this challenge, you'll replace the traditional useState/useEffect flow with the new Suspense-driven use() approach—all while keeping the same UI behavior.

---

🧩 Overview

Build a simple React page that fetches Rick and Morty characters using use(). The goal is to make your data flow more declarative, cleaner, and easier to maintain.

You’ll keep the same skeleton loading UI and character cards, but under the hood, your components will suspend until the data is ready.

---

✅ 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).
• Display the provided skeleton UI while data is pending.
• Render character cards after the data resolves.
• Maintain the existing layout and styling.

---

💡 Notes

• Create the fetch promise outside the component so it remains stable across renders.
• Use CharactersSkeleton as the Suspense fallback.
• Simulated latency is optional—you can remove it or adjust its duration without affecting the tests.
• Important: Tests will fail if you use useEffect; the focus is on use().

---

🧪 Tests

1. Renders the app title
2. Shows skeleton while loading
3. Renders characters after loading
4. Uses React use() instead of useEffect

---

This challenge is perfect for developers who want to modernize their React data fetching and get hands-on experience with suspense-first rendering.

🔥 Start the Challenge Now