Bad - EndlessComponent.tsx

// Bad Example

export class EndlessComponent extends React.Component<{ animate: boolean }, { animate: boolean }> {
  componentDidUpdate() {
    const animate = { this.props };
    // This will trigger `componentDidUpdate` in an endless loop
    // even if the value of `animate` does not change.
    this.setState({ animate });
    if (animate) {
      doAnimate();
    }
  }
}

Good - SaneComponent.tsx

// Good Example

export class SaneComponent extends React.Component<{ animate: boolean }, { animate: boolean }> {
  componentDidUpdate(prevProps) {
    const animate = { this.props };
  
    // Instead, compare the previous value. Only update state if necessary
    // based on props
    if (animate !== prevProps.animate) {
      this.setState({ animate });
    }

    if (animate) {
      doAnimate();
    }
  }
}