jsx-eslint/eslint-plugin-react

Add configuration for no-did-update-set-state to allow usage inside condition

Open

#2,021 opened on Oct 18, 2018

View on GitHub
 (6 comments) (17 reactions) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
enhancementhelp wanted

Description

As @gaearon has mentioned here and other places, using setState inside componenDidUpdate is acceptable, so long as it's within a conditional check.

Does it seem reasonable to allow a configuration option for this rule to allow setState usage within componenDidUpdate, so long as it's within a conditional check of some kind?

For example, this would pass here:

componentDidUpdate() {
  if (!this.state.isEnabled) {
    this.setState({ isEnabled: true })
  }
}

but this would still fail:

componentDidUpdate() {
  this.setState({ isEnabled: true })
}

An issue here would be that it's still not entirely guaranteed that more complex use cases wouldn't still end up in an infinite loop.

Contributor guide

Tech stack
javascriptreact
Domain
frontendtooling
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ESLint plugin developmentReact lifecycle methodsJavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Examine the current implementation of the no did update set state rule in the source code (likely in lib/rules/no did update set state.js). Add a configuration option such as 'allowConditional' that permits setState inside componentDidUpdate when wrapped in a conditional statement. Modify the rule logic to check for surrounding conditional expressions. Update the rule's tests and documentation accordingly. Refer to existing configuration options in other rules for guidance.
Add configuration for no-did-update-set-state to allow usage inside condition · jsx-eslint/eslint-plugin-react#2021 | Good First Issue