easyFrontend

Explain the concept of 'unidirectional data flow' in React.

Q: Explain the concept of 'unidirectional data flow' in React.

**Core concept (TL;DR).** Data in React flows in **one direction**: parent → child via **props**. Children never write to their parent's data directly — they communicate **up** by calling **callback** props the parent provided. State lives in one place and updates flow downward, making the UI predictable and easy to trace. Props flow down · events bubble up via callbacks Parent (state) <rect x="190

792 views

Understand the problem

Describe what unidirectional data flow means in React and its implications for application architecture.

data flowstate managementarchitectureprops

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Child requests change via a callback

import { useState } from "react";

function LikeButton({ count, onLike }) {     // receives data + callback (down)
  return <button onClick={onLike}>👍 {count}</button>; // calls up, never mutates
}

export default function App() {
  const [likes, setLikes] = useState(0);     // owner of the state
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <LikeButton count={likes} onLike={() => setLikes((n) => n + 1)} />
      <p>Total likes: {likes}</p>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you pass data between components in React?

What is JSX?