What is one-way data flow in React?

The short answer

One-way data flow means data in React always moves in one direction — from parent to child through props. A child component cannot directly modify the data it receives. If a child needs to change something, it calls a callback function passed by the parent. This makes the data flow predictable and easier to debug.

How it works

Copy
function Parent() {
  const [name, setName] = useState('John');
  return <Child name={name} onNameChange={setName} />;
}
function Child({ name, onNameChange }) {
  return (
    <div>
      <p>Hello, {name}</p>
      <button onClick={() => onNameChange('Jane')}>
        Change Name
      </button>
    </div>
  );
}

The flow is:

1. Parent owns the state (name)
2. Parent passes it down to Child as a prop
3. Child cannot modify name directly
4. Child calls onNameChange (a callback from the parent) to request a change
5. Parent updates its state, which flows back down to Child

Data flows down, events flow up. Always.

Why it matters

In two-way data binding (like older Angular), the view and model update each other automatically. This can make it hard to track where a change came from when something goes wrong.

With one-way data flow:

• You always know where the data comes from (the parent that owns the state)
• You always know what caused a change (an action or callback)
• Debugging is easier because you can trace the data flow in one direction

In practice

This is why React recommends "lifting state up." If two sibling components need to share data, you move the state to their common parent:

Copy
function App() {
  const [filter, setFilter] = useState('all');
  return (
    <div>
      <FilterBar
        filter={filter}
        onFilterChange={setFilter}
      />
      <ProductList filter={filter} />
    </div>
  );
}

FilterBar and ProductList do not communicate directly. The parent owns the state and passes it down to both.

Why interviewers ask this

One-way data flow is a core principle of React. Interviewers ask about it to see if you understand how data moves through a React application and why React was designed this way. It also leads into discussions about state management, prop drilling, and when to use context or external state libraries.