[Feature Request] [hooks] input#value bindings with useState

[tomitheninja]

From facebook/react#18611 including dmytro-lymarenko's ideas

Summary

Many of the popular JavaScript frameworks support binding value to a HTMLInputElement

The purpose of value binding is to eliminate the need both the value and the onchange property.

I think, with the new useState syntax, it became possible to implement this in react with a nice syntax and no breaking changes.

Detailed design

function MyComponent() {
  const bind = useState('')
  const [value, setValue] = bind
  return (
    <input bind={bind} />
    // ...
  )
}

Alternatives

By introducing a new hook.
In my opinion, this is easier to learn.

const [value, bind] = useStateBind('')
<p>{value}</p>
<input bind={bind} />

[jquense]

What is the benefit of not passing the value? Seems like your introduce API complexity and possible confusion to save a very minimal amount of typing. You could always do something like this yourself with a custom hook

const useBinding = (defaultValue) => {
  const [value, onChange] = useState(defaultValue)

  return { value, onChange }
}

// ...

const bind = useBinding('')
<p>{bind.value}</p>
<input {...bind} />

[tomitheninja]

Almost every website has some sort of forms. So it is quite common to write the value, setValue pair.
By using a bind, the code will be cleaner and more failsafe.
And I think that this is quiet easy to learn and understand.

Consider these two examples:

<input type="text" bind={bind} placeholder="Hello World" />

vs

<input type="text" value={value} onChange={e => setValue(e.target.value)} placeholder="Hello World" />

While they are doing the same thing, the seconds one is longer, more difficult to understand and probably should be broken into multiple lines.

[itsMapleLeaf]

But with jquence's suggestion to make a custom hook, you're not going to be writing that. You'll be writing this:

<input type="text" placeholder="Hello World" {...bind} />

...which actually happens to be shorter than the proposed syntax, without introducing new API or new concepts

[MaxmaxmaximusGitHub]

api implies low-level things, what you offer ALREADY can be described by the available api. just create hooks folder and write your hook's there, as everyone does =)

And like my RFC ;) #155

[sergeysibara]

It would be great if exist an small standard library with a set of the most necessary hooks.
It’s bad when there is no standard, and everyone implements by himself such commonly used things as two way binding.

[gaearon]

Hi, thanks for your suggestion. RFCs should be submitted as pull requests, not issues. I will close this issue but feel free to resubmit in the PR format.