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 🔥”.

Suspense has been a feature in React since v16.6.0. Despite this, I haven’t seen much of it in action beyond limited applications of “suspense-enabled libraries”. The React team seems to think Suspense is so incomplete that the entire API remains undocumented. I think that purposefully hiding APIs in documentation is silly, but fine! I’ll play their game! Let’s build a Suspense-enabled library, and use it. We will peel back the curtain of Suspense along the way.

React v18.0 has broken ground by introducing a long-awaited feature: Concurrency! Unfortunately, despite a deluge of resources explaining how to use it, explanations of how it works are sparse. As it is a low-level feature, it’s not critical to understand React’s idea of concurrency, but it doesn’t hurt!

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.