Как избавиться от двойной передачи данных через useContext?

Question

[Павел]

Есть App.js в котором передаю через useContext state компоненту. Далее в компоненте в useEffect я использую этот стейт НО!! приходит сначала undefined потом стейт меняется на нужный. Проблема в том, что useEffect'e идёт запрос данных на сервер и получается 2я нагрузка.
App.js

<UserContext.Provider value={{ user, setUser }}>
        <Header />
      </UserContext.Provider>

Header.js

const { user, setUser } = useContext(UserContext)

  useEffect(() => {
    const token = user.token
    const getResouce = async () => {
      const getRes = await axios
        .get('/api/game/res', {
          headers: { 'x-auth-token': token },
        })
        .catch((error) => {
          console.log(error.response)
        })
    }
  }, [user])

Получается сначала user = undefined axios выдаёт ошибку потом user меняется и перерендерится уже нормально. Как это обойти?

Comments

[HAbRAhabp]

> передаю через useContext state компоненту
Может все-таки не передаешь, и изначальное состояние `user` при передаче в контекст `=== undefined`, а потом меняется на нужное?

Сейчас бы использовать axios в 2021 :)

[HAbRAhabp]

Хотя, это похоже на ограничение хука `useContext`: https://reactjs.org/docs/hooks-reference.html#usec...

Even if an ancestor uses React.memo or shouldComponentUpdate, a rerender will still happen starting at the component itself using useContext.

Поэтому, в ре-рендере нет ничего плохого, это ожидаемо и нужно такие ситуации корректно обрабатывать.

[Павел]

HAbRAhabp, Ну в самом-самом начале он действительно undefined в App.js. В App.js есть useEffect в котором задаётся это стейт и потом( а может не потом, может действительно он видит первоначальное состояние потом изменённое. Опять же это доли секунды...) он передаётся в хедр.

Чем аксиос не угодил?

P.S. Да, точно! Проверил network действительно первый запрос идёт до того как произойдёт авторизация пользователя т.е. когда user undefined потом идёт auth получает токен и юзер юзЭффект в хедере видит изменение и перерендерит компонент. Я просто думал что всё происходит последовательно а тут получается "кто первый встал того и тапки".

[Павел]

Скорее всего нужно менять подход.

[Алексей]

HAbRAhabp, подскажите, что нам использовать в 2021-м вместо axios с отменой и перехватом запросов?

[iordania]

Алексей, вангую что ответят fetch

[HAbRAhabp]

Павел,

Проверил network действительно первый запрос идёт до того как произойдёт авторизация пользователя т.е. когда user undefined потом идёт auth получает токен и юзер юзЭффект в хедере видит изменение и перерендерит компонент. Я просто думал что всё происходит последовательно а тут получается "кто первый встал того и тапки".

Даже если бы изначальное состояние `user` не было бы `undefined`, то `useContext` все равно бы возвращал `undefined`, так работает этот хук.

Если компонент Header вообще не хочется рендерить, где `typeof user === undefined`, то можно добавить условие и внешний компонент, который будет передавать состояние `user` в `props`. Следственно, если `user` не будет, то Header не будет рендериться вовсе, пока `user` не появится. Но это плохой UX – лучше отображать `Header`, но в состоянии загрузки пользователя, например с skeleton screen.

[HAbRAhabp]

Алексей, iordania, fetch, конечно же, и отменять его тоже можно уже очень давно :)
Но лучше абстрагировать такую логику (поэтому и придумали Apollo) — использовать HTTP запросы в UI что с fetch, что с axios – bad design.

[Алексей]

HAbRAhabp, с ie11 что делать прикажете?

[HAbRAhabp]

Алексей, что такое IE11? Вы до сих пор это поддерживаете, и этим кто-то пользуется?)
Мы уже давно этим не заморачиваемся, многие другие компании не заморачиваются тоже, даже Microsoft анонсировали конец поддержки в MS365.
Поэтому, то что им кто-то пользуется, это их же проблемы — на IE11 большая часть веба работает некорректно.
И даже если очень хочется, есть https://polyfill.io/v3/

[Алексей]

HAbRAhabp, представьте себе, многие банки России поддерживают ie11, многие корпоративные системы работают и под ie, даже 1% пользователей это пока очень много в денежном эквиваленте.

Я прекрасно знаю про все другие инструменты, вот только без головной боли и костылей пока только axios работает так, как того требуется

[HAbRAhabp]

Алексей, ну так это древнее легаси, которое никто не переделывает, поэтому и работает. А сейчас зачем поддерживать то?

> 1% пользователей это пока очень много в денежном эквиваленте
Нет, это не много. Я не знаю ни одного человека в реальном мире, который пользуется IE11 для личного использования, поэтому, 1% там нет. Скорее, это легаси системы, которые работают под IE11.

Косты от поддержки IE11 превышают потенциальный выхлоп от этого.

Оно все работает под IE11 (у нас тоже), но почти гарантированно будет иметь какие косяки в том, как оно будет работать.

Fetch весьма адекватно и без головной боли работает с полифиллами там, где они нужны.

[Павел]

HAbRAhabp, он рендериться сначала без данных потом перерендер уже с данными

Цель избавиться от 2х запросов!

[Алексей]

HAbRAhabp, какое легаси? я не знаю в каком мире вы живете. Придите к топ менеджеру банка и скажите, а давайте не будем поддерживать ie11, ну потому что я не знаю ни одного человека, который ie11 пользуется, а на те 50000 клиентов (а по статистике может и больше), которые нам денег на зп (в том числе твою) дают - забьем болт. А просто потому что axios никто в 2021 году не юзает, ну мы можем потратить время и деньги, чтобы аналогично на фетче сделать. Зачем? Ну, чтобы было.

[HAbRAhabp]

Павел, ну и получается, что это ожидаемое состояние. У приложения изначально нету токена, который вы используете в Header, поэтому, тут нужен пере-рендер. Иначе никак. Только если переделывать логику приложения на SSR, чтобы сервер фетчил данные и отдавал клиенту перед рендером — например с Next.JS. Пару ссылок для вашего сценария:

[1] https://swr.vercel.app/
[2] https://nextjs.org/docs/basic-features/data-fetching

[HAbRAhabp]

Павел, хм, я вас тут не очень правильно изначально понял. Попробуйте так:

const { user, setUser } = useContext(UserContext)
const [wasFetched, setFetched] = useState(false)

  useEffect(() => {
    const token = user.token
    const getResouce = async () => {
      if (wasFetched) {
        return;
      }

      setFetched(true)
      const getRes = await axios
        .get('/api/game/res', {
          headers: { 'x-auth-token': token },
        })
        .catch((error) => {
          console.log(error.response)
        })
    }
  }, [user])

[HAbRAhabp]

Алексей, хорошо, что я не работаю и никогда не буду работать в банках. Поддерживайте дальше :)

[Павел]

HAbRAhabp, не проще так user проверять на undefined?

[Павел]

HAbRAhabp, По этому методу вызывается 1 раз но как раз 1й запрос без токена статус 500