Reading Source Code: React

#366 – July 25, 2022


If you’re building a B2B/multi-tenant application, you’ll want to have some dynamic way to know which organization your users are accessing at any point in time. With PropelAuth’s hosted pages, your users can create organizations in your app, enabling you to easily check their roles, memberships, and more in your React app.

this week's favorite

It’s daunting to even think about reading the code of a framework I’ve been using for years. I’ve always seen React as a black box that takes JSX and puts things on the screen without thinking too much about it.

There are two exceptions where the devtools are unable to infer a name of a component. Contexts and 'wrapped' or 'higher-order' components, i.e. components wrapped in memo and forwardRef. The devtools need some help to be able to display a name for those, this is where the displayName property comes in.

There is one problem that every React Developer falls into during his journey. This is how to structure a good app architecture.

Clean code isn't code that just works. It refers to neatly organized code which is easy to read, simple to understand and a piece of cake to maintain.

Why Would You Want To Use the React’s Context API for Global State Management?The answer is simply that although you can pass a state from the main parent component all the way down to all child components via props, it becomes very cumbersome after 2 levels => deep prop drilling is a bad practice leading to code that is hard to read and maintain. And that’s when you should have a look at a state management library (e.g., Redux) or the built-in React Context.