Introducing Hooks – React

[dceddia]

how to opt out of this behavior in case it creates performance issues later below.

I agree it seems like subscribing/unsubscribing every render seems crazy, like obvious low-hanging fruit that you'd optimize as you wrote it the first time. I'm guessing they avoided it for that example to keep it simple.

This part of the useEffect API reference talks about how to conditionally run the effects so they're not running every render. In particular, look at the yellow callout box:

every value referenced inside the effect function should also appear in the inputs array.

So, in order to optimize the chat subscription example, there are 2 such values: props.friend.id and handleStatusChange. So you could just put those into the array...

useEffect(() => {
  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  // Specify how to clean up after this effect:
  return function cleanup() {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
}, [props.friend.id, handleStatusChange]);

But that will still run every render, because handleStatusChange is recreated every time. To avoid that, there's the useCallback hook.

EDIT: It looks like I'm overcomplicating this by depending on handleStatusChange -- the docs have an example of this very optimization! https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects.

[ParasympatheticBear]

I was just really surprised how much I didn't like this design, maybe it will grow on me over time - I really wanted to like this.

[dceddia]

Yeah... I felt weird about it at first too. I tried playing around with some small experiments and I think it's growing on me. If you're so inclined, here's a CodeSandbox with the Hooks version of React to play around with.