Sabe aquele componente puro (Pure Component) que você cria no React e que praticamente nunca muda? Aquela função que é instanciada uma única vez, sempre igual?

Parabéns: você já aplicou o Singleton Pattern  — mesmo sem saber! 😄

singleton

Vamos entender como isso acontece na prática?

O que é o Singleton Pattern?

Singleton é um padrão de projeto que garante que uma classe tenha apenas uma instância e fornece um ponto de acesso global para ela.

Em apps React, um “componente singleton” acontece quando criamos algo que não precisa de novo estado ou novas instâncias cada vez que usamos.

Exemplo real no projeto ws-boilerplate-vite-react, é o componente Header :

// Design Patterns: Singleton
// https://deviq.com/design-patterns/singleton
export const Header = () => {
  return (
    
      WS Medical Records
    
  );
};

Esse Header:

  • Não guarda estado.
  • Não depende de props para alterar.
  • Sempre que chamado, é a mesma estrutura, a mesma lógica.

Isso é um Singleton disfarçado de componente funcional!

Como o React trata isso

O React já otimiza esses componentes de forma muito eficiente. Ao não guardar estado e não depender de props dinâmicas, ele pode:

  • Reutilizar instâncias na memória.
  • Evitar renders desnecessários.
  • Facilitar a previsão de comportamento.

Conclusão

No mundo real do React, muitos Singletons surgem naturalmente, principalmente em componentes puros, pequenos e previsíveis.

Entender isso te ajuda a:

  • Escrever componentes mais otimizados.
  • Melhorar a performance do seu app.
  • Reconhecer padrões de projeto que você já domina (sem sofrimento teórico!).

E aí, você sabia disso?

Referências

🚀 Werliton Silva

Especialista Frontend | Caçador de Bugs | Evangelizador do React desde 2017