HOC

Hight Order Component in typescript

import React, { useState, useEffect } from 'react';

type WithDataProps = {
  data: string;
};

export function withExtraData<P>(
  WrappedComponent: React.ComponentType<P & WithDataProps>
) {
  const ComponentWithExtraData = (props: P) => {
    const [data, setData] = useState<string | null>(null);

    useEffect(() => {
      const myData = await loadMyData();
      setData(myData);
    }, []);

    if (!data) {
      return <span>Loading...</span>;
    }

    return <WrappedComponent {...props} data={data} />;
  };
  return ComponentWithExtraData;
}