javascript - 在 React.js 中防止每次渲染都进行大量计算的方法

Question

我有一个用 React 制作的应用程序。我有一系列游戏，我需要以某种方式展示它们。在我看来，我处理这些游戏的方式相当繁重，所以我决定避免在每个渲染周期都计算它。

我是 React 新手，所以我不确定“React 方式”是什么。我最近发现了一个useMemo()钩子，它似乎可以满足我的需要。这是我的简化代码：

import React, { useState, useMemo } from 'react';

const GamesPage = () => {
    const [games, setGames] = useState([]);
    const [gameTitle, setGameTitle] = useState('');
    const gamesGrouped = useMemo(() => games.reduce(
        (games, game) => {
            // heavy computation
        },
        []
    ), [games]);

    return (
        <div>
            <input
                type="text"
                value={gameTitle}
                onChange={event => setGameTitle(event.target.value)}
            />
            <button onClick={() => setGames(
                [...games, {title: gameTitle}]
            )}>Add game</button>
            <ul>
                {gamesGrouped.map(game => (
                    <li key={game.title}>{game.title}</li>
                ))}
            </ul>
        </div>
    );
};

export default GamesPage;

我做对了吗？我的想法背后是否有一些潜在的陷阱，比如在需要时不计算或在不需要时计算？还是有一些更直接的方法，而不使用useMemo()？

额外问题：如何在类组件中实现这一目标？