Here is a visual example of how hooks move all the parts of a single concern into a single block of code which, in a class component, would be littered across

Here is a visual example of how hooks move all the parts of a single concern into a single block of code which, in a class component, would be littered across lifecycle methods: https://twitter.com/threepointone/status/1056594421079261185 https://twitter.com/threepointone/status/1056594421079261185 Grouping these parts this way means they can be trivially extracted as a Custom Hook[1] (analogous to a 'mixin' or 'trait' in OOP). By extracting this concern into a Custom Hook it can easily be reused by different components, as well as composed by other Custom Hooks. This was previously possible using Higher Order Components, Render Props and the (really old) React Mixins concept, but Hooks addresses problems with each of these previous approaches. If you want to know more about how Hooks improves over these previous approaches, see my previous comment: https://news.ycombinator.com/item?id=19074469 https://news.ycombinator.com/item?id=19074469 [1]: https://reactjs.org/docs/hooks-custom.html https://reactjs.org/docs/hooks-custom.html