Software Engineering

Advanced React Patterns: Compound Components & More

As React apps scale, you’ll want to structure components for greater reusability and composability. Here are some powerful React patterns:

Compound Components

The compound components pattern creates component APIs with shared context:

// Parent exposes context through 'Box' component
function Layout({children}) {
  return <Box>{children}</Box>

// Children access shared context via Box
function Profile() {
  return (
      <Box p={2}>
        <h1>Jane Doe</h1>

This provides more flexible APIs than just props.

Render Props

With render props, components accept a function prop that returns a React element:

// Render prop component
function Mouse({ render }) {
  return render(mousePosition); 

// Usage
  render={position => (
    <h1>The mouse position is {position.x}, {position.y}</h1>

This allows components to dynamically determine what should render.

Higher-Order Components

A higher-order component (HOC) wraps a component to enhance it:

// HOC that handles logic
function withAuth(Component) {
  return props => (
    <Component {...props} /> 

// Enhanced component
function ProfilePage() {
  return <h1>Private Profile</h1>; 

export default withAuth(ProfilePage);

HOCs provide separation of concerns for component logic.


  • Compound components provide context through shared components
  • Render props allow components to determine rendering
  • HOCs enhance component logic by wrapping components

These patterns unlock powerful techniques for reusable, configurable React components.