[Q&A] useStateとuseRefどちらが良い？

useStateとuseRefどちらが良い？

Form作成するときに下記の２つの方法があります。
useRefかuseStateです。
　どちらが最適なのでしょうか？
useState雨を使用している方が多い印象ですが、useRefを使用すると、
再レンダリングが毎回起きたりしないので、例えば送信ボタンを押すまで再レンダリングする必要がないと思うので、useRefの方が良いかなと思っています。
どちらがいいのでしょうか

           <input
              type="text"
              id="title"
              name="title"
              onChange={(e)=>ref.current = e.target.value}
            />

          <input
              type="text"
              id="title"
              name="title"
              onChange={(e)=>setState(e.target.value)}
            />

1Answer

@non_cal posted at 2022-09-06

まず、Reactでinputを使うときは

import { useState } from 'react';

const Field = () => {
  const [ text, setText ] = useState('');
  return <input value={text} onChange={(e)=>setText(e.target.value)} />
}

のようにinputのvalueに値を入れましょう。
というのも、こうしないとDOM(input)が持ってる値とtextの値が一致している保証が無いからです。

例えば初期値を設定したとしても、
↓のようにvalueを設定していないと入力欄に初期値は反映されません。

  const [ text, setText ] = useState('初期値');
  return <input onChange={(e)=>setText(e.target.value)} />

useRefの方はvalue={ref.current}と書いても入力時に反映されないので、このような用途では使えません。

結論として最適なのはuseStateですが、Reactでフォームを書くならReact Hook FormかReact Final Formを使いましょう！

1Like

Are you sure you want to delete the question?

useStateとuseRefどちらが良い？

1Answer

Your answer might help someone💌