В каких случаях перерисовывается компонент

В каких случаях перерисовывается компонент

Перрисовка (re-render) компонента в React — это процесс, при котором компонент заново вызывает свою функцию для вычисления нового состояния UI. Это критическое понятие для понимания производительности приложения.

Основные случаи перерисовки

1. Изменение состояния (State Changes)

Это основная причина перерисовки. Когда вы вызываете функцию-сеттер из useState, React помечает компонент для перерисовки:

function Counter() {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(count + 1); // Вызывает перерисовку
  };
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

2. Изменение пропсов (Props Changes)

Когда родительский компонент передает новые значения в пропсы, дочерний компонент перерисовывается:

function Parent() {
  const [name, setName] = useState("Alice");
  
  return (
    <Child name={name} /> // При изменении name Child перерисуется
  );
}

function Child({ name }) {
  return <div>Hello, {name}</div>;
}

3. Перерисовка родителя

Когда родительский компонент перерисовывается, все его дочерние компоненты также перерисовываются (если не применены оптимизации):

function Parent() {
  const [parentState, setParentState] = useState(0);
  
  return (
    <div>
      <Child /> {/* Перерисуется, даже если её пропсы не изменились */}
      <button onClick={() => setParentState(parentState + 1)}>Update</button>
    </div>
  );
}

Оптимизация: Предотвращение ненужных перерисовок

React.memo — предотвращает перерисовку, если пропсы не изменились:

const Child = React.memo(function Child({ name }) {
  console.log("Child re-rendered");
  return <div>Hello, {name}</div>;
});

function Parent() {
  const [counter, setCounter] = useState(0);
  const name = "Alice";
  
  return (
    <div>
      <Child name={name} /> {/* Не перерисуется при изменении counter */}
      <button onClick={() => setCounter(counter + 1)}>Update</button>
    </div>
  );
}

useMemo и useCallback — мемоизируют значения и функции:

function Parent() {
  const [count, setCount] = useState(0);
  
  // Стабильная ссылка на функцию
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  
  // Стабильный объект
  const user = useMemo(() => ({ name: "Alice", age: 25 }), []);
  
  return <Child onClick={handleClick} user={user} />;
}

Когда НЕ происходит перерисовка

• Изменение переменных вне компонента
• Изменение DOM напрямую (когда вы не используете React для обновления)
• Изменение состояния другого компонента (если они не связаны через props или Context)

Инструменты для отладки

React DevTools Profiler показывает, какие компоненты перерисовываются и почему:

// Включить в Chrome DevTools > React DevTools > Profiler
// Запись показывает время и причину каждой перерисовки

console.log в компоненте помогает отследить перерисовки:

function MyComponent() {
  console.log("MyComponent rendered");
  return <div>Content</div>;
}

Лучшие практики

1. Минимизируй скоп состояния — держи state как можно ближе к месту использования
2. Избегай создания новых объектов в render — используй useMemo для сложных вычислений
3. Используй useCallback для обработчиков — особенно если передаёшь их дочерним компонентам
4. Профилируй с помощью DevTools — не оптимизируй раньше времени
5. React.memo для дорогих компонентов — мемоизируй компоненты, которые часто перерисовываются

Понимание механизма перерисовки критически важно для создания производительных React-приложений.