Как можно оптимизировать этот компонент?

Question

[Vadim Stepanenko]

Привет! Только начал изучать хуки поэтому прошу не кидайтесь камнями.

Собственно, есть компонент, который должен выводить N раз другой компонент.
N это высота экрана / на высоту повторяющегося компонента.

Реализовал так:

const Repeater = () => {
    const items = Math.ceil(window.screen.height / 130);

    return (
        <div className="list">
            {[...Array(items)].map((value, index) => (
                <RepeatedComponent />
            ))}
        </div>
    );
};

export default Repeater ;

Кода совсем немного, поэтому есть несколько вопросов:
1. Можно высчитывать const items = Math.ceil(window.screen.height / 130); так? Или надо оборачивать во что-то? (как вариант использовать хук useState, и посчитать в useEffect?)
2. [...Array(items)].map((value, index) не является плохой практикой? Это самая короткая реализация, которую смог придумать

Answer 1

[davidnum95]

Можно так

const Repeater = () => {
		const items = useMemo(() => {
    	const itemsCount = Math.ceil(window.screen.height / 130);
    	return Array.from(Array(itemsCount).keys())
    }, [window.screen.height])

    return (
        <div className="list">
            {items.map((value, index) => (
                <RepeatedComponent key={value} />
            ))}
        </div>
    );
};

Comments

[Vadim Stepanenko]

Спасибо!