DEV Community: Duffman

Composition vs Compound Components in React

Duffman — 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.

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

Duffman — 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

Duffman — 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 🧩

Duffman — 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

Duffman — 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

Duffman — 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

Duffman — 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

Duffman — 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 ⏱️

Duffman — 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

Duffman — 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

Duffman — 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

🎮 7 React Game Challenges You Should Try This Month

Duffman — Tue, 09 Dec 2025 09:15:24 +0000

Want to level up your React skills while having fun? These 7 game challenges will put your hooks, state logic, and advanced patterns to the test in small but tricky projects.

1️⃣ Memory Card Game

🔗 https://www.reactchallenges.com/challenges/memory-card-game
📌 Level: Intermediate | ⏱ 60 min

Create a memory card game where cards are hidden, can be flipped, and you must find matches. Track user clicks and improve your state management skills.

2️⃣ Minesweeper

🔗 https://www.reactchallenges.com/challenges/minesweeper
📌 Level: Advanced | ⏱ 90 min

Implement the classic Minesweeper in React. Use hooks to manage the board, mines, and click counters, practicing complex logic and hook reuse.

3️⃣ Wordle

🔗 https://www.reactchallenges.com/challenges/wordle
📌 Level: Advanced | ⏱ 90 min

Recreate Wordle: guess the 5-letter word and color the tiles based on correctness. Great for practicing array handling and React effects.

4️⃣ Tic Tac Toe

🔗 https://www.reactchallenges.com/challenges/tic-tac-toe
📌 Level: Intermediate | ⏱ 60 min

The classic three-in-a-row game. Perfect for reviewing simple state and conditional rendering in React.

5️⃣ Connect Four

🔗 https://www.reactchallenges.com/challenges/connect-four
📌 Level: Advanced | ⏱ 60 min

Build a Connect Four game where players take turns dropping discs into a 6x7 grid. Excellent for practicing board logic and turn-based interactions.

6️⃣ Simon Says

🔗 https://www.reactchallenges.com/challenges/simon-says
📌 Level: Advanced | ⏱ 90 min

Create a Simon Says game in React. Users replicate color sequences that increase in difficulty. Perfect for practicing sequences, timing, and state management.

7️⃣ Color Game

🔗 https://www.reactchallenges.com/challenges/color-game
📌 Level: Intermediate | ⏱ 45 min

A simple color-guessing game: identify the slightly different square to level up before making a mistake. Quick, fun, and a great exercise for state updates and game logic.

💡 All of these challenges are designed to help you practice React hooks, state management, and building interactive UIs. Some require a subscription, but they’re worth the effort if you want to sharpen your skills!