En este artículo, entenderemos cómo se utiliza useDebugValue en el código fuente de Zustand.

useDebugValue se usa en una función llamada useStoreWithEquality. useDebugValue es un Hook de React que le permite agregar una etiqueta a un Hook personalizado en React DevTools.

Llame a useDebugValue en el nivel superior de su Hook personalizado para mostrar un valor de depuración legible:

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

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

En Zustand, useDebugValue se usa para dividir un objeto que se parece a continuación:

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

useDebugValue también se usa en src/react.ts

Sobre nosotros:

En Think Throo, tenemos la misión de enseñar las mejores prácticas inspiradas en proyectos de código abierto.

10 veces tus habilidades de codificación practicando conceptos arquitectónicos avanzados en Next.js/React, aprende las mejores prácticas y crea proyectos de nivel de producción.

Somos de código abierto: https://github.com/thinkthroo/thinkthroo (¡Danos una estrella!)

Mejora las habilidades de tu equipo con nuestros cursos avanzados basados ​​en arquitectura de base de código. ¡Comuníquese con nosotros en [email protected] para obtener más información!

Referencias:

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