Componentes Controlados vs. Não Controlados - Escolha quem é o proprietário do estado: o componente ou seu pai

Q: Qual é a principal diferença entre componentes controlados e não controlados?

Controlado: o pai é o proprietário do estado via props (value + onChange). O pai é a única fonte de verdade. Não Controlado: o componente gerencia seu próprio estado internamente. O pai pode lê-lo via ref ou receber notificações via callbacks. A convenção de prop default* sinaliza o estado inicial não controlado.

Q: Como um componente detecta se está em modo controlado ou não controlado?

Verifique se a prop controlada (value) é undefined. Se definida, use o valor controlado. Se undefined, use o estado interno.

Q: Como as ações de formulário do React 19 se relacionam com controlado vs. não controlado?

As ações de formulário usam inputs não controlados com defaultValue e leem valores do FormData. A distinção controlado/não controlado ainda se aplica; as ações de formulário favorecem a abordagem não controlada.

Q: Armadilha: O que acontece se você alternar entre modo controlado e não controlado durante o ciclo de vida do componente?

Mudar value de undefined para um valor definido (ou vice-versa) causa bugs e avisos do React. O modo deve ser decidido no momento da montagem e permanecer consistente. Correção: use um ref para rastrear o modo inicial e emitir um aviso se ele mudar.

Q: Armadilha: Por que um input controlado com onChange com debounce parece congelar?

Se o manipulador onChange atualizar o estado de forma assíncrona (por exemplo, com debounce), a prop value do input não é atualizada imediatamente. O React re-renderiza com o valor obsoleto, fazendo o input parecer congelado. Correção: atualize o estado local imediatamente e adie apenas o efeito colateral, não a atualização do estado.

Q: Como tipar um componente flexível que suporta ambos os modos, controlado e não controlado, em TypeScript?

Use tipagem opcional (pressed?: boolean) para que undefined sinalize o modo não controlado. Dê a defaultPressed um valor padrão razoável.

Q: Por que mudar defaultValue após a montagem não tem efeito?

defaultValue apenas define o estado inicial na primeira renderização. O React ignora as mudanças em defaultValue em renderizações subsequentes porque o estado interno já foi inicializado. Correção: use uma prop key para remontar o componente se o valor inicial precisar ser redefinido.

Receita

// Controlado - o pai é o proprietário do estado
function ControlledInput() {
  const [value, setValue] = useState("");
  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}
 
// Não Controlado - o DOM é o proprietário do estado
function UncontrolledInput() {
  const ref = useRef<HTMLInputElement>(null);
  const handleSubmit = () => console.log(ref.current?.value);
  return <input ref={ref} defaultValue="" />;
}
 
// Flexível - suporta ambos os modos
function FlexibleInput({
  value: controlledValue,
  defaultValue = "",
  onChange,
}: {
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
}) {
  const [internalValue, setInternalValue] = useState(defaultValue);
  const isControlled = controlledValue !== undefined;
  const value = isControlled ? controlledValue : internalValue;
 
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!isControlled) setInternalValue(e.target.value);
    onChange?.(e.target.value);
  };
 
  return <input value={value} onChange={handleChange} />;
}

Quando usar isso: Todo componente interativo deve decidir quem é o proprietário de seu estado. Use controlado quando o pai precisar ler ou modificar o valor. Use não controlado para casos mais simples onde o componente se gerencia. Construa componentes de biblioteca para suportar ambos.

Exemplo de Trabalho

import { useState, useRef, useCallback, type ReactNode } from "react";
 
// Um componente Toggle que suporta uso controlado e não controlado
interface ToggleProps {
  pressed?: boolean;
  defaultPressed?: boolean;
  onPressedChange?: (pressed: boolean) => void;
  children: ReactNode;
}
 
function Toggle({
  pressed: controlledPressed,
  defaultPressed = false,
  onPressedChange,
  children,
}: ToggleProps) {
  const [internalPressed, setInternalPressed] = useState(defaultPressed);
  const isControlled = controlledPressed !== undefined;
  const pressed = isControlled ? controlledPressed : internalPressed;
 
  const handleClick = useCallback(() => {
    const next = !pressed;
    if (!isControlled) {
      setInternalPressed(next);
    }
    onPressedChange?.(next);
  }, [pressed, isControlled, onPressedChange]);
 
  return (
    <button
      type="button"
      role="switch"
      aria-checked={pressed}
      onClick={handleClick}
      className={`px-4 py-2 rounded-full transition-colors ${
        pressed
          ? "bg-blue-600 text-white"
          : "bg-gray-200 text-gray-700"
      }`}
    >
      {children}
    </button>
  );
}
 
// --- Exemplos de uso ---
 
// Não controlado - o componente gerencia seu próprio estado
function SimpleToggle() {
  return (
    <Toggle
      defaultPressed={false}
      onPressedChange={(p) => console.log("Toggled:", p)}
    >
      Modo Escuro
    </Toggle>
  );
}
 
// Controlado - o pai possui e pode substituir o estado
function SyncedToggles() {
  const [enabled, setEnabled] = useState(false);
 
  return (
    <div className="flex gap-4">
      <Toggle pressed={enabled} onPressedChange={setEnabled}>
        Toggle A
      </Toggle>
      <Toggle pressed={enabled} onPressedChange={setEnabled}>
        Toggle B
      </Toggle>
      <p>Ambos estão: {enabled ? "LIGADOS" : "DESLIGADOS"}</p>
    </div>
  );
}

O que isso demonstra:

Um único componente que funciona em ambos os modos, controlado e não controlado.
A verificação isControlled determina qual fonte de estado usar.
O modo não controlado usa defaultPressed para o estado inicial.
O modo controlado permite que o pai sincronize múltiplas instâncias.

Mergulho Profundo

Como Funciona

Componentes controlados recebem seu valor atual via props e notificam mudanças através de callbacks. O pai é a única fonte de verdade.
Componentes não controlados gerenciam seu próprio estado internamente e opcionalmente notificam o pai através de callbacks.
A convenção de prop default* (ex: defaultValue, defaultChecked, defaultPressed) sinaliza o estado inicial não controlado.
Um componente detecta seu modo verificando se a prop controlada é undefined.
As ações de formulário do React 19 com useActionState podem simplificar padrões de formulário, mas a distinção controlado/não controlado ainda se aplica.

Parâmetros e Valores de Retorno

Convenção de Prop	Modo	Propósito
`value`	Controlado	Valor atual, definido pelo pai
`defaultValue`	Não Controlado	Valor inicial, o componente gerencia depois
`onChange`	Ambos	Callback notificando o pai sobre mudanças
`ref`	Não Controlado	Acesso imperativo para ler o valor do DOM

Variações

Hook useControllableState - extraia o padrão para um hook reutilizável:

function useControllableState<T>({
  value: controlledValue,
  defaultValue,
  onChange,
}: {
  value?: T;
  defaultValue: T;
  onChange?: (value: T) => void;
}): [T, (next: T) => void] {
  const [internalValue, setInternalValue] = useState(defaultValue);
  const isControlled = controlledValue !== undefined;
  const value = isControlled ? controlledValue : internalValue;
 
  const setValue = useCallback(
    (next: T) => {
      if (!isControlled) setInternalValue(next);
      onChange?.(next);
    },
    [isControlled, onChange]
  );
 
  return [value, setValue];
}
 
// Uso dentro de qualquer componente
function Slider({ value, defaultValue = 0, onChange, min = 0, max = 100 }: SliderProps) {
  const [current, setCurrent] = useControllableState({
    value,
    defaultValue,
    onChange,
  });
  // ... renderiza com `current` e `setCurrent`
}

Ações de formulário do React 19 - formulários não controlados com ações de servidor:

function ContactForm() {
  async function submitAction(formData: FormData) {
    "use server";
    const email = formData.get("email") as string;
    await sendEmail(email);
  }
 
  return (
    <form action={submitAction}>
      <input name="email" type="email" defaultValue="" />
      <button type="submit">Enviar</button>
    </form>
  );
}

Notas TypeScript

Use tipagem opcional (value?: T) para a prop controlada para que undefined sinalize o modo não controlado.
Torne defaultValue obrigatório quando value não for fornecido, ou dê a ele um padrão razoável.
Considere um tipo de união discriminada para aplicação estrita de um ou outro, embora isso reduza a flexibilidade.

Armadilhas

Alternar entre controlado e não controlado - Mudar value de undefined para um valor definido (ou vice-versa) durante o ciclo de vida do componente causa bugs. O React avisa sobre isso. Correção: Decida o modo no momento da montagem e mantenha-o. Use um ref para rastrear o modo inicial.
Input controlado com atualização de estado atrasada - Se o manipulador onChange atualizar o estado de forma assíncrona (por exemplo, com debounce), o input parecerá congelado. Correção: Atualize o estado local imediatamente e adie apenas o efeito colateral, não a atualização do estado.
onChange ausente em componente controlado - Fornecer value sem onChange cria um input somente leitura. O React avisa. Correção: Sempre combine value com onChange, ou use readOnly se for intencional.
defaultValue mudando após a montagem - Mudar defaultValue após a primeira renderização não tem efeito. Correção: Use uma prop key para remontar o componente se o valor inicial precisar ser redefinido.

Alternativas

Abordagem	Compromisso
Controlado	Controle total do pai; requer gerenciamento de estado no pai
Não Controlado	Mais simples; mais difícil para o pai ler ou sincronizar o estado
Flexível (ambos os modos)	Melhor para bibliotecas; maior complexidade de implementação
Ações de formulário do React 19	Ótimo para formulários; não controlado com manipulação do lado do servidor
Biblioteca de gerenciamento de estado	Zustand ou Redux podem atuar como o controlador para formulários complexos

FAQs

Qual é a principal diferença entre componentes controlados e não controlados?

Controlado: o pai é o proprietário do estado via props (value + onChange). O pai é a única fonte de verdade.
Não Controlado: o componente gerencia seu próprio estado internamente. O pai pode lê-lo via ref ou receber notificações via callbacks.
A convenção de prop default* sinaliza o estado inicial não controlado.

Como um componente detecta se está em modo controlado ou não controlado?

const isControlled = controlledValue !== undefined;
const value = isControlled ? controlledValue : internalValue;

Verifique se a prop controlada (value) é undefined.
Se definida, use o valor controlado. Se undefined, use o estado interno.

O que é o hook `useControllableState` e quando usá-lo?

É um hook reutilizável que encapsula a lógica de detecção controlado/não controlado.
Use-o dentro de qualquer componente que precise suportar ambos os modos para evitar duplicar o padrão.
Ele retorna [value, setValue] e lida com o estado interno, passagem controlada e callbacks onChange.

Como as ações de formulário do React 19 se relacionam com controlado vs. não controlado?

<form action={submitAction}>
  <input name="email" type="email" defaultValue="" />
  <button type="submit">Enviar</button>
</form>

As ações de formulário usam inputs não controlados com defaultValue e leem valores do FormData.
A distinção controlado/não controlado ainda se aplica; as ações de formulário favorecem a abordagem não controlada.

Armadilha: O que acontece se você alternar entre modo controlado e não controlado durante o ciclo de vida do componente?

Mudar value de undefined para um valor definido (ou vice-versa) causa bugs e avisos do React.
O modo deve ser decidido no momento da montagem e permanecer consistente.
Correção: use um ref para rastrear o modo inicial e emitir um aviso se ele mudar.

Armadilha: Por que um input controlado com `onChange` com debounce parece congelar?

Se o manipulador onChange atualizar o estado de forma assíncrona (por exemplo, com debounce), a prop value do input não é atualizada imediatamente.
O React re-renderiza com o valor obsoleto, fazendo o input parecer congelado.
Correção: atualize o estado local imediatamente e adie apenas o efeito colateral, não a atualização do estado.

Como tipar um componente flexível que suporta ambos os modos, controlado e não controlado, em TypeScript?

interface ToggleProps {
  pressed?: boolean;           // controlado
  defaultPressed?: boolean;    // não controlado
  onPressedChange?: (pressed: boolean) => void;
  children: ReactNode;
}

Use tipagem opcional (pressed?: boolean) para que undefined sinalize o modo não controlado.
Dê a defaultPressed um valor padrão razoável.

Você pode usar um tipo de união discriminada para impor estritamente props controladas ou não controladas em TypeScript?

Sim, você pode definir ramos de tipo separados para props controladas e não controladas usando uma união discriminada.
No entanto, isso reduz a flexibilidade porque os consumidores não podem omitir tanto value quanto defaultValue.
A maioria das bibliotecas prefere a abordagem flexível com props opcionais para ambos os modos.

Por que mudar `defaultValue` após a montagem não tem efeito?

defaultValue apenas define o estado inicial na primeira renderização.
O React ignora as mudanças em defaultValue em renderizações subsequentes porque o estado interno já foi inicializado.
Correção: use uma prop key para remontar o componente se o valor inicial precisar ser redefinido.

O que acontece se você fornecer `value` sem `onChange` em um input controlado?

O input se torna somente leitura porque o React impõe a prop value em cada renderização.
O React emite um aviso no console sobre um manipulador onChange ausente.
Correção: sempre combine value com onChange, ou adicione explicitamente o atributo readOnly se for intencional.

Quando você deve usar um componente controlado em vez de um componente não controlado?

Use controlado quando o pai precisar ler, validar ou sincronizar o valor entre vários componentes.
Use não controlado quando o componente puder se gerenciar e o pai só precisar do valor no envio.
Construa componentes de biblioteca para suportar ambos os modos para máxima flexibilidade.

Relacionados

Componentes Compostos - Componentes compostos frequentemente precisam de suporte controlado/não controlado
Máquinas de Estado - Formalize transições de estado para componentes controlados complexos
Padrões de Contexto - Compartilhe estado controlado entre árvores de componentes compostos

Receita

// Controlado - o pai é o proprietário do estado
function ControlledInput() {
  const [value, setValue] = useState("");
  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}
 
// Não Controlado - o DOM é o proprietário do estado
function UncontrolledInput() {
  const ref = useRef<HTMLInputElement>(null);
  const handleSubmit = () => console.log(ref.current?.value);
  return <input ref={ref} defaultValue="" />;
}
 
// Flexível - suporta ambos os modos
function FlexibleInput({
  value: controlledValue,
  defaultValue = "",
  onChange,
}: {
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
}) {
  const [internalValue, setInternalValue] = useState(defaultValue);
  const isControlled = controlledValue !== undefined;
  const value = isControlled ? controlledValue : internalValue;
 
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!isControlled) setInternalValue(e.target.value);
    onChange?.(e.target.value);
  };
 
  return <input value={value} onChange={handleChange} />;
}

Exemplo de Trabalho

import { useState, useRef, useCallback, type ReactNode } from "react";
 
// Um componente Toggle que suporta uso controlado e não controlado
interface ToggleProps {
  pressed?: boolean;
  defaultPressed?: boolean;
  onPressedChange?: (pressed: boolean) => void;
  children: ReactNode;
}
 
function Toggle({
  pressed: controlledPressed,
  defaultPressed = false,
  onPressedChange,
  children,
}: ToggleProps) {
  const [internalPressed, setInternalPressed] = useState(defaultPressed);
  const isControlled = controlledPressed !== undefined;
  const pressed = isControlled ? controlledPressed : internalPressed;
 
  const handleClick = useCallback(() => {
    const next = !pressed;
    if (!isControlled) {
      setInternalPressed(next);
    }
    onPressedChange?.(next);
  }, [pressed, isControlled, onPressedChange]);
 
  return (
    <button
      type="button"
      role="switch"
      aria-checked={pressed}
      onClick={handleClick}
      className={`px-4 py-2 rounded-full transition-colors ${
        pressed
          ? "bg-blue-600 text-white"
          : "bg-gray-200 text-gray-700"
      }`}
    >
      {children}
    </button>
  );
}
 
// --- Exemplos de uso ---
 
// Não controlado - o componente gerencia seu próprio estado
function SimpleToggle() {
  return (
    <Toggle
      defaultPressed={false}
      onPressedChange={(p) => console.log("Toggled:", p)}
    >
      Modo Escuro
    </Toggle>
  );
}
 
// Controlado - o pai possui e pode substituir o estado
function SyncedToggles() {
  const [enabled, setEnabled] = useState(false);
 
  return (
    <div className="flex gap-4">
      <Toggle pressed={enabled} onPressedChange={setEnabled}>
        Toggle A
      </Toggle>
      <Toggle pressed={enabled} onPressedChange={setEnabled}>
        Toggle B
      </Toggle>
      <p>Ambos estão: {enabled ? "LIGADOS" : "DESLIGADOS"}</p>
    </div>
  );
}

O que isso demonstra:

Um único componente que funciona em ambos os modos, controlado e não controlado.
A verificação isControlled determina qual fonte de estado usar.
O modo não controlado usa defaultPressed para o estado inicial.
O modo controlado permite que o pai sincronize múltiplas instâncias.

Mergulho Profundo

Como Funciona

Componentes controlados recebem seu valor atual via props e notificam mudanças através de callbacks. O pai é a única fonte de verdade.
Componentes não controlados gerenciam seu próprio estado internamente e opcionalmente notificam o pai através de callbacks.
A convenção de prop default* (ex: defaultValue, defaultChecked, defaultPressed) sinaliza o estado inicial não controlado.
Um componente detecta seu modo verificando se a prop controlada é undefined.
As ações de formulário do React 19 com useActionState podem simplificar padrões de formulário, mas a distinção controlado/não controlado ainda se aplica.

Parâmetros e Valores de Retorno

Convenção de Prop	Modo	Propósito
`value`	Controlado	Valor atual, definido pelo pai
`defaultValue`	Não Controlado	Valor inicial, o componente gerencia depois
`onChange`	Ambos	Callback notificando o pai sobre mudanças
`ref`	Não Controlado	Acesso imperativo para ler o valor do DOM

Variações

Hook useControllableState - extraia o padrão para um hook reutilizável:

function useControllableState<T>({
  value: controlledValue,
  defaultValue,
  onChange,
}: {
  value?: T;
  defaultValue: T;
  onChange?: (value: T) => void;
}): [T, (next: T) => void] {
  const [internalValue, setInternalValue] = useState(defaultValue);
  const isControlled = controlledValue !== undefined;
  const value = isControlled ? controlledValue : internalValue;
 
  const setValue = useCallback(
    (next: T) => {
      if (!isControlled) setInternalValue(next);
      onChange?.(next);
    },
    [isControlled, onChange]
  );
 
  return [value, setValue];
}
 
// Uso dentro de qualquer componente
function Slider({ value, defaultValue = 0, onChange, min = 0, max = 100 }: SliderProps) {
  const [current, setCurrent] = useControllableState({
    value,
    defaultValue,
    onChange,
  });
  // ... renderiza com `current` e `setCurrent`
}

Ações de formulário do React 19 - formulários não controlados com ações de servidor:

function ContactForm() {
  async function submitAction(formData: FormData) {
    "use server";
    const email = formData.get("email") as string;
    await sendEmail(email);
  }
 
  return (
    <form action={submitAction}>
      <input name="email" type="email" defaultValue="" />
      <button type="submit">Enviar</button>
    </form>
  );
}

Notas TypeScript

Use tipagem opcional (value?: T) para a prop controlada para que undefined sinalize o modo não controlado.
Torne defaultValue obrigatório quando value não for fornecido, ou dê a ele um padrão razoável.
Considere um tipo de união discriminada para aplicação estrita de um ou outro, embora isso reduza a flexibilidade.

Armadilhas

Alternar entre controlado e não controlado - Mudar value de undefined para um valor definido (ou vice-versa) durante o ciclo de vida do componente causa bugs. O React avisa sobre isso. Correção: Decida o modo no momento da montagem e mantenha-o. Use um ref para rastrear o modo inicial.
Input controlado com atualização de estado atrasada - Se o manipulador onChange atualizar o estado de forma assíncrona (por exemplo, com debounce), o input parecerá congelado. Correção: Atualize o estado local imediatamente e adie apenas o efeito colateral, não a atualização do estado.
onChange ausente em componente controlado - Fornecer value sem onChange cria um input somente leitura. O React avisa. Correção: Sempre combine value com onChange, ou use readOnly se for intencional.
defaultValue mudando após a montagem - Mudar defaultValue após a primeira renderização não tem efeito. Correção: Use uma prop key para remontar o componente se o valor inicial precisar ser redefinido.

Alternativas

Abordagem	Compromisso
Controlado	Controle total do pai; requer gerenciamento de estado no pai
Não Controlado	Mais simples; mais difícil para o pai ler ou sincronizar o estado
Flexível (ambos os modos)	Melhor para bibliotecas; maior complexidade de implementação
Ações de formulário do React 19	Ótimo para formulários; não controlado com manipulação do lado do servidor
Biblioteca de gerenciamento de estado	Zustand ou Redux podem atuar como o controlador para formulários complexos

FAQs

Qual é a principal diferença entre componentes controlados e não controlados?

Controlado: o pai é o proprietário do estado via props (value + onChange). O pai é a única fonte de verdade.
Não Controlado: o componente gerencia seu próprio estado internamente. O pai pode lê-lo via ref ou receber notificações via callbacks.
A convenção de prop default* sinaliza o estado inicial não controlado.

Como um componente detecta se está em modo controlado ou não controlado?

const isControlled = controlledValue !== undefined;
const value = isControlled ? controlledValue : internalValue;

Verifique se a prop controlada (value) é undefined.
Se definida, use o valor controlado. Se undefined, use o estado interno.

O que é o hook `useControllableState` e quando usá-lo?

É um hook reutilizável que encapsula a lógica de detecção controlado/não controlado.
Use-o dentro de qualquer componente que precise suportar ambos os modos para evitar duplicar o padrão.
Ele retorna [value, setValue] e lida com o estado interno, passagem controlada e callbacks onChange.

Como as ações de formulário do React 19 se relacionam com controlado vs. não controlado?

<form action={submitAction}>
  <input name="email" type="email" defaultValue="" />
  <button type="submit">Enviar</button>
</form>

As ações de formulário usam inputs não controlados com defaultValue e leem valores do FormData.
A distinção controlado/não controlado ainda se aplica; as ações de formulário favorecem a abordagem não controlada.

Armadilha: O que acontece se você alternar entre modo controlado e não controlado durante o ciclo de vida do componente?

Mudar value de undefined para um valor definido (ou vice-versa) causa bugs e avisos do React.
O modo deve ser decidido no momento da montagem e permanecer consistente.
Correção: use um ref para rastrear o modo inicial e emitir um aviso se ele mudar.

Armadilha: Por que um input controlado com `onChange` com debounce parece congelar?

Se o manipulador onChange atualizar o estado de forma assíncrona (por exemplo, com debounce), a prop value do input não é atualizada imediatamente.
O React re-renderiza com o valor obsoleto, fazendo o input parecer congelado.
Correção: atualize o estado local imediatamente e adie apenas o efeito colateral, não a atualização do estado.

Como tipar um componente flexível que suporta ambos os modos, controlado e não controlado, em TypeScript?

interface ToggleProps {
  pressed?: boolean;           // controlado
  defaultPressed?: boolean;    // não controlado
  onPressedChange?: (pressed: boolean) => void;
  children: ReactNode;
}

Use tipagem opcional (pressed?: boolean) para que undefined sinalize o modo não controlado.
Dê a defaultPressed um valor padrão razoável.

Você pode usar um tipo de união discriminada para impor estritamente props controladas ou não controladas em TypeScript?

Sim, você pode definir ramos de tipo separados para props controladas e não controladas usando uma união discriminada.
No entanto, isso reduz a flexibilidade porque os consumidores não podem omitir tanto value quanto defaultValue.
A maioria das bibliotecas prefere a abordagem flexível com props opcionais para ambos os modos.

Por que mudar `defaultValue` após a montagem não tem efeito?

defaultValue apenas define o estado inicial na primeira renderização.
O React ignora as mudanças em defaultValue em renderizações subsequentes porque o estado interno já foi inicializado.
Correção: use uma prop key para remontar o componente se o valor inicial precisar ser redefinido.

O que acontece se você fornecer `value` sem `onChange` em um input controlado?

O input se torna somente leitura porque o React impõe a prop value em cada renderização.
O React emite um aviso no console sobre um manipulador onChange ausente.
Correção: sempre combine value com onChange, ou adicione explicitamente o atributo readOnly se for intencional.

Quando você deve usar um componente controlado em vez de um componente não controlado?

Use controlado quando o pai precisar ler, validar ou sincronizar o valor entre vários componentes.
Use não controlado quando o componente puder se gerenciar e o pai só precisar do valor no envio.
Construa componentes de biblioteca para suportar ambos os modos para máxima flexibilidade.

Relacionados

Componentes Compostos - Componentes compostos frequentemente precisam de suporte controlado/não controlado
Máquinas de Estado - Formalize transições de estado para componentes controlados complexos
Padrões de Contexto - Compartilhe estado controlado entre árvores de componentes compostos

Componentes Controlados vs. Não Controlados - Escolha quem é o proprietário do estado: o componente ou seu pai

Buscar na documentação

Componentes Controlados vs. Não Controlados - Escolha quem é o proprietário do estado: o componente ou seu pai