Explain useEffect hook in React.js?

React useEffect is a function that gets executed for 3 different React component lifecycles. Those lifecycles are componentDidMount, componentDidUpdate, and componentWillUnmount lifecycles. useEffect accepts a function as it’s first argument. This function handler will take care of any side affects you like when it gets run.

When using the useEffect hook, it’s common to compare it to all of the class component lifecycle methods. Instead, you should think of the useEffect hook in terms of how you want your state to look after certain variables change.

Some rules to keep in mind about the useEffect hook:

  • You cannot call a hook within a conditional;
  • Hooks must be called in the exact same order. Putting the useEffect inside of a conditional could break that cycle;
  • The function you pass the hook cannot be an async function, because async functions implicitly return promises, and a useEffect function either returns nothing or a cleanup function.