How to deal with the second parameter of useEffect from the source code

useEffect is a commonly used hook, it supports two parameters, the first parameter is the callback function, and the second parameter is the dependency.

When the second parameter is null or undefined, the callback function will be executed every time it is rendered, and when the parameter is an array, it will be executed only when the dependencies are changed.

These are all familiar to us, but how is it achieved? Let's find the answer from the source code.

The second parameter of useEffect

Let's first try the effect when the second parameter is passed in undefined, empty array, and dependent array.

Prepare a piece of code like this:

import { useEffect, useRef, useState } from 'react';

function Dong() {
    const ref = useRef(1);

    const [,setState] = useState();

    useEffect(() => {
        console.log(111);
    });

    useEffect(() => {
        console.log(222);
    }, []);

    useEffect(() => {
        console.log(333);
    }, [ref.current]);

    useEffect(() => {
        setInterval(() => {
            setState([]);
        }, 1000);
    
        setTimeout(() => {
            ref.current = 2;
        }, 3000);
    }, []);

    return <div>dong</div>;
}
复制代码

We wrote three useEffects, the second parameter is undefined, [], there is a dependent array, and the callback function prints 111, 222, and 333 respectively.

Then useState declares a state and uses setInterval to modify it regularly, so that render can be triggered continuously.

An object is declared with useRef. Its characteristic is that the same object is returned every time the render is performed. We use setTimeout to modify its value after 2s.

The result of execution should be easy to think of:

111 is printed every time because the second parameter is undefined.

222 is only printed once because the second parameter is [].

333 is printed twice, because the second parameter has a dependency, which changes once in 2s.

These are all familiar to us, but why is it like this?

Let's look at the source code:

useEffect related source code

The principle of react hooks was written in the previous article, and we will go through it again:

jsx is compiled to generate a render function, and the execution returns to vdom. However, in order to improve performance, React 16 introduces a fiber architecture, which will first convert vdom to fiber, and then update it to dom.

The process of converting vdom to fiber is called reconcile, and the process of updating to dom is called commit. The process of reconcile is interruptible and requires a schedule.

hooks 也是基于 fiber 来实现的，它在 fiber 节点上维护了一个链表（memorizedState 属性），用来保存数据，每个 hook 都是从对应的链表元素上存取各自的数据。

比如上面那个组件的 6 个 hook 就对应着 fiber 节点上 memorizedState 链表的 6 个元素：