InfiniteL oop in useEffect, когда одна из зависимостей является функцией из useContext

Question

Я довольно долго боролся с этим и не нашел ответа.

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

У меня есть useEffect, который отправляет данные. Функция, выполняющая эту задачу, живет в контексте

  const { sendDataToServer } = useContext(context)

  useEffect(() => {
    const sendData = async () => {
      setLoading(true)
      await sendDataToServer(...data)
      setLoading(false)
    }
    sendData()
  }, [sendDataToServer, data])

. Если я включу sendDataToServer в список зависимостей, этот useEffect woild go превратится в бесконечный l oop, что приведет к бесконечному повторному рендерингу. Я полагаю, это связано с тем, что ссылки на функцию имеют разное значение при каждом рендере.

Я, конечно, могу изменить дизайн приложения и не сохранять функцию has в контексте, но мне это нравится и я не считаю это плохой практикой (поправьте, если я ошибаюсь)

Итак какие у меня здесь варианты? Как сохранить поток с контекстом, но использовать useEffect с правильным списком зависимостей?

Answer 1

Вы правы в своем предположении, поэтому мы получили useCallback для ссылочного равенства.

Вы не разместили функцию sendDataToServer, но она должна выглядеть примерно так с useCallback:

const sendDataToServer = useCallback(data => {
    // your implementation
}, [your, dependencies])

После этого вы можете безопасно использовать его в своем useEffect.

Я настоятельно рекомендую Kent C. Сообщения в блоге Додда: Когда использовать Memo и useCallback

Smartassing сейчас: если единственной целью является отправка данных на сервер (а не изменение состояния приложения), я не знаю, почему это должен быть частью контекста. Это может быть пользовательский хук или даже функция c stati.

Кстати: может быть другая проблема: если зависимость data в вашем useEffect изменится при выполнении sendDataToServer, вы по-прежнему есть бесконечный l oop (например, когда вы получаете новые данные после выполнения sendDataToServer), но мы не можем видеть остальную часть кода.