Seu Design System em React foi projetado pra te dar dor de cabeça depois?

O padrão do ecossistema React (utilizado por bibliotecas como Radix UI, Headless UI e Chakra UI) é criar componentes controlados (Controlled Components).

O que isso quer dizer? Que quem define e controla a mudança do estado (state) não é seu componente, mas o (componente) pai dele, através de props.

Mas algumas vezes um componente "uncontrolled" pode ser bem útil. Como, no React Native, escrever um texto e envolver esse texto com um componente com código assim:

<Pressable onPress={...}>{children}</Pressable>

Isso facilitaria criar elementos pressionáveis. Bem, não é sempre tão bom quanto parece.

Existem dois modos de exibição no React, que eu gosto de chamar de "By Trigger", e "Programmatic". Agora vamos pensar num Modal. O primeiro, "cria" UI a partir de um click ou interação com um elemento, como botão. O segundo, é acionado por código e não depende do usuário.

O problema do Uncontrolled Component é que ele só permite, necessariamente, que você use o primeiro modo. Não é possível acioná-lo por código, e mesmo que conseguisse (usando Context API e hooks nativos específicos), o código rapidamente se tornaria complexo demais desnecessariamente. Já os Controlled Components podem transitar entre os dois modos de forma fluida.

Em um Design System, uma das premissas mais importantes é que seus componentes sejam flexíveis. Você não vai querer precisar acionar por código um ótimo componente só pra descobrir que ele está sendo usado por toda a aplicação sem permitir isso. Que dor de cabeça.

Na dúvida, sempre que um componente exibir UI a partir de um evento, seja interação do usuário ou código, faça o seu estado ser controlado externamente, por exemplo: pelo componente pai.

Até a próxima!

---