Тут можно просто 2 аргумента передавать, зачем массив?

Давай попробуем просто задублировать элементы входного массива карт в одном массиве и потом отсортировать этот массив случайным образом

Есть библиотечка classnames, которая здорово помогает с управлением классами

Есть договоренность, что имена классов должны быть в единственном числе. Это так же относится к компонентам. В это случае можно придумать что-то вроде CardsList

Если card.id уникальный и не меняется - то можно использовать его вместо индекса. Опять же можно генерировать уникальный id для каждой карты когда ты генерируешь случайный массив.

Создание анонимных функций внутри render снижает производительность. Потому что джаваскрипт каждый раз создает новую функцию. Соответственно у компонента постоянно обновляются props и он перерисовывается. Конкретно в этом случае ты замыкаешь index и тут надо еще подумать, как это обойти в этом случае.

div можно заменить на a, а вложенные div на span и тогда a11y будет счастлив

Лучше делать константы и оперировать константами, а не сырыми строками.

const STATES = {
  START: "start",
  ...
}

Тут скорее всего будет много констант, поэтому лучше сразу без default экспорта, чтобы потом не менять импорты. Просто export const YEAR = ...

Эту сортировку раскритиковали. https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array возможно и правда лучше использовать lodash либо взять одну из реализаций shuffle по ссылке

Я думаю, что можно просто double = [...input, ...input];

Object.assign можно заменить на destructuring return array.map(item => { ...item, key: shortId.generate() });

Т.е. ты предусматриваешь возможность копирования экземпляров классов? Можно так же заменить cloneObj на функцию из lodash

Сам редукс советует либо использовать оператор ... либо библиотеку https://redux.js.org/recipes/structuringreducers/immutableupdatepatterns#immutable-update-utility-libraries

Возможно стоит переименовать. Там ведь не сами карты, там индексы. С foundCards так же.

Оба стиля включаются на одной и той же стадии. Можно объединить.

[style.bigcard_shown]: stage === STAGES.PAUSED,
[style.bigcard_scaled]: stage === STAGES.PAUSED

Вместо выделения массива можно попробовать конкатенацию строк

<h1 className={`${style.bigcard__title}  ${style.bigcard__title_h1}\`}>

Что если вынести эту функцию в компонент <Card />?

Так же как в <BigCard>

Ты здесь стараешься подгрузить фотки заранее? Это больше не работает похоже
https://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading