Rescreva essa parte da string com as seguintes condições:
      1. Não elimine NENHUMA informação dada no artigo.
      2. Conceitos, expressões ou referências devem ser mantidas em inglês.
      3. Apenas transcreva o artigo para português brasileiro, dentro de seu contexto.
      4. Não remova as tags HTML e nem os "#thedivisor#".
      5. Você deve me enviar sua resposta em texto puro, sem markdown.

      #thedivisor#Now let’s run through our strategy for them:#thedivisor#<li class="leading-relaxed mb-1"><strong class="font-bold">Identify components that use state:</strong>
<ul class="ms-6 my-3 list-disc">
<li class="leading-relaxed mb-1"><code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">ProductTable</code> needs to filter the product list based on that state (search text and checkbox value).</li>
<li class="leading-relaxed mb-1"><code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">SearchBar</code> needs to display that state (search text and checkbox value).</li>
</ul>
</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">Find their common parent:</strong> The first parent component both components share is <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">FilterableProductTable</code>.</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">Decide where the state lives</strong>: We’ll keep the filter text and checked state values in <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">FilterableProductTable</code>.</li>#thedivisor#<li class="leading-relaxed mb-1"><code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">ProductTable</code> needs to filter the product list based on that state (search text and checkbox value).</li>
<li class="leading-relaxed mb-1"><code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">SearchBar</code> needs to display that state (search text and checkbox value).</li>#thedivisor#So the state values will live in <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">FilterableProductTable</code>.#thedivisor#Add state to the component with the <a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="/reference/react/useState"><code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">useState()</code> Hook.</a> Hooks are special functions that let you “hook into” React. Add two state variables at the top of <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">FilterableProductTable</code> and specify their initial state: