Reactガイドを読んでいくその272

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

フック API リファレンス

useRef

const refContainer = useRef(initialValue);

useRefは.current プロパティが渡された引数に初期化されているミュータブルなrefオブジェクトを返す。
子コンポーネントにコンポーネントに命令型でアクセスするというのがよくあるユースケースになる。

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

useRefは書き換え可能な値を.current プロパティ内に保持することが箱のようなもの。
useRef()はJavaScriptオブジェクトを作成する。
useRef()と {current: ...} というオブジェクトを作成することとの唯一の違いはuseRefは毎回レンダーで同じrefオブジェクトを返す点。

useRefは中身が変更になってもそのことを通知しない。
.currentプロパティを書き換えても再レンダーは発生しません。
DOMノードをrefに割り当て解除したりする際に何らかのコードを走らせたいという場合はコールバックrefを代わりに使用するとよい。

今日はここまで。