DEV Community: ReactChallenges

🚀 New Free React Challenge: New Way of Passing Ref

ReactChallenges — Mon, 27 Apr 2026 20:54:44 +0000

A new free challenge is now available on ReactChallenges.com.

React 19 introduced a cleaner way to work with refs across components, reducing the need for forwardRef in many common scenarios.

This new exercise helps you practice that pattern with a real UI example.

What you'll build

A simple issue modal where users can:

Open the modal
Automatically focus the textarea when it appears
Close it with Cancel or Create

What you'll learn

How to create a ref in the parent component
How to pass a ref directly to a child component in React 19
How to control focus from outside the child component
How this compares to the previous forwardRef pattern

Why this matters

Refs are often needed for:

Modals
Search inputs
Forms
Custom UI primitives
Accessibility improvements

React 19 makes these interactions cleaner and easier to implement.

Try the challenge

👉 https://www.reactchallenges.com

Composition vs Compound Components in React

ReactChallenges — Tue, 14 Apr 2026 08:58:38 +0000

In React, reusable UI usually follows two patterns: composition components and compound components. They are closely related, but they differ mainly in how state is handled and how the API is exposed.

Composition Components (no Context)

This is the most straightforward approach. You build UI by combining components and passing data through props.

Everything is explicit: each component receives what it needs directly from its parent.

This makes the system very flexible and easy to reuse, since every part is independent. You can take a subcomponent and use it anywhere without constraints.

The downside is that as the UI grows, you often end up with prop drilling and a lot of wiring code. Sharing behavior between related parts also becomes harder because there is no shared state mechanism.

In short: simple, explicit, and flexible, but can become verbose in complex UIs.

import Airbnb from "./Airbnb";

<Airbnb.Card>
  <Airbnb.ImageWrapper>
    <Airbnb.Image src={el.image} alt={el.title} />
    <Airbnb.Heart like={el.isFavorite} onClick={() => {}} />
    <Airbnb.Recomendation />
  </Airbnb.ImageWrapper>
  <Airbnb.Content>
    <Airbnb.Title title={el.title}>
      <Airbnb.Valoration average={el.average} reviews={el.reviews} />
    </Airbnb.Title>
    <Airbnb.Description description={el.description} />
    <Airbnb.Price price={el.price} nights={el.nights} />
    <Airbnb.Cancelation />
  </Airbnb.Content>
</Airbnb.Card>;

👉 Try it in practice: Composition Components Challenge

Compound Components (with Context)

This pattern introduces shared state using React Context. Instead of passing props through every level, a parent component provides state and child components consume it directly.

This creates a tighter relationship between components. From the outside, the API becomes very clean because users don’t need to manage all the props manually.

It works especially well for structured UI systems where components are meant to work together (like cards, modals, tabs, etc.).

The trade-off is that the relationship becomes implicit. Subcomponents depend on a parent provider and are not really meant to be used in isolation. Debugging can also be slightly less obvious because the data flow is hidden inside Context.

In short: more structured, cleaner API, but less flexible and more coupled.

import Airbnb from "./Airbnb";

<Airbnb.Card data={el}>
  <Airbnb.ImageWrapper>
    <Airbnb.Image />
    <Airbnb.Heart />
    <Airbnb.Recomendation />
  </Airbnb.ImageWrapper>
  <Airbnb.Content>
    <Airbnb.Title>
      <Airbnb.Valoration />
    </Airbnb.Title>
    <Airbnb.Description />
    <Airbnb.Price />
    <Airbnb.Cancelation />
  </Airbnb.Content>
</Airbnb.Card>;

👉 Try it in practice: Compound Components Challenge

Export styles

There are two common ways to expose these components.

Named exports give maximum flexibility and are easy to tree-shake, but they don’t communicate relationships between components very well.

import { Card, ImageWrapper, Image } from "./Airbnb";

<Card data={el}>
  <ImageWrapper>
    <Image />
  </ImageWrapper>
</Card>;

Namespaced exports group everything under a single object, which makes the structure much clearer and is often preferred for compound components or design systems. The trade-off is slightly more verbosity and sometimes less optimal tree-shaking.

import Airbnb from "./Airbnb";

<Airbnb.Card data={el}>
  <Airbnb.ImageWrapper>
    <Airbnb.Image />
  </Airbnb.ImageWrapper>
</Airbnb.Card>;

When to use each

Use composition when components are independent and you want full flexibility with explicit data flow.

Use compound components when the UI pieces are strongly related, share state, and benefit from a controlled and clean API.

Summary

Composition is about flexibility and explicitness.

Compound components are about structure and shared state.

Both are just different ways of organizing the same idea: composition in React.

🚀 𝗡𝗲𝘄 𝗖𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲 𝗼𝗻 𝗥𝗲𝗮𝗰𝘁 𝗖𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲𝘀: 𝗔𝗶𝗿𝗯𝗻𝗯 𝗖𝗮𝗿𝗱 𝘄𝗶𝘁𝗵 𝗖𝗼𝗺𝗽𝗼𝘂𝗻𝗱 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 + 𝗖𝗼𝗻𝘁𝗲𝘅𝘁

ReactChallenges — Mon, 13 Apr 2026 08:44:26 +0000

A new intermediate challenge is now live focused on one of the most powerful React patterns:

🧩 𝗖𝗼𝗺𝗽𝗼𝘂𝗻𝗱 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀
🌐 𝗥𝗲𝗮𝗰𝘁 𝗖𝗼𝗻𝘁𝗲𝘅𝘁
♻️ 𝗥𝗲𝘂𝘀𝗮𝗯𝗹𝗲 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲

In this challenge, you'll build a fully functional Airbnb-style card component using the Compound Components pattern powered by Context.

The goal is to create a flexible API where subcomponents share state implicitly through a provider — just like production-grade UI libraries.

This challenge will help you:

Understand how compound components scale
Use Context to avoid prop drilling
Design clean and extensible component APIs
Think in terms of composition over configuration

Perfect if you're moving beyond basic components and want to write more maintainable, real-world React code.

Try it here 👇
https://www.reactchallenges.com/challenges/airbnb-card-compound-component-context

𝗙𝗲𝗲𝗱𝗯𝗮𝗰𝗸 𝗶𝘀 𝗮𝗹𝘄𝗮𝘆𝘀 𝘄𝗲𝗹𝗰𝗼𝗺𝗲.

💬 What advanced React patterns would you like to practice next?

💾 Save this for your React learning path
♻ Repost to help other developers
👥 Share with your frontend team

🚀 New React Challenge: Play Soroban

ReactChallenges — Fri, 20 Mar 2026 11:21:02 +0000

Test your React skills with this interactive Soroban-style game!

A sequence of numbers appears on the screen, and after it ends, you need to verify the calculated sum.

Why Try This Challenge?

🧠 Practice state management and React hooks.
⏱️ Handle timed interactions and dynamic rendering.
🎯 Improve problem-solving in fun, bite-sized challenges.

Try It Here

👉 Play Soroban Challenge

✅ Your feedback is always welcome!

💬 Comment which React challenge you’d like to see next.

Level Up Your React Knowledge with Quizzes 🧩

ReactChallenges — Mon, 09 Mar 2026 15:37:03 +0000

A new feature has been added to ReactChallenges.com: interactive quizzes designed to help developers test and reinforce their React knowledge.

They are especially useful for developers preparing for React interviews or anyone who wants to quickly validate their understanding of key concepts.

Quiz Topics

The quizzes are currently organized into three main sections:

🧠 Core Concepts

Fundamental React topics such as component structure, JSX, state and props, event handling, forms, lists, and common design patterns used to structure React applications.

🪝 Hooks & Side Effects

Concepts related to React hooks and managing side effects, including state management with hooks, refs, context, reducers, and best practices for writing reusable custom hooks.

⚡ Rendering & Performance

Advanced topics focused on how React renders and updates the UI, including rendering behavior, reconciliation, hydration, concurrency features, Suspense, and performance optimization techniques.

Why quizzes?

Reading documentation is useful, but actively testing knowledge helps reinforce concepts much faster.

These quizzes aim to simulate the types of questions commonly encountered in technical interviews and real-world scenarios.

Try them here

👉 https://www.reactchallenges.com/quizzes

🚀 New FREE React Challenge: New way of data fetching

ReactChallenges — Mon, 09 Feb 2026 12:14:14 +0000

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

Renders the app title
Shows skeleton while loading
Renders characters after loading
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

🚀 Reflex Click Game: a tiny React challenge to practice timers and state

ReactChallenges — Mon, 02 Feb 2026 16:27:10 +0000

If you want a quick React challenge that hits the essentials—state, effects, timers, and UI feedback—this one is for you.

Build a reflex click game where:

A circle switches between red and green at random intervals
Clicking green increases the score
Clicking red ends the game
A timer counts down to 0
You win by reaching the target score before time runs out

Why this is a great mini‑project

Real practice with useEffect and cleanup
Timer logic + random intervals
Conditional rendering

Key skills you’ll use

React state management
Effect cleanup and timing
Controlled UI updates
Basic game logic

👉 Ready to play (and build)?
https://www.reactchallenges.com/challenges/reflex-click-game

🚀 New React Challenge: Tetris II

ReactChallenges — Mon, 19 Jan 2026 12:10:28 +0000

This is the second part of the Tetris challenge series. In this version, the user interface, game loop, and React components are already implemented for you.

Your goal is to focus purely on the game logic by completing the utility functions in utils.ts. You will implement piece generation, movement, collision detection, and row clearing to make the game functional.

🔗 https://www.reactchallenges.com/challenges/tetris-ii

🚀 New React Challenge: Tetris

ReactChallenges — Thu, 08 Jan 2026 22:37:29 +0000

I’ve just published a new challenge on reactchallenges.com, and this time it’s a classic: Tetris 🧩

This challenge focuses on real-world React problems like:

Game loops and timing
State management
Collision detection
Performance considerations

It’s also worth mentioning that this is the kind of challenge that has appeared in technical interviews at well-known companies, and it’s generally considered a difficult one — not because of obscure tricks, but because it requires solid fundamentals, clean architecture, and careful thinking.

Perfect if you want to test yourself against a truly non-trivial React problem.

🔗 https://www.reactchallenges.com/challenges/tetris

New Free React Challenge: Countdown ⏱️

ReactChallenges — Mon, 22 Dec 2025 17:59:09 +0000

Build a real countdown timer using useState and useEffect, and deal with state, side effects, and precise time updates.

Designed for beginners, but with the kind of edge cases you actually find in production.

30 minutes. No tutorials. Just React.

🔗 https://www.reactchallenges.com/challenges/countdown

🚀 New React Challenge: Build a Timed Quiz

ReactChallenges — Fri, 19 Dec 2025 13:11:42 +0000

Test your React skills by creating a quiz with randomized questions, a global timer, and step-based navigation using the provided components (Question, Timer, QuizHeader, Intro, Result).

💡 Simulates real test conditions: time limits, step progression, and precise scoring. Once done, create more questions to keep practicing!

https://www.reactchallenges.com/challenges/react-quiz

🚀 New React Challenge: Digital Segment Clock

ReactChallenges — Wed, 10 Dec 2025 12:49:39 +0000

Level up your React skills with our latest beginner-friendly challenge! Build a real-time digital clock using seven-segment-style digits.

No subscription required, completely free! ✅

Great for practicing state, effects, intervals, and Date object in React.

🔗 https://www.reactchallenges.com/challenges/digital-segment-clock