4 resources to learn React under the hood

One of the best ways to improve as a developer is to understand how the tools we use work. If you've been working with React for a while, and you are pretty comfortable working with its API, it's time to take the next step and find out how it works under the hood.

In this article you'll find a compilation of excellent resources that will help you understand how React does what it does.

1. Build your own React

Build your own React is a fantastic article written by Rodrigo Pombo that goes over how to build your own React from scratch. It is an amazing place to start the journey of learning how React works, since it goes over most of the core functionalities and structure of React. On Build your own React you'll learn about the following topics:

  1. The createElement Function
  2. The render Function
  3. Concurrent Mode
  4. Fibers
  5. Render and Commit Phases
  6. Reconciliation
  7. Function Components
  8. Hooks

To better learn the content, my suggestion is that you code along with the article. By the end of it, you'll have implemented your own version of React from scratch.

2. Overreacted

Overreacted is the personal blog of Dan Abramov. In case you didn't know, Dan Abramov is a member of the React core team and a co-author of Create-React-App.

In Dan's blog you'll be able to find a lot of interesting articles about the inner workings of React. Some of those article are:

  1. React as a UI Runtime
  2. A Complete Guide to useEffect
  3. Why Do React Hooks Rely on Call Order?
  4. How Does React Tell a Class from a Function?

Overreact articles tend to be long, and the content can be quite heavy. My suggestion is that you focus on it and try to not get distracted. Otherwise, it might be hard to grasp the concepts being explained.

Dan will probably keep updating his blog with more interesting content, so it's a good idea to keep an eye out for it.

3. React codebase overview

If you really want to go deep, the overview page of React's codebase is the place to go.

By going over the documentation, you'll not only learn more about the overall architecture of React, you'll also find a lot of interesting resources each of the core main components of the React architecture.

Also, by going over the codebase overview and its recommended resource, you'll be in better shape to give back to the community and one day make a contribution to React itself. It's a pretty good investment.

4. Reactiflux's channel react-internals

Getting to know a codebase as complex as React's can be difficult. So it's always good to know where to ask for help.

Reactiflux is a chat community for developers who want to chat about React & Javascript. In there you'll find a channel dedicated to the inner workings of React, called react-internals.

If you've got a doubt about how React does something, react-internals is a good place to ask for help.

It's also a good idea to just go to the channel and read the messages that are in there. You'll often find really good material that will help you better understand how React works.

Conclusion

By now, you already know some good resources to get started learning React under the hood.

However, beware that learning a lot of material at once can be quite hard and takes some time. So look at this as a continued effort, and not as something to get done in a day. It's more of a marathon and less of a sprint.

Schedule slots of your days to go over these resources. Try to not get distracted or interrupted during those slots. Follow the order the resources were presented in this article. And really focus on the content. Sooner rather than later, you'll feel a lot more confident on your skills as a React developer.