In React:

👉 Data binding = how data moves between UI (DOM) and JavaScript (state)

There are mainly 2 types:

1. One-way binding
2. Two-way binding

👉 Data flows in ONE direction State -> UI

State -> UI (Render)

👉 React controls everything from state

function App() {
  const [name, setName] = React.useState("Prathamesh");

  return <h1>{name}</h1>;
}

👉 Flow:

• State = "Prathamesh"
• UI shows it

UI is just a reflection of state

👉 Data flows BOTH ways State ↔ UI

State -> Input field
Input change -> State update

React doesn’t give automatic two-way binding like Angular 👉 You create it manually

function App() {
  const [name, setName] = React.useState("");

  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
  );
}

State -> input value
User types -> onChange -> updates state
State updates -> UI updates

👉 Looks like two-way, but actually:

Warning: It’s still ONE-WAY + event handling

👉 React ALWAYS follows:

One-way data flow

Even in “two-way binding” case:

• UI does NOT directly change state
• It sends an event -> then state updates

State -> UI

State -> UI
UI -> Event -> State update -> UI

• Angular -> true two-way binding (automatic)
• React -> controlled, explicit binding

👉 React gives more control and predictability

• Easier debugging
• Predictable data flow
• Better performance
• Scalable architecture

function Form() {
  const [email, setEmail] = React.useState("");

  return (
    <div>
      <input
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <p>Your email: {email}</p>
    </div>
  );
}

👉 Flow:

• Input updates state
• State updates UI

React = One-way data flow “Two-way binding” = manually controlled via events