React useEffect return best practice

user_985585 0
Viewed 127

I am trying to understand if it's against React's best-practices to use return in useEffect, to avoid some logic from being executed. So far in documentation I only see it being used for clean-ups.

I have a candidate which wrote similar logic:

useEffect(() => {
  if (foo === 'bar') {
   baz();
   return;
  }
  xyz();
,[foo]);

Ideally should be one of:

1.

useEffect(() => {
  if (foo === 'bar') {
   baz();
  } else {
    xyz();
  }
,[foo]);
  1. two smaller useEffects
  2. logic separated from useEffect, and is conditional

However, to not have this opinion based. I am trying to find articles on this best-practice? PS. Official React docs do NOT have this kind of approach used ANYWHERE, or mention it other than a clean-up function.

react-hooks reactjs
1 Answers

When you return nothing from a function (or useEffect) it defaults to returning undefined; similar thing happens if you just write return. So there is nothing wrong with this:

 if (foo === 'bar') {
   baz();
   return;
  }

So, writing return would be similar to just writing useEffect without return keyword, which is Ok.

Valid things you can return from useEffect are: undefined or a cleanup function.

user_39630670
Related