How exactly does React work internally?

For many of us, how React works under the hood is a mystery.

What algorithm does React use to minimize DOM updates?

How are hooks implemented?

How does React.createElement handle both plain HTML elements & React components?

If one really wanted to understand this topic better, these are some of the resources they’d probably look at:

I’ve read all of these, and I know that they aren’t the easiest to follow. They’re often theory-heavy with no code examples, or 2000 word+ series that can get hard to keep up with.

Here’s the part where I offer you a better solution.

Build your own React is a hands-on challenge where you’ll learn React internals by building a small React implementation. The library you’ll build will support function components, hooks and efficient DOM updates. To keep things simple, we’ll leave a few details out, like React Fiber and class components.

You’ll proceed stage by stage, starting with simple stages like “Create a simple HTML element” and eventually building up to a minimal-featured React implementation that can handle function components and hooks. Along the way, you’ll learn about React’s API, DOM-diffing algorithm, hooks and more!

You’ll be able to attempt this challenge in Javascript or Typescript. You’ll work from the comfort of your own editor, submitting code via a Git push once ready. We’ll stream helpful test results directly to your terminal.

You’ll also get to chat & compete with like-minded folks in the process. (We run 1-week long sessions, attempt at your own pace)

Sounds like your jam? Checkout our early access program!