Provider Pattern Padrão Provider

Última atualização: 2026-11-03

Provider Pattern Padrão Provider

O padrão Provider empacota os dados e os métodos que os alteram em um componente Provider com estado mais um hook personalizado correspondente: o estado vive dentro de useState ou useReducer, é repassado por meio de um Context, e o mundo externo lida apenas com leituras e escritas useXxx(). O Provider possui o estado e decide onde ele se aplica, o hook expõe uma API limpa, e os componentes no meio nunca ficam sabendo que um contexto existe.

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

const Ctx = createContext(null)

export function AppProvider({ children }) {
  const [state, setState] = useState(initial)
  return <Ctx.Provider value={{ state, setState }}>{children}</Ctx.Provider>
}

export const useApp = () => useContext(Ctx)   // the matching read hook

Retorna：Sem valor de retorno; esta entrada descreve um padrão de codificação e não uma função.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Depois de clicar no botão, o carrinho lê imediatamente "Cart (1): Apple" — o estado é gerenciado em CartProvider enquanto ItemList o lê e escreve por meio de useContext.

💡 Pontos-chave

🏷️ Mais Padrões de Componentes

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós