状態ソース コードでの useDebugValue の使用法について説明します。

この記事では、Zustand のソース コードで useDebugValue がどのように使用されているかを理解します。

useDebugValue は useStoreWithEquality という名前の関数で使用されます。 useDebugValue は、React DevTools のカスタム フックにラベルを追加できる React フックです。

カスタム フックの最上位で useDebugValue を呼び出して、読み取り可能なデバッグ値を表示します。

// Pulled from https://react.dev/reference/react/useDebugValue
import { useDebugValue } from 'react';

function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? 'Online' : 'Offline');
  // ...
}

Zustand では、次のようなオブジェクトのスライスに useDebugValue が使用されます。

const slice = useSyncExternalStoreWithSelector(
  api.subscribe,
  api.getState,
  api.getInitialState,
  selector,
  equalityFn,
)

useDebugValue は src/react.ts でも使用されます

私たちについて:

Think Throo では、オープンソース プロジェクトからインスピレーションを得たベスト プラクティスを教えるという使命を担っています。

Next.js/React の高度なアーキテクチャ概念を実践してコーディング スキルを 10 倍にし、ベスト プラクティスを学び、実稼働レベルのプロジェクトを構築します。

私たちはオープンソースです — https://github.com/thinkthroo/thinkthroo (スターを付けてください!)

コードベース アーキテクチャに基づいた高度なコースでチームのスキルを向上させます。詳細については、hello@thinkthroo.com までお問い合わせください!

参考文献:

1. https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L51

2. https://react.dev/reference/react/useDebugValue

3. https://github.com/pmndrs/zustand/blob/0a4f9d0f71477c5ef399191acc19e25674d0d3c4/src/react.ts#L42

以上が状態ソース コードでの useDebugValue の使用法について説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。