Alexandroppolus

isColorClicked будет новый (точнее, это будет новая переменная) на новом рендере, который произойдет после завершения handleColorClick. Стейт поменялся, но в переменной handleColorClick старое значение, это просто переменная в замыкании.

класс в trelloBoardColorRef.current старый, потому что ещё не обновился, он станет новый после рендера.

default:
return initialState;

default:
      return state;

просто воспользуйся пакетом react-router-dom

https://reactrouter.com/en/v6.3.0/api#usesearchparams

< Route path="/" element={MainPage}> Route>

<Route path="/" element={<MainPage />} />

В примерах используется классовый компонент. Экземпляр класса создается при появлении компонента и уничтожается при размонтировании, то есть живет всё время, пока элемент присутствует в дереве. Соответственно стрелочная функция, объявленная в классе, живет всё это время и не меняется. Причем для каждого экземпляра создается своя стрелочная функция, внутри которой this указывает на свой экземпляр (т.е. он прибит гвоздями к экземпляру при любом вызове функции). То есть эту функцию можно как есть передать в виде колбэка, потому что у неё правильный this всегда с собой.

Нестрелочная функция живет в прототипе. Она общая на все экземпляры, но this у неё определяется при её вызове. То есть её нельзя просто так передать как колбэк - будет неправильный this. И её приходится передавать вот так: () => this.handleClick(). Но из-за этого в дочерний компонент при каждом рендере родителя приходит новый проп, и он (дочерний) вынужден обновляться. Потому вариант со стрелкой лучше.

Если используются функциональные компоненты, то для изготовления более-менее постоянной функции можно применить useMemo/useCallback, или ещё более радикальное решение https://github.com/reactjs/rfcs/blob/useevent/text...
(последнее работает только для функций, которые не будут вызываться в момент рендера, а только после, как эффекты или обработчики событий. Твой вариант, в общем)

Новое сообщение надо закинуть в редукс, при помощи dispatch. Тогда обновится компонент, внутри которого у тебя useSelector(..), и заселектится новый список messages, дополненный.

У тебя, наверно, Реакт 18
Там из React.FC выкинули на мороз поле children, теперь нет.

Надо добавлять вручную.

у себя на проекте запилил такой тип:

import type {FC, PropsWithChildren} from 'react';

export type ReactFC<Props extends Record<PropertyKey, unknown> = {}> = FC<PropsWithChildren<Props>>;

он добавляет children в пропсы, то есть работает как старый добрый React.FC

https://ant.design/components/calendar/ - календарь с кастомным рендером ячейки.

Использовать mobx. Прямо один в один впишется. Методы классов станут экшенами (в мобиксовом понимании, см. доку), данные - наблюдаемыми полями и конструкторами. Экземпляры классов можно хранить в useRef или том же useState, если ему передать функцию создания экземпляра. Экземпляры общеиспользуемых классов прокидывать вниз через контекст. Можно совсем упороться и поюзать DI-контейнер.

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

Подробностей много, читай мануалы к реакту и mobx.

massive.sort выполняет сортировку в самом себе. Он не создает новый массив. То есть фактически в setData у тебя прилетает тот же объект, и реакт думает, что ничего не поменялось.
Создавай новый массив.