Почему рендеринг ведет себя так странно?

Question

[Василий Васильков]

Я пытаюсь реализовать задержку в рендере children-элементов. В данный момент я делаю следующее:

interface IDelayed {
    delay: number,
    children: JSX.Element[]
}

export const Delayed = (props: IDelayed) => {
    const [children, setChildren] = useState<JSX.Element[]>([])

    useEffect(() => {
        let index = 0

        const i = setInterval(() => {
            setChildren(array => [...array, props.children[index]])
            index++
            if (index === props.children.length)
                clearInterval(i)
        }, props.delay)

    }, [props.children, props.delay])

    return (
        <>
            {children}
        </>
    )
}

В целом это работает нормально, но по какой то причине конкретно ВТОРОЙ элемент не рендерится:

<Delayed delay={500}>
                <Card name='item1'/>
                <Card name='item2'/>
                <Card name='item3'/>
                <Card name='item4'/>
                <Card name='item5'/>
</Delayed>

На выходе получается
item1 item3 item4 item5
При этом, если выводить в консоль, а не добавлять в массив:
console.log(props.children[index])
То все работает адекватно

Answer 1

[Alexandroppolus]

вызов колбэка в setChildren происходит немножечко асинхронно, потому надо сохранять для него индекс в замыкании:

...
        const i = setInterval(() => {
            const savedIndex = index;
            setChildren(array => [...array, props.children[savedIndex]])
            index++
            if (index === props.children.length)
                clearInterval(i)
        }, props.delay)
...