useRef

これはDOMに近づくために設計されたhookです.
実際、userefと宣言された変数はDOMだけでなく、任意の値を格納できる汎用JavaScriptオブジェクトです.
heap領域に格納されているため、アプリケーションが終了したり、ゴミ収集されたりする前にアクセスできます.
reactはhookで、自分でデータをバインドして更新する必要がある場合はDOMへの直接アクセスを避けるべきですが、focusのようにDOMにアクセスしなければならない場合は使用できます.
ステータス値を変更して構成部品を再表示しても、DOMが存在し、内部データが変更されているため、userefとして宣言された変数は再定義されません.

用途

domにアクセスしたい場合

レンダリングに関係なく、内部で使用される変数を宣言します。

レンダーの影響を受けない定数変数を使用したい場合にも使用できます.
この場合、DOMを割り当てずに宣言するだけでよい.

const cComp = () => {
  const mounted = useRef(false);

  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  useEffect(() => {
    mounted = true;
    console.log("gg");
  }, []);

  useEffect(() => {
    if (mounted.current) {
      console.log("a is changed");
    }
  }, [a]);

  useEffect(() => {
    if (mounted.current) {
      console.log("b is changed");
    }
  }, [b]);
};

使用

Class Component

class cComp extends React.component {
    input = null;

    onClick = () => {
        input.focus();
    }

    render() {
        <>
            <button onClick={this.onClick}>focus</button>
            <input ref={(ref) => { this.input = ref }}/>
        </>
    }
}

Functional Component

注意currentプロパティを使用してアクセスします.

import React, { useRef } from 'react';

const fComp = () => {
    const inputRef = useRef(null);

    const onClick = () => {
        input.current.focus();
    }

    return (
        <>
            <button onClick={onClick}>focus</button>
            <input ref={inputRef}/>
        </>
    )
}

リファレンス

https://minoo.medium.com/useref-%EA%B0%80-%EC%88%9C%EC%88%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9D%EC%B2%B4%EB%A5%BC-%EC%83%9D%EC%84%B1%ED%95%9C%EB%8B%A4%EB%8A%94-%EC%9D%98%EB%AF%B8%EB%A5%BC-%EA%B3%B1%EC%94%B9%EC%96%B4%EB%B3%B4%EA%B8%B0-8a0857fc5ebb