Skip to main content

react/noWillUpdateSetState

prevent usage of setState in componentWillUpdate

ESLint Equivalent: no-will-update-set-state

Examples

Invalid

class Hello extends React.Component {
	componentWillUpdate() {
		this.setState({
			name: 'John'
		});
	}
}

 file.tsx:3:2 lint/react/noWillUpdateSetState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid calling this.setState in the componentWillUpdate method.

    1class Hello extends React.Component {
    2  componentWillUpdate() {
  > 3    this.setState({
         ^^^^^^^^^^^^^
    4      name: 'John'
    5    });

  Updating state immediately before a scheduled render causes a second
    render that can cause visual layout thrashing.


class Hello extends React.Component {
	componentWillUpdate() {
		foo();
		this.setState({
			name: 'John'
		});
	}
}

 file.tsx:4:2 lint/react/noWillUpdateSetState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid calling this.setState in the componentWillUpdate method.

    2  componentWillUpdate() {
    3    foo();
  > 4    this.setState({
         ^^^^^^^^^^^^^
    5      name: 'John'
    6    });

  Updating state immediately before a scheduled render causes a second
    render that can cause visual layout thrashing.


class Hello extends Component {
	componentWillUpdate() {
		this.setState({
			name: 'John'
		});
	}
}

 file.tsx:3:2 lint/react/noWillUpdateSetState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid calling this.setState in the componentWillUpdate method.

    1class Hello extends Component {
    2  componentWillUpdate() {
  > 3    this.setState({
         ^^^^^^^^^^^^^
    4      name: 'John'
    5    });

  Updating state immediately before a scheduled render causes a second
    render that can cause visual layout thrashing.


class Hello extends Component {
	componentWillUpdate() {
		foo();
		this.setState({
			name: 'John'
		});
	}
}

 file.tsx:4:2 lint/react/noWillUpdateSetState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid calling this.setState in the componentWillUpdate method.

    2  componentWillUpdate() {
    3    foo();
  > 4    this.setState({
         ^^^^^^^^^^^^^
    5      name: 'John'
    6    });

  Updating state immediately before a scheduled render causes a second
    render that can cause visual layout thrashing.


class Hello extends React.Component {
	UNSAFE_componentWillUpdate() {
		this.setState({
			name: 'John'
		});
	}
}

 file.tsx:3:2 lint/react/noWillUpdateSetState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid calling this.setState in the componentWillUpdate method.

    1class Hello extends React.Component {
    2  UNSAFE_componentWillUpdate() {
  > 3    this.setState({
         ^^^^^^^^^^^^^
    4      name: 'John'
    5    });

  Updating state immediately before a scheduled render causes a second
    render that can cause visual layout thrashing.


class Hello extends Component {
	UNSAFE_componentWillUpdate() {
		this.setState({
			name: 'John'
		});
	}
}

 file.tsx:3:2 lint/react/noWillUpdateSetState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid calling this.setState in the componentWillUpdate method.

    1class Hello extends Component {
    2  UNSAFE_componentWillUpdate() {
  > 3    this.setState({
         ^^^^^^^^^^^^^
    4      name: 'John'
    5    });

  Updating state immediately before a scheduled render causes a second
    render that can cause visual layout thrashing.

Valid

class Hello extends React.Component {
	componentWillUpdate() {
		if (condition) {
			this.setState({
				name: 'John'
			});
		}
	}
}
class Hello extends React.Component {
	componentWillUpdate() {
		condition && this.setState({
			name: 'John'
		});
	}
}
class Hello extends React.Component {
	componentWillUpdate() {
		condition ? this.setState({
			name: 'John'
		}) : undefined;
	}
}