React Props & One-Way Data Flow — Complete Interview Guide

Props Are Function Arguments

A React component is a function. Props are its arguments. Just as you can't modify a function argument inside the function body without side effects, a component must never modify its props:

// Component receives props like function arguments
function Greeting({ name, age }) {
  // ❌ Never do this — props are read-only
  name = 'Bob'; // this is a local mutation, doesn't affect the parent anyway

  return <p>Hello, {name}. You are {age} years old.</p>;
}

// Parent controls what props the child receives
<Greeting name="Alice" age={30} />

If a component receives an incorrect prop, the fix is to change what the parent passes — not to modify the prop inside the child.

One-Way Data Flow

Data in React flows in one direction: parent → child via props. A child component cannot directly change its parent's state. This makes the data flow predictable:

function Parent() {
  const [count, setCount] = useState(0);

  // Data flows DOWN via props
  return <Child count={count} onIncrement={() => setCount(c => c + 1)} />;
}

function Child({ count, onIncrement }) {
  // Child reads data from props — cannot directly change parent state
  // Changes move UP via callback props
  return <button onClick={onIncrement}>Count: {count}</button>;
}

To send data "up" the tree, a parent passes a callback function as a prop. The child calls the callback with the new value; the parent updates its state; React re-renders both with the new value. This is the only correct way for a child to influence its parent.

Lifting State Up

When two sibling components need to share state, the state must live in their closest common ancestor — this is "lifting state up":

// ❌ Each component has its own state — they can't share it
function TempInput() { const [val, setVal] = useState(0); ... }
function TempDisplay() { const [val, setVal] = useState(0); ... } // separate, can't sync

// ✅ State lifted to the parent — both siblings share the same source of truth
function TemperatureConverter() {
  const [celsius, setCelsius] = useState(0);

  return (
    <>
      <CelsiusInput  value={celsius}     onChange={setCelsius} />
      <FahrenheitDisplay celsius={celsius} />
    </>
  );
}

The children Prop

Any JSX you nest between a component's opening and closing tags becomes its children prop. This is how composable layout components are built:

function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}

// Anything between <Card> tags becomes children
<Card title="User Profile">
  <Avatar src={user.avatarUrl} />
  <p>{user.bio}</p>
</Card>

Prop Drilling — The Problem, Not the Solution

Prop drilling is when a prop is passed through multiple intermediate components that don't use it — they just relay it to a deeper child. It becomes a maintenance problem when the prop needs to reach many levels deep:

// Prop drilling — userId passes through App → Layout → Sidebar → UserMenu
// Layout and Sidebar don't need userId at all
function App() {
  return <Layout userId={user.id} />;
}
function Layout({ userId }) {
  return <Sidebar userId={userId} />;
}
function Sidebar({ userId }) {
  return <UserMenu userId={userId} />;
}
function UserMenu({ userId }) {
  return <a href={`/users/${userId}`}>Profile</a>;
}

Solutions: React Context (for ambient data read by many components), component composition (pass the rendered element as a prop instead of the data), or state management libraries for complex cases.

TypeScript Prop Typing

Always type props explicitly — it serves as documentation and catches mistakes at compile time:

// Inline type — good for simple components
function Button({ label, onClick, disabled = false }: {
  label: string;
  onClick: () => void;
  disabled?: boolean;  // optional prop — ? makes it optional, with default
}) {
  return <button onClick={onClick} disabled={disabled}>{label}</button>;
}

// Interface — good for larger or reused prop shapes
interface UserCardProps {
  user: {
    id: string;
    name: string;
    avatarUrl?: string;  // optional
  };
  onSelect: (id: string) => void;
  className?: string;
}

function UserCard({ user, onSelect, className }: UserCardProps) {
  return (
    <div className={className} onClick={() => onSelect(user.id)}>
      {user.name}
    </div>
  );
}

Props vs State — The Decision Rule

A simple framework for deciding where data should live:

• If the data comes from outside the component (passed by a parent) → it's a prop
• If the component owns and controls the data → it's state
• If multiple components need the same data → lift it to the closest common ancestor
• If many disconnected components need it → Context or external state management