javascript - React hooks: What/Why `useEffect`?

Question

Concerning the newly proposed React Effect Hook;

1. What are the advantages and use cases of the Effect hook (useEffect())?

2. Why would it be preferable & how does it differ over componentDidMount/componentDidUpdate/componentWillUnmount (performance/readability)?

The documentation states that:

Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React’s render phase).

but I think it was already common knowledge to have these behaviors in lifecycle methods like componentDidUpdate, etc. instead of the render method.

There's also the mention that:

The function passed to useEffect will run after the render is committed to the screen.

but isn't that what componentDidMount & componentDidUpdate do anyways?

Answer 1

1. What are the advantages and use cases of the Effect hook (useEffect())?

   Advantages

   Primarily, hooks in general enable the extraction and reuse of stateful logic that is common across multiple components without the burden of higher order components or render props.

   A secondary benefit (of Effect hooks in particular) is the avoidance of bugs that might otherwise arise if state-dependent side effects are not properly handled within componentDidUpdate (since Effect hooks ensure that such side effects are setup and torn-down on every render).

   See also the peformance and readability benefits detailed below.

    

   Use cases

   Any component that implements stateful logic using lifecycle methods—the Effect hook is a "Better Way".

    

2. Why would it be preferable & how does it differ over componentDidMount/componentDidUpdate/componentWillUnmount (performance/readability)?

   Why it's preferable

   Because of the advantages detailed above and below.

    

   How it differs from lifecycle methods

   Performance

   Effect hooks—

   • feel more responsive than lifecycle methods because they don't block the browser from updating the screen;
   • will however setup and tear-down side effects on every render, which could be expensive…
   • …so can be optimised to be skipped entirely unless specific state has been updated.

    

   Readability

   Effect hooks result in:

   • simpler and more maintainable components, owing to an ability to split unrelated behaviour that previously had to be expressed across the same set of lifecycle methods into a single hook for each such behaviour—for example:

     componentDidMount() {
       prepareBehaviourOne();
       prepareBehaviourTwo();
     }
     
     componentDidUnmount() {
       releaseBehaviourOne();
       releaseBehaviourTwo();
     }
     

     becomes:

     useEffect(() => {
       prepareBehaviourOne();
       return releaseBehaviourOne;
     });
     
     useEffect(() => {
       prepareBehaviourTwo();
       return releaseBehaviourTwo;
     });
     

     Notice that code relating to BehaviourOne is now distinctly separated from that relating to BehaviourTwo, whereas before it was intermingled within each lifecycle method.

   • less boilerplate, owing to an elimination of any need to repeat the same code across multiple lifecycle methods (such as is common between componentDidMount and componentDidUpdate)—for example:

     componentDidMount() {
       doStuff();
     }
     
     componentDidUpdate() {
       doStuff();
     }
     

     becomes:

     useEffect(doStuff); // you'll probably use an arrow function in reality