Building a Two-Way Binding Hook for React

React, designed with a unidirectional data flow, lacks built-in support for two-way data binding akin to Angular's ngModel. However, we can create a custom hook to achieve a similar effect. In this blog post, we'll explore how to build a simple two-way binding hook for React.

Understanding Two-Way Data Binding

In Angular, ngModel facilitates seamless synchronization of data between the model and the view. React, with its one-way data flow, prioritizes predictability. Nonetheless, there are scenarios where two-way data binding proves to be convenient.

Creating the Two-Way Binding Hook

Inside the src folder, create a new file named useTwoWayBinding.js. This file will house our custom hook.

// src/useTwoWayBinding.js
import React, { useState } from 'react';
 
function useTwoWayBinding(initialValue) {
  const [value, setValue] = useState(initialValue);
 
  const bind = {
    value,
    onChange: (e) => setValue(e.target.value),
  };
 
  return [value, bind];
}
 
export default useTwoWayBinding;

Utilizing the Custom Hook in a Component

Now, let's create a sample component that uses our custom two-way binding hook. In the src folder, create a file named ExampleComponent.js.

// src/ExampleComponent.js
import React from 'react';
import useTwoWayBinding from './useTwoWayBinding';
 
function ExampleComponent() {
  const [inputValue, inputBind] = useTwoWayBinding('');
 
  return (
    <div>
      <label>
        Input:
        <input type="text" {...inputBind} />
      </label>
      <p>Output: {inputValue}</p>
    </div>
  );
}
 
export default ExampleComponent;

Integrating the Component in App.js

Now, use our ExampleComponent in the src/App.js file.

// src/App.js
import React from 'react';
import ExampleComponent from './ExampleComponent';
 
function App() {
  return (
    <div className="App">
      <h1>React Two-Way Binding</h1>
      <ExampleComponent />
    </div>
  );
}
 
export default App;

Conclusion

While React's one-way data flow is powerful and promotes clean code, there are situations where two-way binding can be beneficial. This example, using a custom hook, provides a clean and concise solution for achieving two-way data binding in React.