【react】You can understand componentDidUpdate In A Minute

TiShow
1 min readMar 1, 2023

componentDidUpdate is the function calldeafter some values are updated in setState.

Advantages

  • You can get th value after the update most safety.
  • You can pick the value up before the update.
  • It doesn’t make user unconfortable even if setState doesn’t have extra drawing in componentDidUpdate.

Basic Usage

componentDidUpdate(prevState) {
if (this.state.name !== prevState.name) {
console.log(“name is updated”)
}

Note

Basically, comparing the value before the update and the value after the update and adding some process is mainly used.

If you do not compare correctly, it occurs the infinity loop such as update-> setstate-> render-> update-> setstate-> render…
It is necessary to add processing by correctly comparing the values before the update with the values before the update.

summary

I think that you should implement componentDidUpdate when you want to add processing depending on the result after something is updated.
The usage is severe. If you implement it without thinking, it would be a loop or a bug.
At present, it is a compromise because this function can safely compare after the update.

--

--

TiShow

80% is the creation, the rest is depression. Developer and Data scientist. Looking for Physics Ph.D Twitter: @_t_i_show