React Hook “useEffect” is called conditionally

Question

React is complaining about code below, saying it useEffect is being called conditionally:

Answer 1

The issue here is that when we are returning null from the if block, the useEffect hook code will be unreachable, since we returned before it, and hence the error that it is being called conditionally.

You might want to define all the hooks first and then start writing the logic for rendering, be it null or empty string, or a valid JSX.