残念ながら、useRef は過小評価されています。これは最も人気のあるフックではありませんが、有益です。どこでどのように使用すれば、素晴らしい結果が得られるかを知ることができます。

基本から始めましょう

useRef は、レンダリングに必要のない値を参照できる React フックです。

React は、DOM 内のノードを参照する JavaScript オブジェクトを作成しているか、単純な値を作成しているかに関係なく、useRef を通じて作成した値を記憶し、再レンダリング中に失われることはありません。

それは私たちに何を与えてくれるでしょうか？

1. DOM 要素へのアクセス:

   • DOM 内の要素に簡単にアクセスできます。たとえば、入力フィールドの値を取得したり、特定の要素にフォーカスしたり、その高さと幅を取得したり、画面の特定の部分にスクロールしたりすることができます。

2. 可変値の保存:

   • コンポーネントを再レンダリングすることなく、必要なデータを記憶できます。たとえば、カウンターまたはタイマーが必要な場合は、useState.
   ではなく useRef を選択します。

例

useRef の威力を説明する例をいくつか示します。

例 1: 数値への参照

import React, { useRef } from 'react';

const Counter = () => {
  const refCount = useRef(0);
  const refInputField = useRef(null);

  const onClick = () => {
    refCount.current = refCount.current   1;
    refInputField.current.focus();
  }

  return (
    
      
        Click me!
      
      >
  );
};

export default Counter;

この例では:

• refCount は数値への変更可能な参照です。
• refInputField は入力要素への参照です。
• ボタンをクリックすると、カウンタが増加し、入力フィールドにフォーカスが置かれます。

例 2: 以前の値を追跡する

useRef のもう 1 つの一般的な使用例は、以前の値を追跡することです。

import React, { useRef, useEffect, useState } from 'react';

const PreviousValue = () => {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  return (
    

      
Current Count: {count}
      
Previous Count: {prevCountRef.current}
       setCount(count   1)}>Increment
    
  );
};

export default PreviousValue;

この例では:

• prevCountRef は、count.
の以前の値を追跡します。
• useEffect フックは、カウントが変化するたびに prevCountRef.current を更新します。
• これにより、不必要な再レンダリングをトリガーせずに、現在と以前の両方のカウントを表示できます。

useRef を使用した高度なヒントとコツ

1. レンダー間での値の保持

useRef を使用すると、useState とは異なり、再レンダリングを行わずにレンダリング間で値を保持できます。これは、UI に直接影響しないが覚えておく必要がある値を保存する場合に特に便利です。

例: コンポーネントのレンダリング数を追跡します。

import React, { useRef, useEffect } from 'react';

const RenderCounter = () => {
  const renderCount = useRef(0);

  useEffect(() => {
    renderCount.current  = 1;
  });

  return (
    

      
This component has rendered {renderCount.current} times
    
  );
};

export default RenderCounter;

2. サードパーティのライブラリとの統合

useRef は、チャート ライブラリとの統合、ビデオ プレーヤーの管理、アニメーションの処理など、DOM 要素の直接操作が必要なサードパーティ ライブラリを操作する場合に非常に役立ちます。

例: チャート ライブラリの統合。

import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

const ChartComponent = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const ctx = chartRef.current.getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
          label: 'Sales',
          data: [65, 59, 80, 81],
        }],
      },
    });
  }, []);

  return ;
};

export default ChartComponent;

3. 複雑なアプリケーションでの不必要な再レンダリングの回避

パフォーマンスが重要な複雑なアプリケーションでは、useRef を使用して可変オブジェクトを保存すると、不必要な再レンダリングを回避できます。

例: 可変状態オブジェクトの保存。

import React, { useRef } from 'react';

const MutableState = () => {
  const state = useRef({
    name: 'John Doe',
    age: 30,
  });

  const updateName = (newName) => {
    state.current.name = newName;
    console.log('Name updated:', state.current.name);
  };

  return (
    

       updateName('Jane Doe')}>
        Update Name
      
    
  );
};

export default MutableState;

4. クロージャの問題を回避する

useRef を使用すると、レンダリング間で持続する値への安定した参照が提供されるため、クロージャの問題を回避できます。

例: 古い状態を避けるための useRef を使用したタイマー。

import React, { useRef, useState, useEffect } from 'react';

const Timer = () => {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(countRef.current   1);
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return 
Count: {count}
;
};

export default Timer;

結論

フックは素晴らしいので、ぜひ使ってみてください。 React の仕組みを理解し、フックを正しく適用すれば、多くのことを達成できます。 useRef は次の場合に特に強力です:

• DOM 要素へのアクセスと操作。
• 再レンダリングをトリガーしない可変値を保存します。
• レンダリング間で値を保持します。
• サードパーティ ライブラリとの統合。
• 複雑なアプリケーションでの不必要な再レンダリングを回避します。
• 閉鎖の問題を軽減します。

useRef を理解して活用することで、より効率的かつ効果的な React コンポーネントを作成できます。フックの真の力は、フックの動作を理解し、慎重に適用することにあります。

useState が常に正しい答えであるとは限らないことをご存知ですか?