Гэтсби: Обновление контекста вызывает бесконечный цикл рендеринга

Question

Я пытаюсь обновить контекст после загрузки страницы Гэтсби.

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

К сожалению, это вызывает бесконечный цикл рендеринга (возможно, не в Firefox, но по крайней мере в Chrome).

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

Вот код :https://codesandbox.io/s/6l3337447n

Бесконечный цикл происходит, когда вы переходите на вторую страницу (ссылка внизу первой страницы).

Какое здесь решение, если я хочу обновить контекствсякий раз, когда страница загружается?

Answer 1

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

Этот бит есть в React doc:

Если вы хотите запустить эффект и очистить его только один раз (при монтировании и демонтировании), вы можете передать пустой массив ([]) в качестве второго аргумента. Это говорит React, что ваш эффект не зависит от каких-либо значений из реквизита или состояния, поэтому его не нужно повторно запускать. Это не обрабатывается как особый случай - это следует непосредственно из того, как всегда работает массив зависимостей.

Так же относится и к вашему примеру:

  useEffect(() => {
    console.log("CONTEXT DATA WHEN PAGE 2 LOADS:", data)
    mergeData({
      location,
    })
-  }, [location, mergeData, data])
+  }, [])

Таким образом, useEffect работает только при первом монтировании. Я думаю, что вы также можете оставить location там, это также предотвратит бесконечный цикл, так как useEffect не зависит от значения context.