Основные задачи, которые нужно решить при разработке веб-приложения:
— управление состоянием приложения;
— общение с сервером;
— роутинг (изменение урла при переходах между страницами);
— разработка интерфейса. ← за это отвечает Реакт
Как видите, Реакт отвечает только за построение интерфейса. Реакт не отвечает за программирование бизнес-логики. Реакт не отвечает за роутинг. Реакт не отвечает за общение с сервером. Из всего этого вытекает несколько простых правил.
Не пишите бизнес-логику в Реакт-компонентах. Логика приложения должна быть скрыта в отдельном модуле, который предоставляет наружу простой и декларативный API, которым можно пользоваться даже через консоль, без UI.
Не используйте Реакт для роутинга. React Router это очень популярная библиотека с нескольким десятком тысяч звёзд на Гитхабе, но серьёзно, она провоцирует разработчиков творить ужасные вещи. Она заставит вас нарушить предыдущий пункт и писать бизнес-логику в компонентах. Она заставит вас относиться к URL как к ещё одному источнику состояния приложения. Она заставит вас смешать вёрстку и настройки роутера (а в четвёртой версии появляется возможность раскидать настройки роутера вообще по всему приложению). Роутинг быть скрыт в отдельном модуле. URL должен зависеть от состояния приложения, а не наоборот. Это значит, что URL должен меняться автоматически при изменении состояния приложения. Обращаться к URL для чтения каких-то данных нельзя вообще никогда, кроме момента инициализации приложения (в момент инициализации можно использовать данные из URL для задания исходного состояния приложения).
Не используйте Реакт для общения с сервером. Серьёзно, есть компоненты вроде
<Fetch url='...' /> — пожалуйста, не делайте так. За общение с сервером должен отвечать отдельный модуль, скрывающий детали реализации и предоставляющий абстрактный API вроде articles.get({ id: 1 }).then((article) => {}).