Question is often asked in Junior/Middle interviews and it shows how deeply you’ve understood why React Hooks were introduced in the first place.
If we go back to the era of class components, we can see an obvious problem: state is tightly coupled to a specific component, and we can’t reuse it. Of course, people found workarounds - using inheritance or mixins - but that usually made things worse rather than solving the problem.
Let’s look at an example
Imagine we have a so-called Toggle that switches a button’s state. Right now, we use it in one component and it doesn’t cause any issues.
But later, we need to add the same functionality for modal windows. And this is exactly where the main problem with class components shows up. Since this.state is tied to a specific class, we can’t reuse that logic in another component.
So we end up writing workarounds. The most common ones are render props, inheritance, and HOCs. The last one is the most reasonable option on that list and often helped, but it made the codebase more complex.
With Hooks, the situation improved: we can extract all the toggle logic into a custom hook and reuse it in both a button and a modal window.