Having difficulty using a method on useEffect, missing dependency and useCallback error?

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?

where is this dfEventQuery coming from?

skyboyer
– skyboyer

2020-01-05 21:26:43 +00:00
Commented Jan 5, 2020 at 21:26 — skyboyer
– skyboyer, Commented Jan 5, 2020 at 21:26
@skyboyer i'm editing, sorry

gpbaculio
– gpbaculio

2020-01-05 21:27:16 +00:00
Commented Jan 5, 2020 at 21:27 — gpbaculio
– gpbaculio, Commented Jan 5, 2020 at 21:27

skyboyer · Accepted Answer · 2020-01-05 21:37:28Z

2

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.

edited Jan 5, 2020 at 21:37

answered Jan 5, 2020 at 21:30

skyboyer

24k7 gold badges65 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gpbaculio Over a year ago

Thank you for saving my day, I'm new in hooks, saved lot of time

Collectives™ on Stack Overflow

Having difficulty using a method on useEffect, missing dependency and useCallback error?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related