Оптимизируем React приложение для отображения списка элементов

MobX мутирует состояние

Для профайлинга рекомендую React Perf (недавно переписан) + расширение для Chrome.

Вообще-то, для такой цели давно изобретен Reselect.
И под шум волны можно использовать Virtualized, для рендеринга большого количества элементов в списке/гриде.

В коде редьюсера есть прекрасное:

state = {
      targets: [
          ...state.targets.slice(0, i),
          updatedTarget,
          ...state.targets.slice(i + 1)
       ]
}

По сути, вам нужно вернуть копию массива с замененным одним элементом. Это делается через map в одну строку

state.targets.map((target, index) => index === i ? updatedTarget : target)

К чему это увлечение модным синтаксисом, если можно проще?
А поскольку статья о производительности, то замечу, что это будет еще и быстрее.

shouldComponentUpdate(newProps, newState) {
    // проверяем что порядок и кол-во элементов остались прежними
    // то есть если id остались прежними, значит у нас нет "больших" изменений
    const changed = newState.targets.find((target, i) => {
        return this.state.targets[i].id !== target.id;
    });
    return changed;
}

здесь может вылететь ошибка, если в newState.targets больше элементов, чем в this.state.targets

Статью можно сократить до предложения «Используйте mobx для менеджмента стейта приложения.». Полностью согласен, кстати.