HOCs vs Custom Hooks vs Render Props: Patterns Compared

HOCs vs Custom Hooks vs Render Props: Patterns Compared

Three patterns exist for reusing logic in React: HOCs, render props, and custom hooks. Here is how they compare and which to use today.

Higher-Order Components

A function that takes a component and returns a new wrapped component. Pre-hooks standard for logic reuse. Issues: nesting, prop collisions, hard to read.

Render Props

A component takes a function as a prop and calls it to render, passing shared state. Pre-hooks alternative to HOCs. Issues: deep callback nesting and inversion of control.

Custom Hooks

Functions starting with 'use' that encapsulate stateful logic and can be called from any component. The modern standard. Clean, composable, no nesting or prop collisions.

Why Hooks Won

Custom hooks solve the same problem as HOCs and render props, without their downsides. There is no wrapper nesting, no prop collisions, and logic composes naturally by calling multiple hooks.

When You Still See the Others

HOCs and render props appear in older codebases and some libraries. You should understand them to read that code, but you write custom hooks for new logic reuse.

Migrating

Both HOCs and render props can usually be refactored into a custom hook. The hook returns the shared state and logic, and components call it directly instead of being wrapped.

The Takeaway

HOCs wrap components, render props pass a function, custom hooks encapsulate logic. Custom hooks won because they avoid nesting and collisions. Understand all three to read code; write custom hooks.