使用来自嵌套 componentDidMount() 的钩子

Question

I am trying to integrate hooks with some legacy React code. My old react code triggers a callback from a componentDidMount. I wanted to use a hook in the callback to update some state, but that doesnt seem to work: the hook gets stuck with the original value. Here's a pared down, reproducible example:

https://jsfiddle.net/0yf2xm96/16/

const Test = () => {
    const [value, setValue] = React.useState(0);
  
    return (
    <div>
      <Test2 onMount={() => setValue(value + 1)} />
      <Test2 onMount={() => setValue(value + 1)} />

      { value /* displays 1, but I'd like to see 2 */ }
    </div>
  );
}

class Test2 extends React.Component {
    componentDidMount() {
    this.props.onMount();
  }
  
  render() { return null; }
}

ReactDOM.render(<Test />, document.querySelector("#app"))

I want that to display 2, not 1 - how would i go about doing that?

Answer 1

You can pass a function to the useState hook that takes the previous state value as an argument, as seen in the docs . Change your onMount to:

<Test2 onMount={() => setValue(prev=>prev + 1)} />
<Test2 onMount={() => setValue(prev=>prev + 1)} />

Answer 2

Ciao, I suggest you to modify your code like this:

const Test = () => {
    const [value, setValue] = React.useState(0);
  
  
    return (
    <div>
      <Test2 onMount={() => setValue(value => value + 1)} />
      <Test2 onMount={() => setValue(value => value + 1)} />

      { value }
    </div>
  );
}

Explanation: you know hook are async and if you call just setValue(value + 1) you are not considering the previous value of value . Bu tif you use arrow funcition the problem will be solved.

Here your code modified.

Answer 3

TLDR: Value is "stale". Use a functional update.

---

What's causing the problem

Lets think about this in plain javascript terms first.

Test is a function. Yes, its a component so it gets used like a special function with special JSX syntax, but ultimately its just a function.

With that understanding, we can also understand that value , while it is part of a useState hook, is just a javascript variable. In fact, its a const which means its value cannot be changed after it has been declared. I think this is a misunderstanding that most people have about the useState hook - just because it's stateful does not mean it can abandon the rules of being a const .

When you call a useState updater, it will signal React that the component needs to re-render. This re-render may not happen immediately . When the component is re-rendered, the function Test is called again. The implications of this are that a new const called value is created. The new const is assigned the value passed from the useState updater. This is what makes the hook so powerful. Setting state is not a simple variable assignment, it is a way to maintain values through multiple function calls.

Back to the issue: When you declare two arrow functions like you did here:

<Test2 onMount={() => setValue(value + 1)} />
<Test2 onMount={() => setValue(value + 1)} />

You can hopefully now see that value in both of these functions is 0. Even after the first function is called, value is a const and still retains the value 0. Both functions get called before the next render cycle, which means the second one to be called is victim to value going stale.

Solution

Use the callback version of setting state referred to as functional updates . Most people eventually figure out the solution whether they understand why or not. When using the updater form, the value of state passed into the callback function is always guaranteed to use the most recent version, thereby removing the issue.