JSX render concepts

practice.tsx

interface RenderNode<T extends any[] = any[]> {
    (...args: T): React.ReactNode;
}

function iife(fn: RenderNode) {
    return fn();
}
function RenderListFlat<T>({ data, renderItem }: { data: T[]; renderItem: RenderNode<[item: T, index: number]> }) {
    return <View>{data.map(renderItem)}</View>;
}
function RenderList<T>({ children, list }: { list: T[]; children: RenderNode<[item: T, index: number]> }) {
    return <View>{list.map(children)}</View>;
}

function Renderer() {
    return (
        <>
            <RenderListFlat
                data={new Array(5).fill("_")}
                renderItem={(_, i) => {
                    return <SGText key={i}>RenderListFlat {i}</SGText>;
                }}
            />
            <RenderList list={new Array(5).fill("_")}>
                {(_, i) => {
                    return <SGText key={i}>RenderList {i}</SGText>;
                }}
            </RenderList>
            {new Array(5).fill("_").map((_, i) => {
                return <SGText key={i}>Array {i}</SGText>;
            })}
            {iife(() => {
                const components = [];
                for (let i = 0; i < 5; i++) {
                    components.push(<SGText key={i}>Hello {i}</SGText>);
                }
                return components;
            })}
        </>
    );
}