False positives on jsx-no-useless-fragment, need interpolated values to avoid TS errors

[itsMapleLeaf]

I found another similar closed issue, but it reports different sorts of false positives than those I'm encountering.

In our codebase, we have a pattern of doing return <>{props.children}</>, since returning props.children from function components causes TS errors when children is defined as React.ReactNode. We're trying to avoid using as any or similar. Example:

function LoaderView<T extends ItemStoreObject>(props: LoaderViewProps<T>) {
  useLazyLoad(props.loader);

  const {
    renderError = renderNothing,
    renderLoading = renderNothing,
    loader,
  } = props;

  // The rule warns against all of these returns,
  // but we need them, otherwise we'll get a type error:
  // "Type '{} | null | undefined' is not assignable to type '...'."
  if (loader.data) return <>{props.render(loader.data)}</>;
  if (loader.isLoading) return <>{renderLoading()}</>;
  if (loader.error) return <>{renderError(loader.error)}</>;

  return null;
}

It would be great if the rule could either not report on single interpolated values, or if there were a flag for this case

[ljharb]

This sounds like a bug in TS's react types, no?

[itsMapleLeaf]

It probably is. I guess by the time this issue would have been resolved, a fix might be in TS already, rendering the change useless. The issues to fix the TS bug just seem a little stalled on progress, is all. (DefinitelyTyped/DefinitelyTyped#20356, microsoft/TypeScript#29818)

I'll close. Wrong place to fix this.

[ljharb]

In the meantime, an eslint override comment, or a TS ignore comment, might be appropriate.