React useEffect (с []) вызывается каждый раз, когда я меняю страницу (React Router)

Question

Я подготовил небольшое демо для этой проблемы:

Демо

Поэтому я использую React-router-DOM для создания одностраничного приложения, и я создал стандартную навигацию междудве страницы (компоненты Page1 и Page2).

Проблема в том, что каждый раз, когда я переключаюсь между страницами, вызывается ловушка useEffect (с пустым массивом в качестве второго аргумента) (в демоверсии вы можете увидеть это в консоли).

Я хотел бы получать данные для каждого компонента только один раз и повторно использовать эти данные после, независимо от того, будет ли пользователь переключаться между страницами. Есть ли возможность сделать это без проверки некоторых условий внутри функции useEffect? Это немного смущает меня, потому что useEffect [] должен запускаться только один раз для компонента, и это не так.

Answer 1

Пустой массив deps означает, что useEffect будет вызываться только каждый раз, когда компонент монтируется. useEffect вызывается каждый раз, когда вы меняете страницу, потому что компонент страницы каждый раз отключается, а затем перемонтируется при повторном посещении. Например, попробуйте дважды щелкнуть ссылку на странице 1. Он будет регистрировать сообщение только один раз, поскольку страница не демонтируется и не перемонтируется.

Вы можете попытаться решить эту проблему, используя useEffect уровень выше, чем страница, которая будет компонентом вашего приложения. и вместо этого вызовите там свой выбор. Однако я не уверен, что это можно сделать с помощью компонента класса, поэтому вам, возможно, придется использовать вместо него компонент функции.