React useDebugValueフックとは 使い方

React useDebugValueフックとは 使い方

本日の記事はReact初学者様には、まだ教えるべきかどうか悩みました

なぜかと言いますと

ほとんどの場合ではReactフックでuseDebugValueを使用する必要はないからです。

ですが、Reactのカスタムフックの複雑さによっては役立つ場合があります。

useDebugValueフックが、何なのかそれを使用する方法やそして、いつそれを使用する必要があるかについて初心者様に解説していきます。

カスタムフックに精通し複雑化したカスタムフックを書いていく事になれば、将来この記事はあなたにとって役立つ事は間違いないでしょう。

useDebugValueとは?

useDebugValueフックは、FacebookReact dev tool拡張機能と連携して機能致します。

カスタムフックのデバッグ情報をプリントアウトするために使用され、フックの値を確認するよりも簡単な形式で開発ツールに情報を記録できるようになります。

それだけではなく、他の人があなたのフックに関する情報を簡単に確認でき、あなたのフックに関する詳細情報をすばやく確認も可能となるので、あなたのフックにも非常に役立ちます。

コンソールやネットワーク情報にアクセスできるのと同じように、ブラウザにダウンロードしブラウザの開発ツール内のタブとしてアクセスできる拡張機能の一部となります。

※事前にChrome拡張機能である『React Developer Tools』を有効化しておいて下さい。

useDebugValueの使用は非常に簡単となっており、カスタムフック内で関数を呼び出してあげます。

簡単な例で見ていきましょう

// useUser.js

import { useDebugValue, useState } from 'react';

//カスタムフック
const useUser = () => {

  const [user, setUser] = useState(false)

useDebugValue(user ? 'No User' : 'yes User')

  return [user, setUser]

}

const App = () => {

useUser()

  return (
<div className='App-header'>

</div>

カスタムフックであるuseUserフックにuseDebugValueは文字列を引数として取るフックがあります。

この渡し方はごく一般的な方法となります。

// useUser.js

const useUser = () => {

  const [user, setUser] = useState(false)

useDebugValue(user ? 'No User' : 'yes User')

  return [user, setUser]

}

const App = () => {

useUser()

フックの現在のステータスを強調するために、条件付きで文字列を変更するか、条件付きで関数を呼び出す必要があります。

React dev toolで表示する文字列を条件付きで選択することにより、カスタムフックの基本的なステータスを決定するために使用されます。

フックを使用するコンポーネントをクリックすると、画面の右側にhooksラベルの付いたセクションが表示されます。

オリジナルreactコード画像

上記の画像のように、セクション内にはUserフックが表示され、その横に渡された値にはデバッグ情報が表示されています。

それがuseDebugValueとなります。

このフックであるラベルとして機能しフックが何が起こっているのかを識別し開発ツールに情報を記録できるようになります。

useDebugValueのReactフックを使用しない場合のフックだと今回のコードではこのように表示されます。

オリジナルreactコード画像

非文字列パラメータ

useDebugValueフックを使用して、非文字列パラメータを表示するには、第二引数としてフォーマット関数を渡す必要があります。

import { useDebugValue } from 'react';

function useCustomHook(user) {
  useDebugValue(user, (user) => {
    return `User: ${user.toString()}`;
  });

  // ...
}

非文字列パラメータを使用すると、パラメータの文字列ラベルが表示されますが、フックをDebugValue展開して詳細を表示するとオブジェクトの詳細を展開できるセクションが表示されます。

これにより、デバッグツールでカスタムフックの値を見るときに、User:の前に渡された値が表示されます。

注意点として、フォーマット関数はパフォーマンス上の理由から、必要なとき以外は呼び出されないようにすることが重要です。

つまり、値が変更されていない場合は呼び出されないようにする必要があります。

これを達成するためには、フォーマット関数内で依存関係を定義する必要があります。

依存関係は、useDebugValueフックと同じように配列で指定することができます。

複数でのDebugValue

このフックを複数使用する場合、それぞれのカスタムフックで使用することができます。

例えば、下記のように、2つの異なる値に対してuseDebugValueを使用するカスタムフックを作成できます。

import { useDebugValue } from 'react';

function useCustomHook(value1, value2) {
  useDebugValue(value1, (value) => {
    return `Custom value 1: ${value.toString()}`;
  });

  useDebugValue(value2, (value) => {
    return `Custom value 2: ${value.toString()}`;
  });

  // ...
}

上記では、useCustomHookは2つの値を受け取り、それぞれuseDebugValueを使用しています。

それぞれの値に対するカスタムフォーマット関数を定義することで、デバッグツールで値を適切に表示できるようにしています。

useDebugValue("test1")
useDebugValue("test2")

上記の場合、useDebugValueは配列に渡した場合とほとんど同じように機能し内部ではデバッグツールですべてのフックを1つの配列に結合するだけとなります。

また、useDebugValueはReactフックであるため、関数コンポーネントの中で直接使用する事も可能なので覚えておいて下さい。

カスタムフックが複雑になるにつれて、デバッグする必要がある場合は、上記の例のようにフックの状態を示す文字列を瞥見した方が簡単になることがあります。

useDebugValueはいつ使うのですか?

このフックを使用する際は、カスタムフックと組み合わせてのみ使用していく必要があります。

ですが、あなたが作成するカスタムフック全てにこのuseDebugValueを追加していく必要性はありません。

複雑なフック時やフックの状態が明らかになっていなく確認したい場合のみとなります。

ほとんどの場合が必要がありません、事前に当記事をブックマークしておき、今後あなたが必要になった時は、このフックを思い出して、またいつでも学習しにお戻り下さい。

その際は、このフックを慎重に扱うように心がけて下さい。

正しく使用すると、開発プロセスをよりスムーズかつ効率的に実行するのに役立ちます。

本日は以上となります。

最後まで読んで頂きありがとうございました。

プライバシーポリシー

© 2023 Icons8 LLC. All rights reserved.

© [deve.K], 2023. React logo is a trademark of Facebook, Inc. JavaScript is a trademark of Oracle Corporation and/or its affiliates. jQuery and the jQuery logo are trademarks of the JS Foundation. TypeScript and the TypeScript logo are trademarks of the Microsoft Corporation. Next.js and the Next.js logo are trademarks of Vercel, Inc. Firebase and the Firebase logo are trademarks of Google LLC. All logos edited by [deve.K].