airbnb / airbnb/javascript

Calling setState in componentDidUpdate

Open
#1,875 11 comments 118 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
148k
Forks
26.6k
PR merge metrics
No merged PRs in 30d

Description

It might be worth revisiting [react/no-did-update-set-state](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md).

Now that `componentWillReceiveProps()` is being deprecated, `componentDidUpdate()` is the only "safe" way to detect changes in props and set state accordingly.

The [React docs](https://reactjs.org/docs/react-component.html#componentdidupdate) say calling `setState()` in `componentDidUpdate()` is permitted, albeit with caveats.

> You may call setState() immediately in componentDidUpdate() but note that it must be wrapped in a condition like in the example above, or you’ll cause an infinite loop. It would also cause an extra re-rendering which, while not visible to the user, can affect the component performance.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the linked react/no-did-update-set-state rule documentation and the React componentDidUpdate documentation. Determine what change to the rule or its guidance the issue proposes, then verify the expected behavior against the documented caveats; done requires a decided scope and corresponding project update.

Written by the indexing model from the issue text.

Assessment

Tech stack
eslint, javascript, react
Domain
frontend, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.