React Hook useEffect - проблема зависимости

Question

Я получаю предупреждающее сообщение в своем приложении, и я пытался удалить его безуспешно. Сообщение об ошибке:

React Hook useEffect отсутствует зависимость: «updateUserData». Либо включите его, либо удалите массив зависимых реагирующих хуков / исчерпывающий-deps

Я не хочу исключать это с помощью комментария, чтобы избежать проблемы, но я хочу исправить это "лучшепрактика "way.

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

Так ... что я делаю неправильно? (любой обзор кода об остальном очень приветствуется!)

Спасибо, миллион!

Если я добавлю [] в качестве второго параметра useEffect, я получу предупреждение, а удаляя его, я получубесконечный цикл.

Также добавление [updateuserData] получает бесконечный цикл.

import React, { useState } from "react";
import UserContext from "./UserContext";


interface iProps {
    children: React.ReactNode
}

const UserProvider: React.FC<iProps> = (props) => {
    // practice details
    const [userState, setUserState] = useState({
        id'',
        name: ''
    });

    // practice skills
    const [userProfileState, setuserProfileState] = useState([]);

    // user selection
    const [userQuestionsState, setuserQuestionsState] = useState({});


    return (
        <UserContext.Provider value={{
            data: {
                user: userState,
                userProfile: userProfileState,
                questions: userQuestionsState
            },
            updateuserData: (id : string) => {
                 // call 3 services with axios in parallel
                 // update state of the 3 hooks
            }
        }}
        >
            {props.children}
        </UserContext.Provider>
    );
};

export default UserProvider;

const UserPage: React.FC<ComponentProps> = (props) => {


    const {data : {user, profile, questions}, updateUserData}: any = useContext(UserContext);

    useEffect(() => {
        // update information
        updateUserData("abcId")
    }, []);



    return <div>...</div>

}

Идея заключается в следующем:

• Iесть контекст

• Я создал провайдер для этого контента

• , который предоставляет данные и функцию обновления

• Я использую этого поставщика в компоненте с ловушкой useEffect и получаю предупреждение

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

Answer 1

Во-первых, бесконечный цикл вызван тем, что ваш контекст обновляется, что вызывает повторную визуализацию вашего компонента, который обновляет ваш контекст, что вызывает повторную визуализацию вашего компонента. Добавление зависимости должно предотвратить этот цикл, но в вашем случае это не потому, что когда ваш контекст обновляется, предоставляется совершенно новый updateuserData, поэтому проверка равенства ссылок обнаруживает изменение и запускает обновление, когда вы не хотитеit to.

Одним из решений было бы изменить способ создания updateUserState в вашем UserProvider, используя, например, useCallback для передачи той же функции, если не изменяется одна из зависимостей:

const UserProvider: React.FC<iProps> = (props) => {
  // practice details
  const [userState, setUserState] = useState({
      id'',
      name: ''
  });

  // practice skills
  const [userProfileState, setuserProfileState] = useState([]);

  // user selection
  const [userQuestionsState, setuserQuestionsState] = useState({});
  const updateuserData = useCallback(id=>{
    // call your services
  }, [userState, userProfileState, userQuestionsState])

  return (
      <UserContext.Provider value={{
          data: {
              user: userState,
              userProfile: userProfileState,
              questions: userQuestionsState
          },
          updateuserData
      }}
      >
          {props.children}
      </UserContext.Provider>
  );
};