findDOMNode非推奨に関する解説

警告: findDOMNodeはStrictModeで非推奨になりました

問題
この警告は、ReactのStrictModeモードでfindDOMNode関数を使用しているときに発生します。findDOMNodeは、ReactコンポーネントのDOMノードを取得するための関数ですが、StrictModeでは非推奨となっています。

原因

• コンポーネントの分離
  findDOMNodeを使用すると、コンポーネントがDOMに依存し、再利用性が低くなります。
• テストの困難さ
  findDOMNodeを使用すると、コンポーネントのレンダリングのテストが難しくなります。
• パフォーマンスへの影響
  findDOMNodeは、Reactの仮想DOMと実際のDOMの間のブリッジとして機能します。これにより、パフォーマンスが低下する可能性があります。

解決方法

例

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  const handleClick = () => {
    const node = myRef.current;
    // nodeはDOMノードへの参照です
  };

  return (
    <div ref={myRef} onClick={handleClick}>
      Click me!
    </div>
  );
}

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  const handleClick = () => {
    const node = myRef.current;
    // nodeはDOMノードへの参照です
  };

  return (
    <div ref={myRef} onClick={handleClick}>
      Click me!
    </div>
  );
}

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  const handleClick = () => {
    const node = myRef.current;
    // nodeはDOMノードへの参照です
  };

  return (
    <div ref={myRef} onClick={handleClick}>
      Click me!
    </div>
  );
}