Frontend | Вопросы собесов on Telegram: “📌 Как часто происходит рендер? 💬 Спрашивают в…”

📌 Как часто происходит рендер?

💬 Спрашивают в 3% собеседований

В React рендеринг компонента происходит в нескольких ситуациях. Давайте рассмотрим основные из них:

1️⃣ Первоначальный рендеринг:

➕ Когда компонент впервые монтируется в DOM.

2️⃣ Обновление состояния (state):

➕ Если состояние компонента изменяется с помощью this.setState в классовых компонентах или useState в функциональных компонентах.

3️⃣ Обновление пропсов (props):

➕ Когда компонент получает новые пропсы от родительского компонента.

4️⃣ Обновление контекста (context):

➕ Когда значение контекста, используемого компонентом, изменяется.

5️⃣ Обновление при изменении ключа (key):

➕ Если ключ компонента изменяется (например, в списках), React будет рассматривать это как удаление старого компонента и добавление нового.

Теперь разберём каждый случай подробнее:

1️⃣ Первоначальный рендеринг

Когда компонент впервые добавляется в DOM, происходит его рендеринг. Это единственный раз, когда компонент рендерится в процессе монтирования.

Пример:

function App() {
  return <MyComponent />;
}

2️⃣. Обновление состояния

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

Пример:

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

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

3️⃣ Обновление пропсов

Если родительский компонент передаёт новые пропсы, дочерний компонент будет ререндериться с новыми данными.

Пример:

function ParentComponent() {
  const [value, setValue] = useState(0);

  return (
    <div>
      <button onClick={() => setValue(value + 1)}>Change Value</button>
      <ChildComponent value={value} />
    </div>
  );
}

function ChildComponent({ value }) {
  return <p>{value}</p>;
}

4️⃣ Обновление контекста

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

Пример:

const MyContext = React.createContext();

function App() {
  const [value, setValue] = useState('initial');

  return (
    <MyContext.Provider value={value}>
      <button onClick={() => setValue('updated')}>Update Context</button>
      <MyComponent />
    </MyContext.Provider>
  );
}

function MyComponent() {
  const contextValue = useContext(MyContext);
  return <p>{contextValue}</p>;
}

5️⃣ Обновление при изменении ключа

Если ключ компонента изменяется, React удаляет старый компонент и добавляет новый, вызывая рендеринг нового компонента.

Пример:

function App() {
  const [items, setItems] = useState([1, 2, 3]);

  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
      <button onClick={() => setItems([4, 5, 6])}>Change Items</button>
    </ul>
  );
}

🤔 Оптимизация рендеринга

Чтобы уменьшить количество ненужных рендеров, можно использовать:

➕ PureComponent и React.memo для функциональных компонентов.
➕ shouldComponentUpdate для классовых компонентов.
➕ useMemo и useCallback для мемоизации значений и функций в функциональных компонентах.

🤔 Резюме:
Компоненты React рендерятся при первоначальном монтировании, изменении состояния, изменении пропсов, изменении контекста и изменении ключа. Оптимизация рендеринга может быть достигнута с помощью PureComponent, React.memo, shouldComponentUpdate, useMemo и useCallback.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых