Render Item Hook to use in flatlists in react-native

useRenderItem.tsx

import React, { useCallback } from "react";
import { ListRenderItem } from "react-native";

type BaseProps<T extends unknown> = {
  item: T;
};

type UseRenderItemProps<T, P extends BaseProps<T>> = {
  Component: React.ComponentType<P>;
  componentProps: Omit<P, "item">;
};

const useRenderItem = <T, P extends BaseProps<T>>({
  componentProps,
  Component,
}: UseRenderItemProps<T, P>) => {
  const renderItem: ListRenderItem<T> = useCallback(
    ({ item }) => <Component {...(componentProps as P)} item={item} />,
    [Component, componentProps]
  );

  return renderItem;
};

export default useRenderItem;