justifycontent

А самому прочитать ошибку?

41 http fetch GET 200 https://registry.npmjs.org/redux-thunk 398ms (cache hit)
42 silly fetch manifest redux@^4.2.1
43 http fetch GET 200 https://registry.npmjs.org/redux 6ms (cache hit)
44 silly fetch manifest redux@^5.0.0

redux-thunk требует, чтобы в проекте был redux: ^5.0.0, а у Вас ^4.2.1, либо ставить указанный npm install redux@^5.0.0, либо использовать в режиме совместимости (возможна, нестабильная работа):npm install redux-thunk --legacy-peer-deps

Бодрящий шрифт консоли, зачет!

Поднимите версию Node

Можете почитать про разницу между var и let тут

https://qna.habr.com/q/1187788

Замените position: absolute; на position: fixed; для drawer

const isInitialMount = useRef(true);

useEffect(() => {
  if (isInitialMount.current) {
     isInitialMount.current = false;
  } else {
      // Your useEffect code here to be run on update
  }
});

https://stackoverflow.com/questions/55075604/react...

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.element {
  width: 20%;
  text-align: center;
}

Просто прочитать гайд и API на оф сайте - ВСЁ
Quick Start | gulp.js
API Concepts | gulp.js

Допустим, подключены два файла:

// auth.js
var myAuth = "secret";

// logic.js
function logic() {
 console.log(myAuth);
}

Когда оба файла включены в страницу, это то же самое, как склеить их содержимое и вставить прямо в тело страницы:

<script>
var myAuth = "secret";
function logic() {
 console.log(myAuth);
}
</script>

Поэтому все друг друга видят, слышат и дружат )
Просто размещение кода в отдельном файле не изолирует его код от прочего.

Распространённая практика во время разработки держать код по разным файлам, логически разделяя. А для продакшн собирать весь код в один файл (или несколько, чтобы куски сборки сделать полегче).

Почитайте про замыкания, iife, модули и области видимости.

Если вы в этих скриптах ничего не делали специально, чтобы эту область видимости ограничить, то почему бы им друг друга и не видеть, это дефолтное поведение.

И это логично, иначе как бы подключались различные библиотеки, тот же jquery, например

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

Потому что все скрипты выполняются в глобальной области видимости - window. Хотите ограничить область видимости каждого скрипта, тогда либо IIFE, либо паттерн "модуль" (что по сути тоже IIFE).

Пройдите свой код по шагам и сразу увидите, что keys - пустой массив
А reduce на пустом массиве просто возвращает init значение, даже не заходя в колбэк

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

React.useEffect(() => {
    dispatch(setTotal(notes.length))
  }, [notes, dispatch])

Это нужно для того, чтобы сохранять ссылку на сам ref-объект.
То есть `useRef` всегда возвращает ссылку на один и тот же объект.
Таким образом становится возможно использовать его без лишних апдейтов в том же useEffect.

Вызов setTimeout, как и setInterval, возвращает идентификатор таймера, который можно использовать для отмены (отключения) выполнения функции после таймера с помощью clearTimeout(id) - для setTimeoutи clearIntervalдля setInterval

Подробнее

Почему именно 6?
В браузерах идентификаторы таймеров - числовые, уникальные для каждого таймера, и идут по порядку начиная с 1. Это значит что до таймера под номером 6 какими-то скриптами было запущено ещё 5 интервалов/таймеров.

setState работает следуещем способом:
принимает на вход функцию возвращающее новое состояние или новое состояние. Так как state - это объект тогда он делает следуещее:

// ... - spread оператор
state = {...state, ...newState} // так как newState идет после state тогда он перепишет все старые значения на новые или добавит новые

https://learn.javascript.ru/rest-parameters-spread...

1)let arr = str.split(' ');
Возьмет строку, в данном случае 'aa bb cc aa bb aa', разобьет на части используя пробел как разделитель. В результате получим:
let arr = ['aa', 'bb', 'cc', ' aa', 'bb', 'aa']
2) Следующий кусок кода просто произведет подсчет одинаковых частей.

return arr.reduce((acc, rec, index) => {
    return (typeof acc[rec] !== 'undefined')
      ? { ...acc, [rec]: acc[rec] + 1 }
      : { ...acc, [rec]: 1 }
  }, {});

Рассмотрим его подробнее. Начнем с аргументов:
acc – последний результат вызова функции, он же «промежуточный результат».
rec – текущий элемент массива, элементы перебираются по очереди слева-направо.
index – номер текущего элемента.

Что собственно происходит:
-typeof acc[rec] !== 'undefined' проверит есть ли в объекте 'acc' ключ 'rec'.
- и если мы уже встречали такой( например когда "aa", но уже во второй раз ), тогда изменить значение этого ключа прибавив 1.{ ...acc, [rec]: acc[rec] + 1 }
- если же такого ключа еще не было, то создадим его со значением 1, ибо он в первый раз попался{ ...acc, [rec]: 1 }

Допустим у Вас есть компонент, который при появлении на странице (монтировании) добавляет глобальную прослушку события, например - mousemove. Приложение работает, всё хорошо, но потом, по некоторой причине, происходит размонтирование и через некоторое время снова монтирование. В таком случае, если не удалить прослушку, будет уже 2 события, что и является утечкой памяти.
Также происходит таймерами и интервалами, поэтому надо отменять их при размонтировании.
Как пример, советую посмотреть это видео.