Author: Nie Fankun

This article dissects react hooks from a source code perspective. Before we begin, read about the importance of React hooks and why you need function components:

  • React Hooks, turn React upside down, this is what its future should be like

  • React Hooks 10 minutes Quick Start: React Hooks

First, the misunderstanding of reading the source code

First, we need to find the source code for hooks, which can be found in the node_modules react package

All you see are these hooks definitions, which are implemented as var Dispatcher = resolveDispatcher(); The implementation of the resolveDispatcher() method is also confused by the different events that the dispatcher calls. ReactCurrentDispatcher has nothing in the source code. So it doesn’t work to read hooks from the node_modules react module package.

Where do I start reading the source code

The correct way to do this is to download the source code from the Github React repository. The react and React-Reconciler modules are included in the Packages path, which is strongly related to hooks.

ReactCurrentDispatcher ReactCurrentDispatcher ReactCurrentDispatcher ReactCurrentDispatcher ReactCurrentDispatcher

The type Dispatcher only provides type definitions for common methods such as useState, useEffect, etc. How can we find more useful information?

Three, how to quickly locate the method of source code implementation

If the source code isn’t working, it should be. If you are only defining a type, there must be somewhere else that calls that type to get a deeper implementation of hooks. So a trick is used here: search Dispatcher in react-Reconciler

You can see that two files refer to the Dispatcher defined in ReactInternalTypes and then open ReactFiberlinks.old.js to discover the new world.

HooksDispatcherOnMount(which is issued by hooks on component load), HooksDispatcherOnUpdate(which is issued by hooks on component update), Distributed HooksDispatcherOnRerender (hooks in the component rendering. These three objects are all in the renderWithHooks function.

Tracing back to the source we look for the reference file for renderWithHooks. In ReactFiberBeginWork. Old. USES in the js updateFunctionComponent function, and this function is invoked in the case of FunctionComponent, The case ClassComponent below calls the updateClassComponent of the method, so here

Since finding code is the tricky way to do it, let’s go back to the hooks implementation as a single word — Sharding task scheduling. For those of you unfamiliar with the term sharding, read this article

  • React Fiber is a new engine

This article mentioned two stages, Reconcile and Commit phase from two stages which correspond ReactFiberBeginWork. Old. Js and ReactFiberCommitWork. Old. Js (now the old and the new code in a file are all the same, Maybe Facebook will do some optimization and refactoring, so make a copy with old and new as the distinction.

Four, inreconcilePhase calls the core methodrenderWithHooks

The core method renderWithHooks is called during the Reconcile phase when resolved to a function component:

This method determines whether HooksDispatcherOnMount or HooksDispatcherOnUpdate is executed based on the current attribute of the shard task. In the rendering phase react HooksDispatcherOnRerender scheduler will timely execution

Fifth, incommitStage ofhookExecution queue release

During the commit phase, the hook will be de-queued when parsed to a function component:

Submitted for commitHookEffectListUnmount literally lifted the hooks execution queue, will be the one of hooksEffect empty or destroyed.

In this article, I will briefly explain how the React scheduler works and how to find the hooks source code.

The next section covers the source code implementation of those hooks methods.