React Two Way Binding

Adding two way binding to React via hooks

Previously, I had discussed that React lacks the two-way syntatic sugar that is Vue's v-model. This is how you would recreate that pattern in React.

Vue vs React

Create the useModel hook

      
import { useState } from 'react';

export function useModel(initialValue) {
  const [value, setValue] = useState(initialValue);
  return {
    value,
    onChange: setValue,
  };
}

This hook returns an object with both value and onChange, like Vue’s model binding system.

      
// MyInput.jsx
import React from 'react';

function MyInput({ model }) {
  return (
    <input
      value={model.value}
      onChange={(e) => model.onChange(e.target.value)}
    />
  );
}

export default MyInput;

It takes in one prop — model — which contains both the value and change handler.

      
import React from 'react';
import { useModel } from './useModel';
import MyInput from './MyInput';

function MyForm() {
  const username = useModel('');

  return (
    <div>
      <MyInput model={username} />
      <p>Hello, {username.value}</p>
    </div>
  );
}

Finally, consume the useModel React hook to pass a single model prop.

Conclusion

If you see the benefit of Vue's v-model but you're not in a position to change frameworks, a simple hook can provide that functionality.

Let me know if you found this content insightful. Feel free to reach out to me with any questions on LinkedIn.