Vocabulary: Higher-Order Component (HOC)

A design pattern used in React that is a function that takes in a component and returns a new component. (getting all this from ChatGPT)

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

import React from 'react';

function withBorder(Component) {
  return function(props) {
    return (
      <div style={{ border: '2px solid black', padding: '10px' }}>
        <Component {...props} />
      </div>
    );
  };
}

export default withBorder;

import React from 'react';
import Greeting from './Greeting';
import withBorder from './withBorder';

// Using the HOC to enhance the component
const EnhancedGreeting = withBorder(Greeting);

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <EnhancedGreeting name="Bob" />
    </div>
  );
}

export default App;

or something like

import React from 'react';

const withLoading = (WrappedComponent) => {
  return (props) => {
    const { isLoading, ...restProps } = props;

    if (isLoading) {
      return <div>Loading...</div>; // Display a loading indicator
    } else {
      return <WrappedComponent {...restProps} />;
    }
  };
};

export default withLoading;

import React from 'react';
import withLoading from './withLoading';

const DataComponent = ({ data }) => {
  return (
    <div>
      <h1>Data Component</h1>
      <p>{data}</p>
    </div>
  );
};

export default withLoading(DataComponent);

import React, { useState, useEffect } from 'react';
import DataComponent from './DataComponent';

const App = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState('');

  useEffect(() => {
    // Simulate an asynchronous operation (e.g., fetching data)
    setTimeout(() => {
      setData('Fetched data');
      setIsLoading(false);
    }, 2000);
  }, []);

  return (
    <div>
      <h1>App</h1>
      <DataComponent isLoading={isLoading} data={data} />
    </div>
  );
};

export default App;