How can this component be optimized?

Question

React

Hey! Just started learning hooks so please don't throw rocks.

Actually, there is a component that should output N times another component.
N is the height of the screen / the height of the repeating component.

Implemented like this:

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

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

export default Repeater ;

There is very little code, so there are several questions:
1. You can calculate const items = Math.ceil(window.screen.height / 130); So? Or should I wrap it in something? (as an option to use the useState hook, and calculate in useEffect?)
2. [...Array(items)].map((value, index) isn't bad practice? It's the shortest implementation I could think of

Answer 1

Can it be like this

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>
    );
};