React useEffect 无法更新 function 变量

Question

Regarding this part of code:

const MyComponent = props => {

    let number = 0
    React.useEffect(() => {
        number = number + 1
        console.log('inside useEffect: ', number);
    }, [number])

    console.log('outside useEffect: ', number);

    return <div/>
}

I expect the number to be 1 after executing the useEffect but here is the log:

outside useEffect:  0
inside useEffect:  1
outside useEffect:  0
outside useEffect:  0

My question is why useEffect can't update number ? How can I update a simple variable in useEffect ?

Note: This code is just a sample

Answer 1

You should use react-hook's useState .

 const MyComponent = props => { const [number, setNumber] = React.useState(0) React.useEffect(() => { setNumber(number+1) }, []) React.useEffect(() => { console.log(number) }, [number]) return <div/> }

Answer 2

Your number is not in state, and every time your function is re-renderd your number do not preserve value, but create new value, which is initial one (0).

You have three possibilities:

1. Put number in const [number, setNumber] = useState();
2. useRef(number)
3. You can also try to put number outside of MyComponent function, and then it should preserve value.

In my opinion preferable way to do this is with useRef .

Answer 3

Whenever you see console.log('outside useEffect: ', number) executed, it means there's been a re-render triggered. Since you put the log inside the render function body.

Now take a closer look, what else is inside the render function body?

let number = 0

Of course, this line of code will reset number back to 0 every time a re-render is triggered. That's the why.

Ok, what solution we have? useRef() it is:

const MyComponent = props => {
    const number = useRef(0);
    React.useEffect(() => {
        number.current = number.current + 1
        console.log('inside useEffect: ', number.current);
    }, [number.current])

    console.log('outside useEffect: ', number.current);

    return <div/>
}