Photo by Florian Olivo on Unsplash

A React passive effect is what’s used with and it invokes a new JavaScript task while everything implemented inside the callback can be still run in a sync way.

After the React finishes the render and goes to a commit. It collects the passive effect under the fiber.

But it doesn’t invoke each right away, instead, it does things a bit differently.

First of all, it waits for all effects to be collected using a flag . …

There’s no counterpart of Redux in React, the closest one is called Context. Quite a few of us argue that a context is local comparing to Redux which is quite global to the site, especially when it comes to where the data is stored.

However React context isn’t designed as a local variable, like in the similar sense as in a fiber, or a hook, or anything localized to a unit of work. On the contrary, it’s none of that. So we’ll explain why in the following.

Create a context

A context is created by a function ,

Photo by Ferenc Almasi on Unsplash

If you use a React context often, soon you will realize it’s a heavy operation when it’s updated. Therefore people tend to add a to the children. Then voila, things just get different right away, or sometimes nothing happens at all. :)

Say we have a component App providing some value.

Here’s the mount profile where everything is rendered.

Photo by Ferenc Almasi on Unsplash

React context provides a way so that we can share a value among the fiber tree. Instead of storing this value along with a fiber, it stores it in a separate storage, given the name Context.

Now the Context gives us a different kind of component called . Just like , , , has its own update mechanism.

When we reach a , it renders and reconciles its children and move on to the first child to continue the render work caused by one dispatch (or schedule).

It can’t unless you know what is .

React provides quite an optimization engine out of the box where it applies bailout pathway whenever it sees fit. And most of the pathway are built behind the scene, and developer knows them by mouth. Sometimes we get wrong idea about using certain features.

What is useMemo?

The word “memo” gives us a sense that there’re some memorization scheme used. But on the contrary, if you were calling an assignment a memo, then programming itself is a giant memo engine, which defeats the purpose of using this word. …

Are all props checked during each render in React?

React Profiler Figure

Let’s start from some common sense. We learned that all props are checked before each fiber is determined to render.

Suffice to say a fiber is a component or a node of a tree. In this article we use them interchangeably.

Is this right? Putting that aside, it really doesn’t tell us much, ex. where it starts and where it ends. Also it doesn’t tell us the difference between props and states either.

Let’s use one example to illustrate this matter. In above figure, a state has been changed in one of the component, the first colored block. …

When React receives a dispatch, it goes to render the fibers and later commit the changes to DOM based on the props and states.

This is very straight forward when we have one state and one location of action.

Assuming our tree of components looks like the following, and we have the component Title installed at the red dot.

The effect of the above dispatch pretty much does that, although the fact that React has to go…

Why you shouldn’t confuse yourself between a and a memorization

Maybe this is just me, but for a long time, I wired myself between a and a classical memorization. But actually from the study of source code, I made peace that they are very different, at least they don’t have much in overlap. Maybe the only thing they share is a partial word “memo”.

Design and implementation

is very close to , believe it or not, in terms of the syntax, usage as well as the implementation. …

Understand the useState hook’s workflow from the stripped-down version of the official React source code.

Photo by Ferenc Almasi on Unsplash

I read some implementations of from and repositories. And I thought I understood the behavior of until I finally read the official version under . Of course it’s not an easy read, anyway I bite the bullet with a lot of help from other people who read the source code :)

In order to understand the official source code, let me strip it down a bit so that we can follow the key workflow without going through hundreds of lines in many repositories.

Learning from the source code


Fang Jin

Front-end Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store