Антон Спирин

Почему this.props.location.pathname и this.props.history.location.pathname вдруг оказываются равны ?

Потому что location и history.location - это один и тот же объект. Ваше условие не выполнится никогда.

Поправить можно так:

componentDidUpdate(prevProps) {
  if (
    prevProps.location.pathname !== this.props.location.pathname &&
    this.state.menuMobile
   ) {
    this.setState({ menuMobile: false });
  }
}

const myAppRoot = document.getElementById(“my-app”);
ReactDOM.render(<MyApp />, myAppRoot);

export default React.memo(Header);

Не надо никаких порталов.

document.body.classList.add('no-scroll');

state = {
  name: '',
  publicationYear: '',
  publisher: '',
  category: '',
  language: '',
  errors: {},
};

Ошибки валидации складывать по ключу в errors.

Только сделать eject и отказаться от использования webpack-dev-server.
Но делать этого, имхо, не стоит.

По идее ключи никакие не меняются и state меняется только когда скролл проходит отправную точку. Но React devtools выделяет красным мой хедер и componentDidUpdate отрабатывает при каждом скролле.

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

Действительно ли реакт ререндерит эти компоненты?

Действительно.

Как вообще лучше работать со скроллом? Делать через React или просто подключить отдельный JS файл и работать с DOM напрямую?

Все зависит от задачи. Подключать отдельный файл с нативным кодом точно не стоит.

Знаю, что с React так работать с DOM не нужно

Можно и очень часто бывает нужно. Для этого в React есть рефы.

прописать логику чата в redux мешая с логикой сервиса

Зачем мешать? Можно писать в отдельных файлах в каталогах actions, reducers и components. Можно положить в отдельную папку как feature. Можно сделать отдельной точкой входа. Можно подгружать отдельным чанком по требованию.

или лучше реализовать это отдельным проетом, а потом подключить

Вам должно быть виднее, что для вас лучше. Путей много.

Тоже самое касается и бэк части на node

То же самое касается и части на node.

Там так же пихать всё в роуты сервиса или можно декомпазировать ?

Да, можно красиво разбить на модули, так же как и клиентскую часть.

const Example = () => {
  const [isLoading, setLoading] = useState(true);

  const handleOnLoad = () => {
    setLoading(false);
  };

  return (
    <>
      {isLoading && <Preloader />}
      <iframe 
        title="iframe"
        src="..."
        onLoad={handleOnLoad}
      />
    </>
  );
};

И есть 3 класса которые унаследуются от этого класса

В каждом экземпляре у вас создается своя копия хранилища. Зачем?

Вот этот код некорректный:

export const getPriceColor = obj => dispatch => {
  const res = getPriceColorApi(obj);
  dispatch({
    type: obj.name,
    payload: res,
  });
};

Вы не дожидаетесь ответа сервера.

Все работает и state меняется, но вот одна проблема, когда я меняю state вызывая функцию mosquitoNet то type экшена (например ADD_MOSQUITO ) приходит во все reducers и все остальные свойства state возвращаются в исходное состояние.

ADD_MOSQUITO в вашем коде не сбрасывает состояние.

Кейс:

default:
  return state;

возвращает текущее состояние.

Как можно избежать этого

Как минимум, разобраться с тем зачем создаете несколько копий состояния. Возможно, это и есть главная ошибка.

Пример упрощения:

const Example = ({ disabled, onChange }) => {
  const [isActive, setIsActive] = useState(false);

  const handleClick = useCallback((e) => {
    e.stopPropagation();
    if (disabled) return;
    setIsActive(!isActive);
    onChange(!isActive);
  }, [isActive, disabled]);

  return <Switch onClick={handleClick} />;
};

const Example = ({ children }) => <div className="some_selector">{children}</div>;

Если React добавил это предупреждение, должно быть решение для этого.

Это предупреждение добавляет ESLint. Если не хотите отключать правило глобально, то можно воспользоваться комментариями для отключения в конкретном блоке.

ESLint: Disabling Rules with Inline Comments

Serving Apps with Client-Side Routing

Вариант с использованием JSX:

class Main extends Component {
  render() {

    return (
      <article className="main">
        <div className="main-root">
          {this.props.counter.map(({ tag: Tag }, i) => <Tag key={i} />)}
        </div>
        <Edit/>
      </article>
    );
  }
}