How to Extract Common Logic from React Components

There are several ways to extract common logic from React components:

1. Higher-Order Components (HOCs)

A Higher-Order Component is a function that takes a component and returns a new component. It enables reusing component logic.

Example:

jsx
function withUserData(WrappedComponent) {
  return class extends React.Component {
    state = {
      user: null
    };

    componentDidMount() {
      // Assuming the getUserData() method fetches user data from a service
      getUserData().then(user => this.setState({ user }));
    }

    render() {
      return <WrappedComponent {...this.props} user={this.state.user} />;
    }
  };
}

// Using Higher-Order Component
const EnhancedComponent = withUserData(MyComponent);

2. Render Props

Render Props is a pattern where a function is used as a child component to specify what content to render.

Example:

jsx
class UserData extends React.Component {
  state = {
    user: null
  };

  componentDidMount() {
    // Assuming the getUserData() method fetches user data from a service
    getUserData().then(user => this.setState({ user }));
  }

  render() {
    return this.props.render(this.state.user);
  }
}

// Using Render Props
<UserData render={user => user ? <MyComponent user={user} /> : <LoadingSpinner />} />

3. Custom Hooks

Custom Hooks allow you to extract component logic into reusable functions.

Example:

jsx
function useUserData() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    getUserData().then(userData => setUser(userData));
  }, []);

  return user;
}

// Using Custom Hook
function MyComponent() {
  const user = useUserData();

  if (!user) {
    return <LoadingSpinner />;
  }

  return <Profile user={user} />;
}

4. Context API

Context API allows you to pass data through the component tree without manually passing props at each level.

Example:

jsx
const UserContext = React.createContext();

// Context Provider
class UserProvider extends React.Component {
  state = {
    user: null,
  };

  componentDidMount() {
    // Assuming the getUserData() method fetches user data from a service
    getUserData().then(user => this.setState({ user }));
  }

  render() {
    return (
      <UserContext.Provider value={this.state.user}>
        {this.props.children}
      </UserContext.Provider>
    );
  }
}

// Context Consumer
function MyComponent() {
  return (
    <UserContext.Consumer>
      {user => user ? <Profile user={user} /> : <LoadingSpinner />}
    </UserContext.Consumer>
  );
}

// Using Context
<UserProvider>
  <MyComponent />
</UserProvider>

5. Component Composition

Component Composition is a fundamental pattern in React that allows you to pass child components to a parent component for rendering.

Example:

jsx
function UserProfile({ user, children }) {
  return (
    <div>
      <Profile user={user} />
      {children}
    </div>
  );
}

function MyComponent() {
  const user = useUserData();

  return (
    <UserProfile user={user}>
      {/* Other custom child components */}
    </UserProfile>
  );
}

These methods have their own pros and cons, and you can choose the most suitable approach based on your specific scenario and requirements.