Запретить повторную визуализацию компонентов, сопоставленных массиву

Question

Проблема

Каждый раз, когда я отправляю действие (например, TOGGLE_TODO), массив перерисовывается, даже если изменилось только одно из значений состояния

Код

Отображение списка

{
    arr.length > 0 ?
        arr.map(({ id, text } = {}) => {
            return (
                <TaskElement key={id}
                    text={text}
                    toggleTask={() => toggleTask(id)}
                    removeTask={() => removeTask(id)} />
            )
        }) :
        // ...
}

Редуктор

...
case 'TOGGLE_TASK':
        return state.map(task => (
            task.id === action.id ? {
                ...task,
                checked: !task.checked
            } : task
        ))
...

Когда я переключаю задачу, между обновлениями появляется видимая задержка. Я попытался исправить это, сделав TaskElement PureComponent и даже написал свой собственный shouldComponentUpdate, используя поверхностное равенство, но он все еще перерисовывает.

Я знаю, что отображение массива создает совершенно новый один в памяти, который делает недействительным ключевую опору, вызывающую повторную визуализацию. Есть ли способ исправить это.

Заранее спасибо.

РЕДАКТИРОВАТЬ Аналогичный вопрос: Разве Redux не должен предотвращать повторный рендеринг?

Answer 1

Сохранить / Сделать TaskElement как PureComponent.

Внутри редуктора обновлять только тот элемент массива, который требует изменения.

Редуктор

...
case 'TOGGLE_TASK':
        let stateCopy = [...state];
        const toggledItemIndex = state.findIndex((task) => task.id === action.id);

        stateCopy[toggledItemIndex] = {
        ...stateCopy[toggledItemIndex],
        checked: !stateCopy[toggledItemIndex].checked,
        };

        return stateCopy;
...