🔄 Advanced Lifecycle Methods

Production patterns using class component lifecycle methods.

getDerivedStateFromProps

class Synced extends React.Component {
  static getDerivedStateFromProps(props, state) {
    if (props.value !== state.value) {
      return { value: props.value };
    }
    return null;
  }

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

shouldComponentUpdate for Performance

class Optimized extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.id !== this.props.id;
  }

  render() {
    return <div>{this.props.id}</div>;
  }
}

✅ Key Takeaways

• Use **getDerivedStateFromProps** for sync

• Use **shouldComponentUpdate** for optimization

• Profile with React DevTools Profiler