методы ЖЦ классового компонента

App.jsx

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    console.log('constructor');
  }

  static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps');
    // пример: синхронизация state с props
    return null;
  }

  componentDidMount() {
    console.log('componentDidMount');
    // запрос к API, подписка и т.д.
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate');
    return true; // вернуть false, если не нужно обновлять
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate');
    return null; // можно вернуть, например, scroll position
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate');
    // реагирование на обновления
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
    // очистка ресурсов: таймеров, подписок и т.д.
  }

  render() {
    console.log('render');
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Увеличить
        </button>
      </div>
    );
  }
}

export default MyComponent;