Руслан Куянец | Reactify on Telegram: “👩‍💻 Рендеринг в React В React рендеринг

👩‍💻 Рендеринг в React

В React рендеринг — это процесс, при котором компонент заново отрисовывается на основе новых данных. Этот процесс происходит по нескольким причинам:

📌 1. Изменение состояния (state)
Если состояние компонента меняется, React автоматически запускает его ререндеринг. Например:


const CounterButton = () => {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Click me {count} times
    </button>
  );
};

Когда мы вызываем setCount, значение count меняется, что приводит к ререндерингу компонента, чтобы отобразить обновлённое число.

📌 2. Изменение пропсов (props)
Пропсы сами по себе не являются первичной причиной ререндеринга, а скорее следствием изменения состояния в родительском компоненте. Если состояние родителя обновляется, он перерисовывается и передает изменённые пропсы дочернему компоненту. Это приводит к ререндерингу дочернего компонента:


// Родительский компонент
const Parent = () => {
  const [text, setText] = useState('Hello');

  return (
    <>
      <Child message={text} />
      <button onClick={() => setText('Hello, World!')}>Change Text</button>
    </>
  );
};

// Дочерний компонент
const Child = ({ message }) => <div>{message}</div>;

Когда setText меняет состояние text, компонент Parent перерисовывается, и передаёт новое значение пропса message в Child, что вызывает ререндеринг дочернего компонента.

Примечание: При использовании React.memo изменения пропсов действительно считаются причиной ререндеринга, если новый пропс отличается от предыдущего.

📌 3. Изменение контекста (Context)
Если компонент использует контекст (useContext или <Context.Consumer>), и его значение меняется, то все компоненты, подписанные на этот контекст, будут перерисованы:


const ThemeContext = React.createContext('light');

const Parent = () => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <Child />
      <button onClick={() => setTheme('dark')}>Toggle Theme</button>
    </ThemeContext.Provider>
  );
};

const Child = () => {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
};

Когда значение контекста theme изменяется (например, с 'light' на 'dark'), компонент Child ререндерится, чтобы отобразить новое значение темы.

📌 4. Ререндеринг родительского компонента
Даже если состояние компонента и его пропсы остаются неизменными, он будет перерисован, если родительский компонент ререндерится (даже без видимых изменений). Это связано с тем, что дочерние компоненты автоматически ререндерятся вместе с родительским компонентом. Например:


const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child />
    </>
  );
};

const Child = () => <div>I'm a child</div>;

Здесь Child не зависит от состояния count, но каждый раз, когда Parent ререндерится, Child ререндерится тоже. Это можно предотвратить с помощью React.memo.

❓ Как избежать лишних ререндеров?

✔️ React.memo: предотвращает ререндеринг компонента, если его пропсы не изменились.
✔️ Хук useCallback и useMemo: сохраняют функции и значения, чтобы они не создавались заново при каждом ререндеринге.
✔️ Оптимизация контекста: разбивайте контекст на отдельные провайдеры, чтобы уменьшить количество компонентов, реагирующих на изменение его значения.

#react #frontend #memo #render