🎁
Padrões

HOC vs Render Props vs Hooks

3 formas históricas de reutilizar lógica. Hooks ganhou — HOC e Render Props ainda existem em libs.

Definição

HOC (Higher-Order Component): função que recebe componente e retorna componente decorado (with-auth, with-router). Render Props: prop que é função, retornando JSX. Hooks: funções use* que encapsulam lógica. Hooks substituíram em 90% dos casos.

🔴 Problema

Antes dos hooks, reutilizar lógica entre componentes era complexo: HOCs criavam 'wrapper hell', Render Props criavam aninhamentos profundos.

Solução

Hooks resolvem 95% dos casos com código mais simples. HOCs ainda úteis para: integrar com libs antigas (connect do Redux), interceptar props/refs, error boundaries (que precisam ser class).

💡 Dica Senior

Em código novo, use Hooks. Se ver HOC ou Render Props em libs, é geralmente código pré-2019. forwardRef tecnicamente é um HOC.

Perguntas de Entrevista

🔗 Termos do dicionário
45/48