Controlar o estado de seleção em componentes UI usando Shadcn/ui

Ao trabalhar com componentes de seleção em React, especialmente com a biblioteca Shadcn/ui, um dos desafios comuns é garantir que o estado seja atualizado corretamente quando o usuário faz uma escolha.

Recentemente, encarei um cenário onde precisava fazer a seleção de um número de 1 a 6 e queria que essa seleção refletisse na lógica do componente. O problema era que, mesmo com a implementação padrão, o estado não atualizava ao selecionar um item. A decisão fica mais saudável quando o time consegue medir o impacto depois.

A solução prática envolve usar o hook useState para manter o valor selecionado e passar uma função de atualização ao componente. Assim, toda vez que o usuário escolhe uma opção, o estado é atualizado imediatamente, garantindo que a interface e a lógica estejam sincronizadas. Sem esse critério, a solução pode parecer simples no começo e cara no suporte. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco.

import { useState } from "react". import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select". export default function NumeroSelector() {
  const [valor, setValor] = useState(''). return (
    <Select onValueChange={setValor} value={valor}>
      <SelectTrigger>
        <SelectValue placeholder="Escolha um número" />
      </SelectTrigger>
      <SelectContent>
        {[1, 2, 3, 4, 5, 6].map((num) => (
          <SelectItem key={num} value={String(num)}>{num}</SelectItem>
        ))}
      </SelectContent>
    </Select>
  ). }

Esse padrão é simples, mas resolve o problema de sincronização entre a UI e o estado do componente. Para quem trabalha com componentes customizados ou bibliotecas específicas, é importante garantir que o controle de estado seja feito de forma clara. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. A decisão fica mais saudável quando o time consegue medir o impacto depois.

Na sua experiência, já passou por alguma situação onde o controle do estado em componentes de terceiros deu trabalho? Como você resolveu?