"arrow function expected no return value" with clean-up function in useEffect

Question

Here is my useEffect with a simple clean-up function () => { inbox?.destroy(); }, but it raises a warning when I let the clean-up function there. Why is that, isn't the clean-up function a legit syntax? How to fix it (of course without removing the clean-up function)?

  useEffect(() => {
    const { currentUser } = initialState!;
    let inbox: Talk.Inbox;
    if (!currentUser || !talkjsContainerRef.current) return;

    Talk.ready.then(async () => {
      const me = employeeToUser(currentUser);
      window.talkSession = new Talk.Session({ appId, me });
      if (id === undefined) {
        // me without other => most recent message first
        inbox = window.talkSession.createInbox();
      } else {
        // me with an other => select other
        const other = employeeToUser(await readEmployee(Number(id)));
        const conversation = window.talkSession.getOrCreateConversation(Talk.oneOnOneId(me, other));
        conversation.setParticipant(me);
        conversation.setParticipant(other);
        inbox = window.talkSession.createInbox({ selected: conversation });
      }
      inbox.mount(talkjsContainerRef.current);
    });

    return () => {
      inbox?.destroy();
    };
  }, [id, initialState]);

@T.J.Crowder I've captured the error message on the screenshot, it's from VSCode, I didn't write it up. — Loi Nguyen Huynh, May 23 '21 at 11:00
I thought you added that (like the box around it). Wow that's bad phrasing on ESLint's part. — T.J. Crowder, May 23 '21 at 11:01

score 42 · Accepted Answer · answered May 23 '21 at 10:53

A possible fix: turn return; to return undefined;

Explanation:

I had violated the consistent-return rule

This rule requires return statements to either always or never specify values

At line 4, if (!currentUser || !talkjsContainerRef.current) return;, my return statement didn't specify a value, which is contradictory to my "clean-up function".

"arrow function expected no return value" with clean-up function in useEffect

1 Answers1

Explanation: