Here’s a question you might encounter while interviewing for React developer roles:

“What is the difference between a component and a hook?”

The answer that the interviewer is likely looking for is along the lines of “A component is a building block for the UI, and hooks are utility functions provided by React to manage state and side-effects 😴”.

It’s a satisfactory answer if your goal is to find employment. But if you want to make an impression, the more daring answer is: “There is no difference 🔥”.

JavaScript runs in a single-threaded environment with an event loop, an architecture that is very easy to reason about. It’s a continuous loop executing incoming work. Synchronous work runs immediately; asynchronous work runs when there is no synchronous work to left to perform. This design implies that performing synchronous work is a Big Deal: for every continuous moment it runs, the event loop cannot perform any work – none!

Before the introduction of contexts and hooks in React v16.8, Higher-Order Components (or HOCs for short) were a common sight. Today, it is an under-used pattern. While the concept presents infinite possibilities, practical applications should be limited to transparently adding wrappers or logic.