Alexandroppolus

Довольно спорная тема. На гитхабе было обсуждение, где Ден увещевал всех забыть про "componentDidMount" и мыслить зависимостями - раз уж компонент по сути отражение текущего стейта.
В твоём случае ничего не меняется, потому нужно просто добавить эти значения в депсы и не заморачиваться. Диспатч всегда постоянный, так что включай тоже.
Собственно, проблема может возникнуть, если интересует только значение на момент маунта и ты сознательно не хочешь эффектить при изменении. Тогда можно просто сделать, например, const firstValue = useRef(propValue).current; ,тогда в firstValue у тебя будет только первое значение, которое можно передать в useEffect. Это тоже костыль, но более явный код, чем еслинт-дизабл.

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

Отличий два
1) useCallback(func, deps) - ни что иное как useMemo(() => func, deps)
То есть useCallback возвращает функцию, а useMemo выполняет функцию и возвращает результат (в обоих случаях - при условии что депсы поменялись).
2) про useMemo в документации есть предостережение, что Реакт не гарантирует сохранность результата и может вычислить ещё раз, даже при неизменных депсах. Про useCallback такого не сказано.

Непонятно, как там форкнуться, потому вот исправленный код


проблема была вот в чем: переназначались key для элементов. Потому некоторые элементы оставались как есть и просто апдейтились, а некоторые пересоздавались (реакт не умеет перекидывать одни элементы через другие). Потому key надо сохранять, а просто менять left у всех

Да, delete будет мутировать стор.

проще всего сделать поверхностную копию объекта и уже из неё удалить:

if (state.key[objKey]) {
  const copy = {...state.key};
  delete copy[objKey];
  return { ...state, key: copy };
}

<img src={getImage(el.id)} /> поместить в отдельный реактовский компонент, например, StorageImage. Далее возможны различные варианты в зависимости от того, что используется на проекте. Наиболее простой - useQuery - это обеспечит кэширование и обновление стейта из коробки, и все остальные детали, прям вот всё что нужно для данного кейса.

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

async-функция возвращает промис, только и всего. Если onClick это по барабану, то всё норм.

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

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(...) - тут создается копия и сортируется.

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

Надо бы протипизировать по нормальному. Встала на праведную стезю TS - забудь про всякие any.

...
<RegulationEditWindow setIsEditing={setIsEditing} />
...

interface RegulationEditWindowProps {
    setIsEditing(editing: boolean): void;
}

const RegulationEditWindowView: React.FC<RegulationEditWindowProps> = React.memo((props) => {
    ...
    <ArrowLeftOutlined onClick={() => props.setIsEditing(false)} />
    ...
});