HOC pattern

[weikee94]

withLoader

import React from 'react';
import { LoadingSpinner } from '../components/LoadingSpinner';

export default function withLoader(Element, url) {
  return (props) => {
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      fetch(url)
        .then((res) => res.json())
        .then((res) => setData(res));
    }, []);

    if (!data) return <LoadingSpinner />;

    return <Element {...props} data={data} />;
  };
}

Listings

import React from 'react';
import withLoader from '../../hoc/withLoader';
import { Listing } from './Listing';
import { ListingsGrid } from './ListingsGrid';

export function Listings(props) {
  return (
    <ListingsGrid>
      {props.data.listings.map((listing) => (
        <Listing key={listing.id} listing={listing} />
      ))}
    </ListingsGrid>
  );
}

export default withLoader(
  Listings,
  'https://house-lydiahallie.vercel.app/api/listings'
);

stackblitz

Here are the main points about the Higher-Order Component (HOC) pattern and its considerations:

Separation of Concerns

• HOCs help in keeping reusable logic in one place, reducing the risk of introducing bugs when duplicating code throughout the application.
• By encapsulating specific functionality in HOCs, developers can maintain a more organized and modular codebase.

Naming Collisions

• Care must be taken to avoid naming collisions when using HOCs.
• HOCs may inadvertently override a component's prop. Handling accidental name collisions is essential, either by renaming the prop or merging the props appropriately.

Readability

• Composing multiple HOCs that pass props to wrapped elements can sometimes lead to confusion about which HOC is responsible for which prop.
• Maintaining readability and clarity in the code becomes challenging with complex compositions of HOCs.
• Debugging and scaling the application may become more difficult as a result.

In summary, while Higher-Order Components offer benefits in terms of code organization and reusability, developers should be mindful of potential naming collisions and consider the impact on code readability, especially when using multiple HOCs in a single component. Balancing these considerations is crucial for effective use of the HOC pattern in React applications.