React has revolutionized the way developers build user interfaces by introducing a component-based architecture. However, as applications grow in complexity, maintaining scalability and ensuring maintainability becomes crucial. This is where design patterns come into play, offering reusable solutions to common problems. In this article, we'll jump into some of the most widely used design patterns in React, accompanied by code examples.

 

// Container Component
import React, { Component } from 'react';
import PresenterComponent from './PresenterComponent';

class ContainerComponent extends Component {
  state = {
    data: [],
  };

  componentDidMount() {
    // Fetch data and update state
  }

  render() {
    return <PresenterComponent data={this.state.data} />;
  }
}

export default ContainerComponent;

// Presenter Component
import React from 'react';

const PresenterComponent = ({ data }) => (
  <div>
    {data.map(item => (
      <div key={item.id}>{item.name}</div>
    ))}
  </div>
);

export default PresenterComponent;

// HOC for adding authentication
import React from 'react';

const withAuth = (WrappedComponent) => {
  const isAuthenticated = true; // Check authentication logic here

  return class extends React.Component {
    render() {
      if (isAuthenticated) {
        return <WrappedComponent {...this.props} />;
      } else {
        return <p>Please log in to access this content.</p>;
      }
    }
  };
};

export default withAuth;

// Usage of HOC
import React from 'react';
import withAuth from './withAuth';

const MyComponent = () => (
  <div>
    <h1>Authenticated Component</h1>
  </div>
);

export default withAuth(MyComponent);

// Render Props Component
import React from 'react';

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

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

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

export default Mouse;

// Usage of Render Props Component
import React from 'react';
import Mouse from './Mouse';

const App = () => (
  <div>
    <h1>Move the mouse around!</h1>
    <Mouse render={({ x, y }) => (
      <p>The current mouse position is ({x}, {y})</p>
    )} />
  </div>
);

export default App;