Блог

У меня есть приложение, созданное с помощью 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() ?

Бонусный вопрос: как достичь этой цели в компонентах класса?