About
Back to overview

Exploring Advanced Component Patterns in React

June 14, 2020 - 5 min read
Main image for Exploring Advanced Component Patterns in React

React's component-based architecture fuels interactive web experiences, and understanding advanced patterns within this realm can significantly level up your app's functionality. This article explores sophisticated React component patterns, enhancing scalability, maintainability, and readability in your applications. We'll discuss real-world examples, illustrating how these patterns empower seamless user interface (UI) creation.

Dive into Compound Components

Compound components provide a robust way to handle cross-component state management without prop drilling, akin to HTML's <select> and <option> relationship. They leverage context, making state implicitly available to nested components, enhancing flexibility and readability.

For example, imagine a UI library offering a <Tabs> component. Using the compound components pattern, you could compose its function as follows:

<Tabs>
  <Tabs.Tab>First Tab</Tabs.Tab>
  <Tabs.Panel>First Panel Content</Tabs.Panel>

  <Tabs.Tab>Second Tab</Tabs.Tab>
  <Tabs.Panel>Second Panel Content</Tabs.Panel>
</Tabs>

Here, each component encapsulates its functionality, and <Tabs> implicitly manages the active state. This pattern enhances composition, allowing you to swap parts of the UI without restructuring logic, and avoiding prop drilling by sharing state and functionality implicitly.

Higher Order Components (HOCs)

HOCs, despite the slightly misleading name, are not components. They are functions that accept a component and return a new component with extended functionality. Prominent in libraries like react-redux's connect(), HOCs encourage code reuse and logic abstraction.

Consider a scenario where multiple components need to react to a browser window's resizing. Instead of duplicating this logic, you could create a HOC:

function withWindowSize(Component) {
  return class extends React.Component {
    state = { width: window.innerWidth, height: window.innerHeight };

    handleResize = () => {
      this.setState({ width: window.innerWidth, height: window.innerHeight });
    };

    componentDidMount() {
      window.addEventListener('resize', this.handleResize);
    }

    componentWillUnmount() {
      window.removeEventListener('resize', this.handleResize);
    }

    render() {
      return <Component {...this.props} {...this.state} />;
    }
  };
}

By wrapping components with withWindowSize, you inject props representing the window's dimensions, ensuring consistent logic handling across components.

Render Props Pattern

Render props refer to a technique where a component's children are a function, receiving the parent's state, and returning elements. This pattern, used in libraries like react-motion, offers flexibility in rendering components based on dynamic data changes.

Here’s a simplified example using a <MouseTracker> component, tracking the mouse position:

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

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

  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.children(this.state)}
      </div>
    );
  }
}

Usage would look like this:

<MouseTracker>
  {({ x, y }) => (
    <h1>The mouse position is ({x}, {y})</h1>
  )}
</MouseTracker>

This approach decouples the UI from the behavior, enabling reuse of the behavior logic across different components.

Prop Collections and Prop Getters

Prop collections help simplify the integration of common props required for specific interactions. Prop getters, on the other hand, are functions that return props, addressing the shortcomings of prop collections concerning composability and abstraction leaks.

For instance, suppose you have a list component where each item should handle a set of interactions (click, hover, etc.). You could implement prop getters to customize these interactions per item, ensuring encapsulation and preventing conflicts.

State Initializers and Controlled Components

State initializers give the initializing state control to the component user, similar to the defaultValue in <input />. Controlled components take this a step further, allowing the user to manage the state externally and pass it down as props. This pattern, commonly used in forms, enhances flexibility and integration with other form management systems.

For example, a <TextInput> component could accept a value prop, relinquishing control over its state:

function TextInput({ value, onChange }) {
  return <input value={value} onChange={onChange} />;
}

With this, users can directly manage the input's state externally, providing specific functionalities per use case.

The Provider Pattern

Frequently employed in libraries like react-redux or react-router, the Provider pattern utilizes React's context to pass data through the component tree without manually prop-drilling at each level. This pattern is integral for managing global application state or themes.

Here's a basic implementation of a theme provider:

const ThemeContext = React.createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

Consumers can access the context anywhere in their component tree, maintaining clean, readable top-level compositions.

Conclusion

Each pattern discussed offers unique solutions in abstracting logic, sharing state, and enhancing component structure within your React applications. By combining these approaches, you can handle complex functionalities with more straightforward, maintainable, and scalable codebases.

Whether you're managing local component states with Compound Components and Render Props or orchestrating global state with the Provider pattern, these advanced techniques equip you to build dynamic, efficient, and robust React applications. Happy coding!