在 useEffect 上使用方法有困难，缺少依赖项和 useCallback 错误？

Question

This is my code:

  const dfEventQuery = async (event: string) => {
    const {
      data: { result }
    } = await axios.post("/api/df_event_query", { event, userId });
    for (let msg of result.fulfillmentMessages) {
      const botSay: MessageDataType = { speaks: "bot", msg };
      setMessages(oldMessages => [...oldMessages, botSay]);
    }
  };
  const resolveInXSeconds = (x: number) =>
  new Promise(res => {
    setTimeout(() => {
      res(x);
    }, x * 1000);
  });
  useEffect(() => {
    dfEventQuery("Welcome");
    if (inputRef.current) inputRef.current.focus();
    const sendShopWelcome = async () => {
      await resolveInXSeconds(1);
      dfEventQuery("WELCOME_SHOP");
      setShopWelcomeSent(true);
      setShowChatbot(true);
    };
    if (window.location.pathname === "/shop" && !shopWelcomeSent) {
      sendShopWelcome();
    }
    history.listen(() => {
      if (history.location.pathname === "/shop" && !shopWelcomeSent) {
        sendShopWelcome();
      }
    });
  }, [shopWelcomeSent, history]);

I have this error:

React Hook useEffect has a missing dependency: 'dfEventQuery'. Either include it or remove the dependency array

but when i add it on the array: [shopWelcomeSent, history, dfEventQuery] I get this error:

The 'dfEventQuery' function makes the dependencies of useEffect Hook (at line 201) change on every render. To fix this, wrap the 'dfEventQuery' definition into its own useCallback() Hook

I've been stuck with it for hours and just can't wrap my head why this don't work?

Answer 1

so in this case it's easier just to wrap function into useCallback listing all its dependencies there:

const dfEventQuery = useCallback(async (event: string) => {
  const {
    data: { result }
  } = await axios.post("/api/df_event_query", { event, userId });
  for (let msg of result.fulfillmentMessages) {
    const botSay: MessageDataType = { speaks: "bot", msg };
    setMessages(oldMessages => [...oldMessages, botSay]);
  }
}, [userId]);

and listing it into useEffect 's dependencies.

But honestly, I'd expect Eslint not complaining on missing dependency since in your code it will be recreated in relevant render cycle and no "stale closure" issue will happen anyway.

[UPD] find similar case in thread https://github.com/facebook/react/issues/14920#issuecomment-467212561 but don't see any comment either if that's expected(and why) or if it's legit to have such a function out of useEffect's deps.