bzotsss

То о чем вы просите абсолютно не верно. Это тоже самое что если бы после смерти одного человека менять номера паспортов у всех оставшихся в живых.

Просто запихни этот роут внутрь Switch

Внутри Switch срабатывает первый найденный роут. Поставьте NotFound последним.

https://reactrouter.com/web/api/Switch

надо проверять, что массивы не равны. Сделал поверхностное сравнение. Возможно, понадобится ещё и вглубь элементов, но это детали. В общем, сравнивай массивы.

const isShallowEqualArrays = (arr1, arr2) =>
    arr1 === arr2 || (arr1.length === arr2.length && arr1.every((v, i) => v === arr2[i]));

export const mainReducer = (state = initialState, action) => {
    if (action.type === SET_COUNT) {
        if (!isShallowEqualArrays(state.count, action.count)) {
            return {
                ...state,
                count: action.count
            };
        }
    }
    return state;
};

убрать данный useState из MainPage

поскольку эти данные меняются в одном компоненте, а читаются в другом (соседнем), то каноничнее всего вынести их в стор, например в редукс, раз уж он тут.

useCallback и React.memo тоже понадобятся. Есть смысл мемоизить Table, он очень жирный. Соответственно для создания sortData не обойтись без useCallback.

есть и другие приколы. Например, sortUpData и прочие хелперы. Там мутабельно сортируется массив. Да-да, arr.sort(...) возвращает тот же самый объект массива, предварительно отсортировав. Это может приводить к потере перерендеров при изменении состояния. Для иммутабельности надо так: arr.slice().sort(...) - тут создается копия и сортируется.

прочее не смотрел, но не удивлюсь, если ещё есть какая ересь на местах..

в useState приходит statusText, но useState запоминает его только первый раз, при создании компонента. После чего есть два статуса - тот, который в useState, и тот который в редуксе. И они никак не взаимодействуют между собой. Т.е. когда getStatusThunk обновляет статус в редуксе, статусу состояния на это пофиг.
Тут надо определиться - либо юзать только редуксовый статус, либо синхронизировать их между собой. Зависит от задачи.

Циклом.

Проверяем факт наличия дубликатов:

const hasDuplicates = map.size > new Set(Array.from(map, n => n[1].id)).size;

Смотрим, кто конкретно повторяется:

const duplicates = Array
  .from([...map].reduce((acc, [ , { id } ]) => acc.set(id, acc.has(id)), new Map))
  .reduce((acc, n) => (n[1] && acc.push(n[0]), acc), []);

Вычисляем, кто сколько раз представлен в исходных данных:

const count = Array
  .from(map.values())
  .reduce((acc, { id }) => acc.set(id, -~acc.get(id)), new Map);

Перед сравнением, проверить что следующий элемент !== undefined

Очевидное решение – добавить проверку.

for(let i = 0;i<arr.length;i++){
  if (i+1 < arr.length) {
    console.log(arr[i],arr[i + 1])
  }
}

или сразу ограничить диапазон перебора

for(let i = 0; i < arr.length - 1; i++){
  console.log(arr[i],arr[i + 1])
}

const concat = function (str) {
  let word = str;
  return function (newWord) {
      return word += newWord;
  }
}

let memorize = concat('test')
console.log(memorize('test2'))
console.log(memorize('test3'))
console.log(memorize('test4'))

Вот, на днях пришлось творить аналогичное. Решается радиальными градиентами. Дизайнерские SVG были слишком тяжелыми.
https://jsfiddle.net/fbL2uxdj/

такую береберду написали если честно, что аж шары на лоб налазили когда читал

"расплывчато" грубо говоря так что бы он не принимал квадратную форму

блюр эффект ? чисто логически же понятно что бэкграунд одним цветом этот бублик другим при этом имеет тени.

как бы не казался краёв элемента в котором находиться

это вообще как понять, может надо находиться в каком то эффекте транса чтобы начать понимать что вы написали.

сделай запрос delete и пропиши адрес к конечному эндпоинт

Сервер локальный?
В настройках сервера надо указать прием заголовков, вот несколько примеров (на всякий случай напишу с разрешенными всеми заголовками, измените для себя на те, что нужны именно вам):

• nginx:

  if ($request_method = 'OPTIONS') {
          add_header 'Access-Control-Allow-Origin' '*';
          add_header 'Access-Control-Allow-Headers' '*';
          ddd_header 'Access-Control-Allow-Methods', '*';
          return 204;
       }
       if ($request_method = 'POST') {
          add_header 'Access-Control-Allow-Origin' '*';
          add_header 'Access-Control-Allow-Headers' '*';
          ddd_header 'Access-Control-Allow-Methods', '*';
       }
       if ($request_method = 'GET') {
          add_header 'Access-Control-Allow-Origin' '*';
          add_header 'Access-Control-Allow-Headers' '*';
          ddd_header 'Access-Control-Allow-Methods', '*';
       }

  
  
  
• node.js: res.header('Access-Control-Allow-Methods', '*');
  
• php:

  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Methods: *');

  
  

если не поможет присылайте результат, попробуем разобраться

Коротко и упрощенно - на момент бинда функции к элементу функция не декларирована. А хтмл требует ее привязать. А ее нету еще...

А чем плохо работать с чекбоксом?

const filtedBody = document.getElementById('filter__section-body');
filtedBody.addEventListener('click', function(e){
  if (e.target.closest('.checkbox__input')) {
    console.log(e.target);
  }
});