React useDebugValueフックとは 使い方
本日の記事はReact初学者様には、まだ教えるべきかどうか悩みました
なぜかと言いますと
ほとんどの場合ではReactフックでuseDebugValue
を使用する必要はないからです。
ですが、Reactのカスタムフックの複雑さによっては役立つ場合があります。
useDebugValueフックが、何なのかそれを使用する方法やそして、いつそれを使用する必要があるかについて初心者様に解説していきます。
カスタムフックに精通し複雑化したカスタムフックを書いていく事になれば、将来この記事はあなたにとって役立つ事は間違いないでしょう。
useDebugValueとは?
useDebugValueフックは、FacebookのReact 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ラベルの付いたセクションが表示されます。
上記の画像のように、セクション内にはUser
フックが表示され、その横に渡された値にはデバッグ情報が表示されています。
それがuseDebugValue
となります。
このフックであるラベルとして機能しフックが何が起こっているのかを識別し開発ツールに情報を記録できるようになります。
useDebugValueの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を追加していく必要性はありません。
複雑なフック時やフックの状態が明らかになっていなく確認したい場合のみとなります。
ほとんどの場合が必要がありません、事前に当記事をブックマークしておき、今後あなたが必要になった時は、このフックを思い出して、またいつでも学習しにお戻り下さい。
その際は、このフックを慎重に扱うように心がけて下さい。
正しく使用すると、開発プロセスをよりスムーズかつ効率的に実行するのに役立ちます。
本日は以上となります。
最後まで読んで頂きありがとうございました。