今回の記事はReact初学者様には、まだ教えるべきかどうか悩みました
なぜかと言いますと
ほとんどの場合ではReactフックで『useDebugValue』を使用する必要はないからです。
ですが、Reactカスタムフックの複雑さによっては役立つ場合があります。
『useDebugValue』フックが、何なのかそれを使用する方法やそして、いつそれを使用する必要があるかについて初学者様に解説していきます。
カスタムフックに精通し複雑化したカスタムフックを書いていく事になれば、将来この記事は貴方にとって役立つ事は間違いないでしょう。
useDebugValueとは？
『useDebugValue』フックは、Facebookの『Reactdev』ツールと連携して機能致します、カスタムフックのデバッグ情報をプリントアウトするために使用され
フックの値を確認するよりも簡単な形式で開発ツールに情報を記録できるようになります。
それだけではなく、他の人が貴方のフックに関する情報を簡単に確認でき
貴方のフックに関する詳細情報をすばやく確認も可能となるので、貴方のフックにも非常に役立ちます。
コンソールやネットワーク情報にアクセスできるのと同じように、ブラウザにダウンロードしブラウザの開発ツール内のタブとしてアクセスできる拡張機能の一部となります。
※事前にChromeの拡張機能である『React Developer Tools』を有効化しておいて下さい。
『useDebugValue』の使用は非常に簡単となっており、カスタムフック内で関数を呼び出してあげます。
簡単な例で見ていきましょう
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』は文字列を引数として取るフックがあります。
この渡し方はごく一般的な方法となります。
const useUser = () => {
const [user, setUser] = useState(false)
useDebugValue(user ? 'No User' : 'yes User')
return [user, setUser]
}
const App = () => {
useUser()
フックの現在のステータスを強調するために、条件付きで文字列を変更するか、条件付きで関数を呼び出す必要があります。
『React devツール』で表示する文字列を条件付きで選択することにより、カスタムフックの基本的なステータスを決定するために使用されます。
フックを使用するコンポーネントをクリックすると、画面の右側にhooksラベルの付いたセクションが表示されます。
セクション内には『User』フックが表示され、その横に渡された値にはデバッグ情報が表示されます
それが『useDebugValue』となります。
このフックであるラベルとして機能しフックが何が起こっているのかを識別し開発ツールに情報を記録できるようになります。
『useDebugValue』のReactフックを使用しない場合のフックだと今回のコードではこのように表示されます。
非文字列パラメータ
useDebugValue(user)
非文字列パラメータを使用すると、パラメータの文字列ラベルが表示されますが、フックを『DebugValue』展開して詳細を表示すると『オブジェクト』の詳細を展開できるセクションが表示されます。
複数でのDebugValue
useDebugValue("test1")
useDebugValue("test2")
この場合、『useDebugValue』は配列に渡した場合とほとんど同じように機能し内部ではデバッグツールですべてのフックを1つの配列に結合するだけとなります。
カスタムフックが複雑になるにつれて、デバッグする必要がある場合は、上記の例のようにフックの状態を示す文字列を瞥見した方が簡単になることがあります。
useDebugValueはいつ使うのですか？
このフックを使用する際は、カスタムReactフックと組み合わせてのみ使用していく必要があります。
ですが、貴方が作成するカスタムフック全てにこの『useDebugValue』を追加していく必要性はありません。
複雑なフック時やフックの状態が明らかになっていなく確認したい場合のみとなります。
ほとんどの場合が必要がありません、なので今後貴方が必要になった時はこのフックを慎重に扱って下さい。
正しく使用すると、開発プロセスをよりスムーズかつ効率的に実行するのに役立ちます。
本日は以上となります。
最後まで読んで頂きありがとうございました。
当ブログのこの記事が今後の貴方の開発に役立つ事を願っております。