비교하기

import React, { FC, Suspense } from 'react';

const WithSuspense =
  (Component: FC, fallback: React.ReactNode = null) =>
  (props: any) => {
    return (
      <Suspense fallback={fallback}>
        <Component {...props} />
      </Suspense>
    );
  };

export default WithSuspense;

import React, { FC, Suspense } from 'react';

const WithSuspense =
  <T extends {}>(Component: FC, fallback: React.ReactNode = null) =>
  (props: T) => {
    return (
      <Suspense fallback={fallback}>
        <Component {...props} />
      </Suspense>
    );
  };

export default WithSuspense;

import { FC, ReactNode, Suspense, useState } from 'react';

export type Test1 = {
  test: boolean;
};

const WithSuspense = <T extends {}>(Component: FC<T>, fallback?: ReactNode): FC<Omit<T, keyof Test1>> => {
  const WrappedComponent = ({ ...targetComponentProps }) => {
    const [test, setTest] = useState(false);

    return (
      <Suspense fallback={fallback}>
        <Component {...(targetComponentProps as T)} test={test} />
      </Suspense>
    );
  };

  return WrappedComponent;
};

export default WithSuspense;

-- Usage --
// Step 1.
import WithSuspense, { Test1 } from 'hocs/WithSuspense';
import { FC } from 'react';

interface ITableList extends Test1 {
  data: React.ReactNode[];
}
const TableList: FC<ITableList> = ({ data, test }) => {
  console.log(test);
  if (data.length === 0) return null;
  return <div>TEST</div>;
};

export default WithSuspense(TableList);

// Step 2.
<TableList data={[]} />

P.S. any Type 방식 사용해도 위와 동일하게 사용 가능, 조금 더 명시적으로 하기 위해 타입 추론 추가

import React, { FC, Suspense, useState } from 'react';

export type Test1 = {
  test: boolean;
};

const WithSuspense = (fallback?:React.ReactNode) => <T extends {}>(Component: FC<T>): FC<Omit<T, keyof Test1>> => {
  const WrappedComponent = ({ ...targetComponentProps }) => {
    const [test, setTest] = useState(false);

    return (
      <Suspense fallback={fallback}>
        <Component {...(targetComponentProps as T)} test={test} />
      </Suspense>
    );
  };

  return WrappedComponent;
};

export default WithSuspense;

-- Usage --
// Step 1.
import WithSuspense from 'hocs/WithSuspense';
import { FC } from 'react';

interface ITableList {
  data: React.ReactNode[];
}
const TableList: FC<ITableList> = ({ data }) => {
  console.log(test);
  if (data.length === 0) return null;
  return <div>TEST</div>;
};

export default WithSuspense(<div>Loading...</div>)(TableList);

// Step 2.
<TableList data={[]} />

Referrence