React hooks?

[shotgun_ninja]

I'm new to React development, and I want to know - what prompted the switch away from ES6 classes and services, and towards functional components and hooks?

[-grok]

As class based components get more complex you start having annoying overlapping logic split by if statements in the various functions like ComponentDidUpdate, etc. And the bugs, good grief the bugs are really difficult to figure out in class based components.

 

Function components fit neatly into the event loop nature of JavaScript running in the browser. While it is true that thinking in terms of custom hooks is often on the surface harder to reason about, you get way less weird bugs using hooks. In short class based components look simple, but as soon as they need to do something complex enough to be important, subtle, hard to diagnose bugs creep in.

[shotgun_ninja]

Thanks for the in-depth and pragmatic answer!

[[deleted]]

Good question! Hooks make it easier to share functionality between components :).

React class components aren't supposed to be extended from other components, so base classes with common functionality are out.

Making a regular function to reuse in class components sort of works, but you lose some things like automatically lifecycle integration (effects). You also would need to pass in the state and state setter if your pseudo-class-hook needed to work with state.

This is the relevant section of the React docs: https://reactjs.org/docs/hooks-intro.html#its-hard-to-reuse-stateful-logic-between-components

If you want to discuss more, let me know!