1. useState

2. useEffect

useState

Step1. Firstly, let's see how to use the useState in React formlly.

import React, { useState } from 'react';
const [state, setState] = useState(initialState);

Step2. Hence we know that the useState function will return an array including two values. The first value is the target state and second one is the corresponding setState function.

let memorizedState;
function useState(initialValue) {
    // ...
    return [memorizedState, setState];
}

Step3. Furthermore, let's realize the details simply.

function render () {
    // ...
}

let memorizedState;
function useState(initialValue) {
    memorizedState = initialValue || state;
    function setState(newValue) {
        memorizedState = newValue;
        render();
    }
    return [memorizedState, setState];
}

Step4. Nevertheless, we can execute the useState several times in one application. So how to reach this? The answer is that hooks are not magic but only arrays.

function render () {
    // ...
}

let memorizedState = [];
let curIndex = 0;
function useState(initialValue) {
    memorizedState[curIndex] = initialValue || state;
    function setState(newValue) {
        memorizedState[curIndex] = newValue;
        render();
    }
    return [memorizedState[curIndex++], setState];
}

useEffect

Step1. Similarly, let's see how to use the useEffect in React formlly.

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

function Clock() {
    const [count, setCount] = useState(0);
    useEffect(()=>{
        console.log(`Show ${count} times.`);
    });
    return (
        <div> Clock Component. Totally {count} times.</div>
    );
}

Step2. As we saw above, useEffect function has a callback parameter and this callback will be executed.

function useEffect(callback) {
    callback();
}

Step3. The useEffect function can have a second parameter which should be an array standing for the dependencies. Meanwhile, we should also consider the multiple times to execute useEffect.

let effectQueue = [];
let index = 0;
function useEffect(callback, deps) {
    if (Array.isArray(deps)) {
        return 'The second parameter should be array.';
    } else if (!deps)) {
        callback();
    } else {
        const prevDeps = effectQueue[index];
        const hasChanged = deps.every((dep, index) => {
            return !(dep === prevDeps[index]);
        });
        if (hasChanged) {
            callback();
        }
        effectQueue[index] = deps;        
    }
    index++;
}

wannamakeudance / react-hook-design-pattern Goto Github PK

react-hook-design-pattern's Introduction

1. useState

2. useEffect

useState

Step1. Firstly, let's see how to use the useState in React formlly.

Step2. Hence we know that the useState function will return an array including two values. The first value is the target state and second one is the corresponding setState function.

Step3. Furthermore, let's realize the details simply.

Step4. Nevertheless, we can execute the useState several times in one application. So how to reach this? The answer is that hooks are not magic but only arrays.

useEffect

Step1. Similarly, let's see how to use the useEffect in React formlly.

Step2. As we saw above, useEffect function has a callback parameter and this callback will be executed.

Step3. The useEffect function can have a second parameter which should be an array standing for the dependencies. Meanwhile, we should also consider the multiple times to execute useEffect.

react-hook-design-pattern's People

Contributors

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent