React na Prática: Componentes controlados ou não Controlados

Controlled vs Uncontrolled

Uma decisão importante que afeta bastante na qualidade do seu código é determinar onde o estado de um componente deve residir, e esta decisão impacta diretamente a flexibilidade, reusabilidade e complexidade.

Um exemplo clássico desta decisão é a implementação de um modal: deve ele gerenciar seu próprio estado de visibilidade ou delegar este controle ao componente pai?

Componentes Controlados: Delegando o Controle

Em um componente controlado, o estado é gerenciado externamente pelo componente pai.

Esta abordagem oferece maior flexibilidade e permite que o componente pai coordene múltiplos estados relacionados.

Nessa abordagem, podemos dizer que a flexibilidade do Modal é alta, mas a
responsabilidade sobre ele também é, pois, o componente pai precisa manter a lógica necessária para abrir e fechar o modal.

// Exemplo de Modal controlado: export function Modal({ isOpen, onChangeIsOpen, children }) { // O componente recebe o estado como prop e delega mudanças através de callbacks return ( <dialog open={isOpen} onClose={() => onChangeIsOpen(false)} > {children} </dialog> ); } // Exemplo de uso: export function App() { const [isOpen, setIsOpen] = useState(false); return ( <div> <Modal isOpen={isOpen} onChangeIsOpen={setIsOpen}> <p>Greetings, one and all!</p> <button onClick={() => setIsOpen(false)}>OK</button> </Modal> <button onClick={() => setIsOpen(true)}>Open Modal</button> </div> ); } 

Componentes Não Controlados: Autonomia Interna

Por outro lado, componentes não controlados mantêm e gerenciam seu próprio estado internamente. Esta abordagem reduz a complexidade do componente pai e é ideal quando o comportamento do componente pode ser encapsulado de forma independente.

// Exemplo de modal não controlado: export function Modal({ children, onOpenChange }) { const [isOpen, setIsOpen] = useState(false); const handleOpenChange = (newState) => { setIsOpen(newState); onOpenChange?.(newState); // Opcional: notifica o pai sobre mudanças }; if (!isOpen) { return ( <button onClick={() => handleOpenChange(true)}>Open Modal</button> ); } return ( <dialog open onClose={() => handleOpenChange(false)} > {children} <button onClick={() => handleOpenChange(false)}>OK</button> </dialog> ); } // App.tsx function App() { return ( <Modal onOpenChange={(isOpen) => console.log('Modal state:', isOpen)}> <p>Greetings, one and all!</p> </Modal> ); } 

Esta decisão de design influencia diretamente a manutenibilidade e reusabilidade do seu código.

Use componentes controlados quando:

• O componente pai precisa coordenar múltiplos estados relacionados
• Você precisa de controle preciso sobre o comportamento do componente
• O estado do componente precisa ser sincronizado com outras partes da aplicação

Use componentes não controlados quando:

• O comportamento do componente é independente do resto da aplicação
• Você quer reduzir a complexidade do componente pai
• O componente pode funcionar de forma autônoma