no-set-state-in-component-will-update

react-x/no-set-state-in-component-will-update

@eslint-react/no-set-state-in-component-will-update

// Problem: Calling setState directly in componentWillUpdate triggers another render and can easily cause infinite loops or layout thrashing
import React from "react";

interface MyComponentProps {}

interface MyComponentState {
  name: string;
}

class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  componentWillUpdate() {
    this.setState({ name: "John" });
    //   ^^^ Do not call `this.setState` in `componentWillUpdate` outside functions such as callbacks.
  }

  render() {
    return <div>Hello {this.state.name}</div>;
  }
}

// Recommended: Use instance variables or derive values during render
import React from "react";

interface MyComponentProps {
  value: number;
}

interface MyComponentState {
  prevValue: number;
}

class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  state = {
    prevValue: 0,
  };

  componentWillUpdate(nextProps: MyComponentProps) {
    // Store previous value in an instance variable, not state
    this.previousValue = this.props.value;
  }

  render() {
    const hasIncreased = this.props.value > this.state.prevValue;
    return <div>Value increased: {hasIncreased ? "Yes" : "No"}</div>;
  }
}