Question 1

O que é um controlled component no React?

Accepted Answer

Um controlled component é um elemento de formulário cujo valor é gerenciado pelo estado do React por meio da prop value e de um handler onChange. Isso significa que o React se torna a fonte única de verdade para esses dados. Diferentemente dos uncontrolled components, onde o DOM mantém seu próprio valor, os controlled components oferecem controle total sobre os dados do formulário e facilitam a validação em tempo real.

Question 2

Como criar um input controlado no React?

Accepted Answer

Um controlled input requer dois elementos essenciais: a prop value vinculada ao estado do React e um handler onChange para atualizar esse estado. Sem onChange, o input seria somente leitura, pois o React impediria qualquer modificação. Essa abordagem garante que o estado do React permaneça sincronizado com o valor exibido no input, permitindo validação imediata ou transformação dos dados inseridos.

Question 3

Qual é a diferença entre um controlled component e um uncontrolled component?

Accepted Answer

A diferença fundamental está na fonte de verdade dos dados. Um controlled component armazena seu valor no estado do React (fonte única de verdade), enquanto um uncontrolled component deixa o DOM gerenciar seu próprio valor, acessível por meio de uma ref. Os controlled components oferecem mais controle e facilitam a validação em tempo real, mas os uncontrolled components podem ser mais simples para formulários básicos sem validação complexa.

Formulários e Controlled Components

O que é um controlled component no React?

Resposta

Como criar um input controlado no React?

Resposta

Qual é a diferença entre um controlled component e um uncontrolled component?

Resposta

Como gerenciar múltiplos controlled inputs no mesmo formulário?

Como criar um checkbox controlado no React?

Outros temas de entrevista React / Next.js

Fundamentos de JavaScript

Fundamentos do React

React Hooks

Ciclo de vida dos componentes

React Router

Gerenciamento de estado com Context

Busca de dados e API

React Query (TanStack Query)

Styling & CSS-in-JS

Fundamentos do Next.js

TypeScript com React

Data Fetching no Next.js

Server Actions do Next.js

Roteamento e Navegação no Next.js

API Routes do Next.js

Metadata & SEO no Next.js

Middleware e Auth no Next.js

Testes em React

Zustand State Management

Otimização de Performance React

Error Boundaries & Error Handling

Advanced React Patterns

Recursos avançados do Next.js

Deploy e Produção com Next.js

Architecture & Design Patterns

React Server Components

Internacionalização do Next.js

React Security & Boas Práticas

Domine React / Next.js para sua proxima entrevista