Петр Мухуров

С тем, что объекты (и массивы) в js передаются по ссылке. Вы пушите в массив, лежащий в сторе. Очевидно, что массив меняется.

Нужно и то, и то, в зависимости от ситуации. Львиная доля проектов не нуждается в redux, его просто так туда добавляют.

Ставишь пакет
npm install react-transition-group

Импортируешь

import { TransitionGroup, CSSTransition } from "react-transition-group";

Анимируешь

<TransitionGroup className="items-section__list">
  {list.map(elem => (
    <CSSTransition key={elem} timeout={500} classNames="move">
      <h5 key={elem}>{elem}</h5>
    </CSSTransition>
  ))}
</TransitionGroup>

Добавляешь css по вкусу

.move-enter {
  opacity: 0.01;
  transform: translate(-40px, 0);
}

.move-enter-active {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 500ms ease-in;
}

.move-exit {
  opacity: 1;
  transform: translate(0, 0);
}

.move-exit-active {
  opacity: 0.01;
  transform: translate(40px, 0);
  transition: all 500ms ease-in;
}

Обновленный пример из вопроса

PS если нравится принцип анимирования через жизненные циклы, то никто не мешает в функциональных компонентах использовать хуки, почти то же самое. Попробуй.
Вот тебе наводка Super easy react mount/unmount animations with hooks

Это конечно круто - публиковать код, не говоря при этом ни слова о том, что он делает, и просить найти в нём косяки. Поступлю симметрично: вот вам код рабочий - сравнивайте со своим, думайте:

const digital_root = num => num > 9
  ? digital_root([...`${num}`].reduce((acc, n) => acc + +n, 0))
  : num;

[...credits.cast, ...credits.crew].map((person) => person.name)

указать alias в webpack

resolve: {
        alias: {
            '~': path.resolve(__dirname, 'src'),
            '~i': path.resolve(__dirname, 'src/images/img/icons'),
        }
    },

В проекте подключать как:
import Img from '~i/sign-out.svg';

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

при просмотре увидим, что он одинаков на всех этапах сортировок. В тоже время, он совпадает с последним отсортированным, массивом.

При этом код нашего модуля не трогаем, ничего не ломается, все "ок".

А зачем обновляться, рискуя получить лажу с обратной совместимостью, не используя при этом те штуки, которое эти обновления дают (за n мажорных апдейта, я полагаю, их предостаточно должно быть)? Как вариант - не выкатывать в релиз, пока чего нового не напишите по функционалу, чтобы можно было оправдать смену цыфорки, а если обновление ради обновления, то 1.2.6 ставьте, и дефолтное "фикс багов, патч безопасности", за n-версий там явно что-то пофиксили и что-то защитили

function diff(data1, data2, key = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const keys = new Set(Array.from(data2, getKey));
  return Array.prototype.filter.call(data1, n => !keys.has(getKey(n)));
}

// ваш случай
diff(array1, array2, 'name')

// есть и другие варианты применения
diff([ 1, 2, 3, 4, 5 ], [ 1, 2, 3 ]) // [4, 5]
diff('abcde', 'ACE', n => n.toLowerCase()) // ['b', 'd']

Используйте стрелочные функции в свойствах класса. Они являются негласным стандартом в React разработке и, скорей всего, очень скоро войдут в стандарт. Уже добрались до stage-3, а в Chrome уже есть нативная поддержка.

как улучшить мой код

Подобный код не улучшают, а переписывают.

function fearNotLetter(str) {
  const missing = Array
    .from(str, n => n.charCodeAt(0))
    .find((n, i, a) => n !== a[0] + i);

  return missing && String.fromCharCode(missing - 1);
}

https://jsfiddle.net/5wtopLka/