🤔 Основные причины отказа от классовых компонентов в react?

С появлением React Hooks в версии 16.8 (2019 год) классовые компоненты стали устаревшим способом создания компонентов. Сегодня функциональные компоненты с хуками заменяют классы. Давайте разберем почему.

🟠Меньше кода → чище и понятнее
Функциональные компоненты короче, читаются легче, а код становится чище.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <button onClick={this.increment}>
        Счетчик: {this.state.count}
      </button>
    );
  }
}

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Счетчик: {count}
    </button>
  );
}

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { time: 0 };
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ time: this.state.time + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return <p>Время: {this.state.time} секунд</p>;
  }
}

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => setTime(t => t + 1), 1000);
    return () => clearInterval(timer);
  }, []);

  return <p>Время: {time} секунд</p>;
}

const Button = React.memo(({ onClick }) => {
  console.log("Ререндер кнопки");
  return <button onClick={onClick}>Нажми</button>;
});

function App() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount(c => c + 1), []);

  return (
    <div>
      <p>Счетчик: {count}</p>
      <Button onClick={increment} />
    </div>
  );
}

function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log("Компонент монтирован");
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

function useLogger() {
  useEffect(() => console.log("Компонент монтирован"), []);
}

function MyComponent() {
  useLogger();
  return <p>Привет, мир!</p>;
}