// Presentational Component
const UserProfile = ({ user }) => (
  

    
{user.name}
    
{user.email}
  
);

// Container Component
class UserProfileContainer extends React.Component {
  state = { user: null };

  componentDidMount() {
    // Fetch user data here
    fetchUser().then(user => this.setState({ user }));
  }

  render() {
    return this.state.user ?  : 
Loading...
;
  }
}

This pattern improves code reusability by allowing presentational components to be easily reused across different contexts.

2. Higher-Order Components (HOC)

Higher-Order Components (HOCs) are one of the most powerful design patterns in React. They allow developers to reuse component logic by creating a function that takes a component and returns a new enhanced component. HOCs are useful for tasks like injecting props, wrapping components with additional functionality, or implementing conditional rendering.

The most common use cases for HOCs include:

• Managing authentication logic
• Wrapping components with UI frameworks
• Adding logging or analytics
• Fetching and passing data to a component

Example:

// HOC for conditional rendering
function withAuth(Component) {
return function AuthComponent(props) {
return props.isAuthenticated ? &lt;Component {...props} /> : <p>Please log in to continue</p>;
};
}

const Dashboard = (props) => <h1>Welcome to your dashboard</h1>;
const ProtectedDashboard = withAuth(Dashboard);

// Usage
<ProtectedDashboard isAuthenticated={true} />
 

This pattern allows you to abstract repetitive logic and apply it to multiple components with minimal code duplication.

3. Render Props Pattern

The Render Props pattern involves sharing logic between components by passing a function as a prop to a component. This function, known as a “render prop,” controls what content is rendered by the component. It provides a flexible way to handle component behavior and state sharing.

This pattern is useful when you need to encapsulate reusable logic and pass it to different components.

Example:

class MouseTracker extends React.Component {
state = { x: 0, y: 0 };

handleMouseMove = (event) => {
this.setState({ x: event.clientX, y: event.clientY });
};

render() {
return (
<div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
{this.props.render(this.state)}
</div>
);
}
}

// Usage
<MouseTracker render={({ x, y }) => <h1>Mouse is at ({x}, {y})</h1>} />
    

Render props provide greater flexibility than HOCs by allowing more control over what gets rendered and how data is passed down the component tree.

4. Controlled and Uncontrolled Components

In React, forms can be managed using either controlled or uncontrolled components. Understanding when to use each pattern is critical for managing user input efficiently.

Controlled Components: In a controlled component, the state of the input element is managed by React. The value of the input is driven by the state of the component, and any changes to the input trigger an update in the component’s state.

Uncontrolled Components: In an uncontrolled component, the state of the input is managed by the DOM, and React does not directly control its value. Instead, refs are used to access the input’s current value when needed.

Controlled Component Example:

class ControlledInput extends React.Component {
state = { value: '' };

handleChange = (event) => {
this.setState({ value: event.target.value });
};

render() {
return <input type="text" value={this.state.value} onChange={this.handleChange} />;
}
}

Uncontrolled Component Example:

class UncontrolledInput extends React.Component {
inputRef = React.createRef();

handleSubmit = () => {
alert(`Input value: ${this.inputRef.current.value}`);
};

render() {
return (
<div>
<input type="text" ref={this.inputRef} />
<button onClick={this.handleSubmit}>Submit</button>
</div>
);
}
}

Controlled components provide more control and flexibility, while uncontrolled components are easier to use in simpler forms.

Helpful – React.js Cheatsheet

5. Compound Components

The Compound Component pattern is useful when creating reusable components that need to communicate with each other while maintaining flexibility. It allows developers to build a component with sub-components that share internal state and logic, often using React’s context API for communication.
This pattern is common in UI libraries, such as a <Dropdown> component that consists of <DropdownMenu> and <DropdownItem> sub-components.

Example:

class Tabs extends React.Component {
state = { activeTab: 0 };

setActiveTab = (index) => {
this.setState({ activeTab: index });
};

render() {
return React.Children.map(this.props.children, (child, index) => {
return React.cloneElement(child, {
isActive: index === this.state.activeTab,
onClick: () => this.setActiveTab(index),
});
});
}
}

const Tab = ({ children, isActive, onClick }) => (
<button style={{ fontWeight: isActive ? 'bold' : 'normal' }} onClick={onClick}>
{children}
</button>
);

// Usage
<Tabs>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</Tabs>

Compound components make it easy to build complex, reusable UI components that allow consumers to define structure and logic.

6. Context API for State Management

React’s Context API allows developers to pass data through the component tree without having to pass props manually at every level. It’s especially useful for managing global state, such as theme, authentication, or user settings, that multiple components need access to.
Context API is a cleaner alternative to prop drilling, and it is a lightweight option compared to more complex state management libraries like Redux.

Example:

const ThemeContext = React.createContext('light');

class ThemedButton extends React.Component {
render() {
return (
<ThemeContext.Consumer>
{theme => <button className={theme}>Themed Button</button>}
</ThemeContext.Consumer>
);
}
}

// Usage
<ThemeContext.Provider value="dark">
<ThemedButton />
</ThemeContext.Provider>

By using the Context API, you can easily share state across multiple components without cluttering the component tree with unnecessary props.

Conclusion

React design patterns provide structure, clarity, and efficiency to application development. Whether you’re working on a small project or a large-scale application, understanding and implementing these patterns can drastically improve the quality of your code. From separating concerns with Presentational and Container Components to sharing state with the Context API, these patterns ensure that your code is modular, reusable, and scalable.

By mastering these design patterns, developers can write cleaner, more maintainable code, making it easier to collaborate and scale applications in the long run.