В чем разница между рендером и ререндером у функциональных и классовых компонентов в React

Рендер (initial render) — первое отображение компонента в DOM. Ререндер (re-render) — повторное обновление компонента при изменении пропсов, состояния или контекста.

Функциональные компоненты:

• При ререндере вызывается вся функция компонента заново
• Хуки (useState, useEffect и др.) сохраняют состояние между рендерами

function MyComponent() {
  console.log('Render/Rerender'); // Вызывается при каждом обновлении
  const [count, setCount] = useState(0);
  // ...
}

Классовые компоненты:

• При ререндере вызывается только метод render()
• Методы жизненного цикла (componentDidUpdate и др.) контролируют процесс

class MyComponent extends React.Component {
  state = { count: 0 };
  
  render() {
    console.log('Render/Rerender'); // Вызывается при каждом обновлении
    // ...
  }
}

Оптимизации (React.memo, PureComponent) помогают избежать лишних ререндеров в обоих случаях.