Utilize o hook useDebugValue para adicionar rótulos personalizados a valores no React DevTools
Tags: webdev, javascript, react, nextjs
Published: 2023-04-19 18:49:59

<div class="markdown prose w-full break-words dark:prose-invert dark"><p>O React é uma biblioteca JavaScript popularmente utilizada para a criação de interfaces de usuário. Uma de suas principais características é a capacidade de rastrear e atualizar a árvore de elementos do DOM de forma eficiente.</p><p>Para auxiliar na depuração (debug) de uma aplicação React, é possível utilizar a ferramenta React DevTools, que permite visualizar a hierarquia de componentes e seus estados em tempo real.</p><p>O hook <code>useDebugValue</code> é uma ferramenta importante que pode ser utilizada em conjunto com o React DevTools para fornecer rótulos personalizados aos valores que são exibidos na ferramenta de depuração.</p><h2>O que é o hook useDebugValue?</h2><p>O hook <code>useDebugValue</code> é uma ferramenta que permite adicionar rótulos personalizados aos valores que são exibidos na ferramenta React DevTools. O hook é usado em conjunto com outros hooks do React, como <code>useState</code> e <code>useEffect</code>, e permite que um rótulo personalizado seja atribuído a um valor.</p><p>O <code>useDebugValue</code> é especialmente útil para valores que podem ser difíceis de entender ou que exigem um contexto adicional para serem compreendidos.</p><h2>Como utilizar o hook useDebugValue?</h2><p>Para utilizar o hook <code>useDebugValue</code>, é necessário importá-lo da biblioteca <code>react</code> e passar o valor a ser rotulado como parâmetro. Em seguida, é possível passar uma função como segundo parâmetro, que será responsável por fornecer o rótulo personalizado para o valor.</p><p>Por exemplo, suponha que você tenha um componente que utilize o hook <code>useState</code> para gerenciar o estado de um contador:</p><pre><div class="bg-black rounded-md mb-4"><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-jsx"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;

<span class="hljs-keyword">function</span> <span class="hljs-title function_">Counter</span>(<span class="hljs-params"></span>) {
  <span class="hljs-keyword">const</span> [count, setCount] = <span class="hljs-title function_">useState</span>(<span class="hljs-number">0</span>);

  <span class="hljs-keyword">return</span> (
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Count: {count}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =&gt;</span> setCount(count + 1)}&gt;Increment<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
  );
}
</code></div></div></pre><p>Para adicionar um rótulo personalizado para o valor <code>count</code>, é possível utilizar o <code>useDebugValue</code> da seguinte forma:</p><pre><div class="bg-black rounded-md mb-4"><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-jsx"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, { useState, useDebugValue } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;

<span class="hljs-keyword">function</span> <span class="hljs-title function_">useCounter</span>(<span class="hljs-params"></span>) {
  <span class="hljs-keyword">const</span> [count, setCount] = <span class="hljs-title function_">useState</span>(<span class="hljs-number">0</span>);

  <span class="hljs-title function_">useDebugValue</span>(count, <span class="hljs-function">() =&gt;</span> <span class="hljs-string">`Count: <span class="hljs-subst">${count}</span>`</span>);

  <span class="hljs-keyword">return</span> [count, setCount];
}

<span class="hljs-keyword">function</span> <span class="hljs-title function_">Counter</span>(<span class="hljs-params"></span>) {
  <span class="hljs-keyword">const</span> [count, setCount] = <span class="hljs-title function_">useCounter</span>();

  <span class="hljs-keyword">return</span> (
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Count: {count}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =&gt;</span> setCount(count + 1)}&gt;Increment<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
  );
}
</code></div></div></pre><p>Neste exemplo, o hook <code>useDebugValue</code> é utilizado para adicionar o rótulo "Count: " ao valor <code>count</code>. Agora, quando você inspecionar o componente <code>Counter</code> no React DevTools, o valor <code>count</code> será exibido como "Count: 0" (ou "Count: 1", "Count: 2", etc., dependendo do valor atual de <code>count</code>).</p><h2>Conclusão</h2><p>O hook <code>useDebugValue</code> é uma ferramenta útil para adicionar rótulos personalizados aos valores que são exibidos no React DevTools. Com o uso do <code>useDebugValue</code>, é possível tornar mais fácil a compreensão e depuração</p></div>