abberati

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

Electron

Никак. Асинхронность. Данные, которые вы пытаетесь отрендерить, ещё недоступны. Всё, что вы можете — это проверять, загрузились ли данные, и если ещё не загрузились — не пытаться к ним обратиться. Рендерить крутилку.

localStorage синхронный. Почему бы не использовать значение из него при инициализации стейта?

componentDidUpdate() {
    if (this.state.closed === true) {
      document.body.classList.add('block-closed')
    } else {
      document.body.classList.remove('block-closed')
    }
  }

Вот так не надо делать. Вот так надо делать.

В доке всё есть

Конкретно в этом примере нет разницы, где объявлять. Если бы у эффекта были зависимости (а они тут должны быть, просто пример не про это написан), то эффект выполнялся бы реже, чем на каждый рендер. Тогда функция снаружи объявлялась бы впустую.

А вызывает её не эффект, а ChatAPI — представьте себе, что это некий document.addEventListener м обработчиком событий handleStatusChange. Эффект организует подписку и отписку.

State

Controlled inputs

Потому что setState асинхронный

Оба правильные. Если приложение настоящее, то второй правильнее. Если это тудулист/мелкий петпроект, то первый вариант. Первый быстрее, второй масштабируется лучше.

Пишите кастомные хуки, организуйте логику в них. У вас есть useSelector и useDispatch в редаксе.

Хуки позволяют делать ровно то же самое, что позволяют делать хоки, но более компактно и без порождения лишних компонентов-обёрток.