What are Higher-Order Components (HOCs), and why were they slowly replaced by hooks?

HOCs are functions that take a component and return a new component, used for reusing logic (like authentication or theming).
Drawbacks:

• Wrapper hell (deep nesting).
• Harder debugging (component names lost).
• Props collisions.
  

Hooks (introduced in React 16.8) solved these problems by letting you reuse stateful logic without changing the component hierarchy