React inline functional component

Fc.ts

import {createElement, Fragment, isValidElement, ReactElement, ReactNode, useCallback} from 'react';

export interface FcProps<P> {
  render(props: P): ReactNode | null | void;
}

function Fc<P extends FcProps<P>>(props: P): ReactElement | null {
  const v = useCallback(props.render, [])(props);
  return v === undefined ? null : isValidElement(v) ? v : createElement(Fragment, null, v);
}

usage_example.tsx

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

let a = (
  <Fc render={() => {

    const [count, setCount] = useState(1);

    useEffect(() => {
      const timeout = setInterval(() => setCount((count) => count + 1), 1_000);
      return () => clearInterval(timeout);
    }, []);
    
    return count;
  }}/>
);