[React-native]useState or useRefどちらを使うべきか?

目的

useStateとuseRefの使い分けについて整理した。

概要

1.useStateは再レンダリングを起こす。useRefは起こさない。(違い）
2.useStateもuseRefも再レンダリング後もデータを保持する。（共通)

1. useState

function App() {
  const [value, setValue] = React.useState("");
  const handleInputChange = e => {
    setValue(e.target.value);
  };
  return (
    <div className="App">
      <Input value={value} onChange={handleInputChange} />
      <Button>Button</Button>
    </div>
  );
}

この場合InputはApp()で定義されているStateをvalueとして保持しているため、再レンダリングを引き起こす。
再レンダリングの対象はstateが定義されているAppにnestされているコンポーネント全てである。(ここではInputとButton)

子コンポーネントのInputでstateを定義した場合

const Input = () => {
  const [value, setValue] = React.useState("");
  const handleInputChange = e => {
    setValue(e.target.value);
  };
  return <input value={value} onChange={handleInputChange} />;
};

この場合はInputコンポーネントのみが再レンダリングされる（stateが定義されているのがInputなので）

レンダリングされる箇所が減って最適化されて速度が上がりそうだが、何でもかんでも最適化しすぎるとDomツリーが複雑になってかえってボトルネックになることもあるそうだ。

2. useRef

function App() {
  const [value, setValue] = React.useState("");
  const valueRef = React.useRef();

  const handleClick = e => {
    setValue(valueRef.current.value);
  };

  return (
    <div className="App">
      <h4>Value: {value}</h4>
      <input ref={valueRef} />
      <Button onClick={handleClick}>Button</Button>
    </div>
  );
}

普通は書かないが、こういう場合は再レンダリングが起きない。

まとめ

再レンダリングしたくないとか、単純にデータを保存したいだけならばuseStateでよさそう。
useRefはsetInterval関数などと使う場合に相性がいいらしい。別途調べなければ。。。