ReactのHooksを基礎から理解する（useRef, useMemo編）

useRef

useRefはDOMを操作するためのhooksです。

DOMを操作する

例：inputのDOMを操作する

const Demo: FC = () => {
  const inputRef = useRef<HTMLInputElement>(null)

  function selectInput() {
    const inputElem = inputRef.current
    if (inputElem) inputElem.select() // DOM node，DOMを操作するAPI
  }

  return (
    <div>
      <input ref={inputRef} defaultValue="hello world" />
      <button onClick={selectInput}>inputを選択する</button>
    </div>
  )
}

普通のJS値として使う

useRefでJS値を操作して、コンポーネントは再レンダリングされない

const Demo: FC = () => {
  const nameRef = useRef('JAPAN') // DOM ノードではなく，普通のJS変数です

  function changeName() {
    nameRef.current = 'JAPANESE' // refの値を更新しても，rerenderを実行しない （ stateを変更したら、 コンポーネントのrerenderが実行される ）
    // console.log(nameRef.current)
  }

  return (
    <>
      <p>name {nameRef.current}</p>
      <div>
        <button onClick={changeName}>change name</button>
      </div>
    </>
  )
}

useMemo

関数コンポーネントであれば、毎回stateを変更すれば、rerenderされます。useMemoはあるデータをキャッシュされ、毎回rerenderする必要がありません。
PS：useMemoは大量の計算を伴うデータで使用することができます。

const Demo: FC = () => {
  console.log('demo...')

  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(20)
  const [text, setText] = useState('hello') // stateの変更でコンポーネントがrerenderされる

  const sum = useMemo(() => {
    console.log('gen sum...') //　キャッシュする
    return num1 + num2
  }, [num1, num2])

  return (
    <>
      <p>{sum}</p>
      <p>
        {num1} <button onClick={() => setNum1(num1 + 1)}>add num1</button>
      </p>
      <p>
        {num2} <button onClick={() => setNum2(num2 + 1)}>add num2</button>
      </p>
      <div>
        <input onChange={e => setText(e.target.value)} value={text}></input>
      </div>
    </>
  )
}