How does React handle data binding?

In React, data binding refers to how data flows between components and the UI. Unlike frameworks like Angular, which support two-way data binding out of the box, React primarily uses one-way data binding, meaning data flows in one direction: from parent to child components via props.

There are ways to simulate two-way data binding in React, but it isn't automatic as in some other frameworks.

1. One-Way Data Binding

In React, the typical way to bind data is one-way, from a component's state to its rendered output. React’s data binding occurs by binding state variables to the JSX (HTML-like syntax in React). Whenever the state updates, React re-renders the component with the new data.

Example 1: One-Way Data Binding (state → UI)

import React, { useState } from 'react';

function App() {
  const [name, setName] = useState('John Doe');

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <button onClick={() => setName('Jane Doe')}>Change Name</button>
    </div>
  );
}

export default App;

Explanation:

• Here, name is bound to the <h1> element.
• When you click the button, setName is called, which updates the state, causing React to re-render the component with the updated value of name.

2. Simulating Two-Way Data Binding

Two-way data binding can be simulated by managing the state of an input element. You can bind the state to the input’s value and update the state whenever the input changes, making it seem like two-way data binding.

Example 2: Simulated Two-Way Data Binding (UI ↔ state)

import React, { useState } from 'react';

function App() {
  const [text, setText] = useState('');

  const handleChange = (e) => {
    setText(e.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>You typed: {text}</p>
    </div>
  );
}

export default App;

Explanation:

• Here, the input's value is bound to text.
• When you type into the input field, the onChange handler updates the text state.
• The paragraph tag displays the updated state, simulating two-way data binding between the UI and the component's state.

Key Points:

• One-Way Binding: The state is passed from the component to the view/UI.
• Two-Way Binding Simulation: React can simulate two-way binding by using controlled components (e.g., inputs with value and onChange).

React's data binding ensures that the UI remains consistent with the component's state, creating predictable and efficient updates in the application.