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 → Solução

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 de entrevista

Tip

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

Código

// HOC (legado)
function withAuth(Component) {
  return function WithAuth(props) {
    const user = useAuth();
    if (!user) return <Login />;
    return <Component {...props} user={user} />;
  };
}
const ProtectedDashboard = withAuth(Dashboard);

// Render Props (legado)
<MouseTracker render={({ x, y }) => <div>{x}, {y}</div>} />

// Hook (moderno)
function useAuth() {
  const [user, setUser] = useState(null);
  // ... lógica
  return user;
}

function Dashboard() {
  const user = useAuth();
  if (!user) return <Login />;
  return <div>Olá, {user.name}</div>;
}

Perguntas de entrevista

Q.Quando ainda usar HOC?▾

A.1) Wrappers que adicionam props (withAuth, withRouter — Redux ainda usa). 2) Error Boundaries (precisam ser class). 3) Logging/Analytics que envolvem componente inteiro. Para outros casos, use hooks.

Q.Render Props onde sobrevivem?▾

A.<Formik render={...}>, <DragDropContext> e algumas APIs declarativas. Em componentes que recebem JSX dependente de state interno. Mas hooks geralmente são mais limpos.

Q.forwardRef é HOC?▾

A.Tecnicamente sim — recebe componente, retorna componente. Mas é específico para refs, não para reutilização de lógica geral. É a única forma de receber refs em componentes funcionais.

Termos relacionados

45/122← →