react画像

本日はReactの『useRef』の使用方法について解説致します。

注意点としこの記事では、Reactの基本『useState』および『useEffect』フックの使用方法を理解しており精通があるという事を前提とした方々向けの解説となりますのでご了承下さい。

useRef Hookとは
- useRef 使用方法

useRef Hookとは

『useRef』フックを使用すると、更新時に再レンダリングがされる事なく、可変値を格納するために使用できDOMノード要素にアクセスするために使用できます。

『useRef』は再レンダリングを引き起こす事はないという事は

アプリケーションが『useState』フックを使用した場合

レンダリング時の回数を数えようとすると、フックが再レンダリングを繰り返し引き起こすため、無限ループに陥ります。

これを回避するために、『useRef』フックを使用し活用します。

つまり、『useRef』フックは以前の状態値を追跡し再レンダリング間で可変値を永続化させます。

それでは、全体コードを確認下さい。

import React from 'react';
import './App.css';
import {useState, useEffect, useRef} from 'react'

const App = () => {

  const [input, setInput] = useState("")
  const count = useRef(0) 

  useEffect(() => {
    count.current = count.current + 1;
    
  });
  
  return (
    <div>
<input type="text" value={input} 
onChange={(e) => setInput(e.target.value)} />

      <h1>Count: { count.current }</h1>
    </div>
  )
  }

export default App;

DEMO

f:id:dev04K:20211216150049g:plain

useRef 使用方法

ここからコードを分割しながら解説致します。

import {useRef} from 'react'

先程も仰いましたがこのフックにより、DOM要素にアクセスが可能となりますのでインポートがしっかり読ま込まれるようにして下さい。

import React from 'react';
import './App.css';
import {useState, useEffect, useRef} from 'react'

const App = () => {

  const [input, setInput] = useState("")
  const count = useRef(0) 

  useEffect(() => {
    count.current = count.current + 1;
    
  });
  }

export default App;

『useRef()』1つのアイテムのみを返し『current』と呼ばれるオブジェクトを返します。

返されるオブジェクトには、『current』に渡される引数が値であるプロパティとなります。

初期値を設定します『useRef(0)』

この初期値を『count』という定数に格納しておきます。

『useEffect』フックでは

現在の値を毎回『input』入力フィールドにテキストを入力することによって更新されていきます。

『current』にその割り当てられた値を持ち

コンポーネントを再レンダリングせずに、値を出力するためであり

値は変更されますが、コンポーネントには反映されません。

これは、コンポーネントを再レンダリングせずにDOM要素のコンポーネントまたはプロパティの値を変更できるため便利な機能となります。

  
  return (
    <div>
<input type="text" value={input} 
onChange={(e) => setInput(e.target.value)} />

      <h1>Count: { count.current }</h1>
    </div>
  )
  }

export default App;

コンポーネントにJSXを出力していきます

『useRef』ではこのように、簡単にDOM要素を永続的に操作することが可能となります。

以前の状態値から状態値を変更する場合は、『useRefフック』を使用しそれらを永続化することをお勧め致します。

注意点としては、『useRef』フックは機能コンポーネントでのみ使用可能であることに注意してください

『current』の引数が渡されなかった場合に返されるオブジェクトには『undefined』となります。

DOM要素を参照する場合の時は『React.createRefAPI』を使用して下さい。

以上となります！

最後までお読み頂きありがとうございます。

当ブログでの、この記事で貴方の役に立つ事を私は願っています。

deve.K

エンジニアが未来を切り開く。

React Hook useRef 使い方　基礎

useRef Hookとは

useRef 使用方法