Forem: ReactChallenges

🥋 New coding katas are now live on ReactChallenges

ReactChallenges — Fri, 01 May 2026 11:27:07 +0000

We’ve just released a new section on ReactChallenges: coding katas.

Unlike traditional coding challenges, these are not focused on rankings, scores, or competition. Instead, they are designed for deliberate practice—short, focused exercises that help you improve specific skills through repetition.

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

What are katas?

Katas are small, self-contained coding exercises. Each one targets a specific concept or pattern so you can:

Practice the same idea multiple times
Strengthen your mental models
Improve fluency in React and JavaScript
Build consistency over time

There is no leaderboard, no timer pressure, and no comparison with others.

Why this approach?

Most platforms optimize for competition.

This one doesn’t.

The goal of katas is to reduce noise and focus on what actually makes you better at coding:

Repetition over novelty
Understanding over speed
Clarity over complexity

If you’ve used competitive platforms before, this is intentionally different.

Who are they for?

These katas are especially useful if you:

Want to reinforce JavaScript fundamentals
Prefer structured, low-pressure practice
Are preparing for interviews or real-world development
Want to build consistency in your coding routine

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

Less noise. More repetition. Better understanding.

New way of passing ref to child in React 19

ReactChallenges — Thu, 30 Apr 2026 16:07:17 +0000

If you have worked with refs in React, you probably know they have always felt a bit different from the rest of the API. Useful, yes—but also slightly awkward.

With React 19, that changes. Passing a ref to a child component is now much more natural because ref can be handled like a normal prop. That means less boilerplate, cleaner components, and a simpler mental model.

try this yourself, the Passing Refs in React 19 challenge on our platform lets you practice exactly this pattern.

How refs work (and why they were awkward)

A ref is just a way to keep a direct reference to something rendered by React, usually a DOM element. You normally use refs when you need to do something imperative: focus an input, scroll an element into view, measure size or position, or trigger methods like opening a modal.

function App() {
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <>
      <button onClick={() => inputRef.current?.focus()}>Focus input</button>

      <input ref={inputRef} />
    </>
  );
}

The parent owns the button, and the parent decides when the input should be focused. Because of that, the ref also belongs in the parent. The rule is simple: the ref should live wherever the action is controlled.

But what happens when the ref is inside the child?

function Input() {
  const ref = useRef<HTMLInputElement>(null);

  return <input ref={ref} />;
}

Now only the Input component can use that ref. The parent cannot call .focus(), scroll to it, measure it, or control it from outside. The ref becomes private—sometimes fine, but often not what you need.

And here's where the friction came in. Before React 19, ref was treated differently from normal props. You could not simply write <Input ref={inputRef} /> unless that component used forwardRef:

const Input = forwardRef<HTMLInputElement, Props>((props, ref) => {
  return <input ref={ref} {...props} />;
});

It worked, but it came with real costs: extra wrapper syntax, ref behaving differently from props, more complex TypeScript types, and awkward composition with memo or HOCs.

What React 19 changes

Now you can write this:

function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

No forwardRef. No special wrapper. No separate mental model.

The main benefit is consistency. Before, ref felt like a special exception in React. Now it follows the same idea as everything else: if the parent needs access to something, pass it down. That makes components easier to understand, easier to teach, and reduces noise in codebases full of tiny wrapper components whose only purpose was forwarding refs.

This also helps with advanced patterns. Sometimes you don't want to expose a DOM node—you want to expose methods. For example, a modal:

function Modal({ ref }) {
  const [open, setOpen] = useState(false);

  useImperativeHandle(ref, () => ({
    open: () => setOpen(true),
    close: () => setOpen(false),
  }));

  return open ? <div>Modal</div> : null;
}

Used like this:

function App() {
  const modalRef = useRef(null);

  return (
    <>
      <button onClick={() => modalRef.current.open()}>Open modal</button>

      <Modal ref={modalRef} />
    </>
  );
}

This pattern still works, but now the component itself is cleaner.

Refs were never difficult because of what they do. They were difficult because React treated them differently.

React 19 removes that friction. A ref is usually owned by the component that needs to use it—most of the time, the parent. The child simply receives that ref and connects it to something useful.

Now that ref behaves like a normal prop, the whole pattern feels much more natural.

If you want to solidify this concept, try the Passing Refs in React 19 challenge—it takes just a few minutes.

🚀 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.

👉 Try it in practice: Composition Components Challenge

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>;

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.

👉 Try it in practice: Composition Components Challenge

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

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