In React, what is the difference these useEffect?

Question

  useEffect(() => {
    return () =>
      setTimeout(() => set_current_focus(index_map[comp_index]), 1000);
  }, [comp_index]);

and

  useEffect(() => {
    return setTimeout(() => set_current_focus(index_map[comp_index]), 1000);
  }, [comp_index]);

Based on my testing, there is no difference.

Can someone confirm?

What should the `useEffect` do? `set_current_focus` after 1 second whenever comp_index changes? — Ramesh Reddy, Jan 13 '22 at 05:59
neither are correct. `useEffect(() => {/*component created, set timer*/const timer=setTimeout(cb, delay);return () => {/*component destroyed, clear timer*/clearTimeout(timer)}})` — Ruslan Tushov, Jan 13 '22 at 06:01

score 1 · Accepted Answer · answered Jan 13 '22 at 06:06

Both useEffect snippets are incorrect.

The value returned by the callback passed to useEffect should be a function used for cleaning up things (like clearing the timeout in your case).

So the correct usage looks like this:

useEffect(() => {
  const timeout = setTimeout(
    () => set_current_focus(index_map[comp_index]),
    1000
  );

  return () => clearTimeout(timeout);
}, [comp_index]);

In React, what is the difference these useEffect?

1 Answers1