React で DOM を操作する４つのパターン（useRef / useCallback）

React で DOM を操作する４つのパターン（useRef / useCallback）

February 19, 2022

コールバック Ref パターンがあまり使われていない（知られていない？）ように思われたので布教も兼ねて。

1. DOM のアタッチ時だけ処理が必要な場合 #

1-1. useRef + useEffect パターン # 

import { useRef, useEffect } from 'react';

function Component() {
  const ref = useRef();

  useEffect(() => {
    ref.current.innerHTML = 'Hello, world.';
  }, []);

  return <div ref={ref} />;
}

1-2. useCallback パターン # 

import { useCallback } from 'react';

function Component() {
  const setRef = useCallback((node) => {
    node.innerHTML = 'Hello, world.';
  }, []);

  return <div ref={setRef} />;
}

2. DOM のアタッチ後にも処理が必要な場合 #

2-1. useRef + useEffect パターン # 

import { useRef, useEffect } from 'react';

function Component() {
  const ref = useRef();

  useEffect(() => {
    ref.current.innerHTML = 'Hello, world.';
  }, []);

  const handleOnClick = () => {
    ref.current.innerHTML = 'Goodbye, world.';
  };

  return <div ref={ref} onClick={handleOnClick} />;
}

2-2. useRef + useCallback パターン # 

import { useRef, useCallback } from 'react';

function Component() {
  const ref = useRef();

  const setRef = useCallback((node) => {
    node.innerHTML = 'Hello, world.';
    ref.current = node;
  }, []);

  const handleOnClick = () => {
    ref.current.innerHTML = 'Goodbye, world.';
  };

  return <div ref={setRef} onClick={handleOnClick} />;
}

FYI：コールバック Ref # 

function Component() {
  return <div ref={(ref) => console.log(ref)} />; // <div></div>
}

コールバック Ref

React はまた「コールバック Ref」と呼ばれる、より細かい制御が可能な ref を設定するための別の方法をサポートします。

createRef() によって作成された ref 属性を渡す代わりに、関数を渡します。この関数は、引数として React コンポーネントのインスタンスまたは HTML DOM 要素を受け取ります。これを保持することで、他の場所からアクセスできます。

https://ja.reactjs.org/docs/refs-and-the-dom.html#callback-refs

See also: #