Skip to main content

Повторний рендер

ReactJunior~1 хв читання
Запропонувати правку

1. Зміна state (стану)

Кожен виклик setState() чи setCount() (у useState) запускає повторний рендер компонента.

javascript
function Counter() { const [count, setCount] = useState(0); console.log('Ререндер!'); return ( <button onClick={() => setCount(count + 1)}> {count} </button> ); }

Кожен клік викликає setCount, count змінюється, React повторно викликає компонент, щоб оновити UI.

Якщо ти викличеш setCount(count) з тим самим значенням, React не ререндеритиме, бо стан не змінився (React робить поверхневе порівняння).

2. Зміна props

Якщо батьківський компонент передає нові props, React ререндерить дочірній компонент, щоб він відобразив оновлені дані.

javascript
function Child({ value }) { console.log('Ререндер Child!'); return <p>{value}</p>; } function Parent() { const [count, setCount] = useState(0); return ( <> <Child value={count} /> <button onClick={() => setCount(count + 1)}>+</button> </> ); }

Щоразу, коли count змінюється, у <Child /> змінюється prop value, і він ререндериться.

Щоб уникнути непотрібних ререндерів, можна використати React.memo(Child) - тоді компонент ререндериться лише при зміні пропсів.

3. Зміна context

Якщо ти використовуєш useContext() і значення в Context.Provider змінилося, усі споживачі цього контексту будуть ререндерені.

javascript
const ThemeContext = createContext('light'); function App() { const [theme, setTheme] = useState('light'); return ( <ThemeContext.Provider value={theme}> <Toolbar /> <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}> Перемкнути тему </button> </ThemeContext.Provider> ); } function Toolbar() { const theme = useContext(ThemeContext); console.log('Ререндер через контекст!'); return <div className={theme}>Toolbar</div>; }

При зміні теми (setTheme) контекст оновлюється, усі компоненти, що використовують useContext(ThemeContext), ререндеряться.

4. Ререндер батька → ререндер нащадків

Якщо батько ререндериться, React за замовчуванням викликає ререндер усіх його нащадків, навіть якщо їхні props не змінилися.

Щоб цього уникнути:

  • обгорни дочірній компонент у React.memo();
  • або використовуй мемоізовані значення й колбеки через useMemo() і useCallback().

5. Виклик forceUpdate() (рідко)

У класових компонентах можна явно викликати this.forceUpdate(), що змусить React виконати ререндер, навіть якщо state і props не змінилися.

6. Зміни в батьківському дереві або ключах (key)

Якщо у компонента змінюється ключ (key), React перемонтує його (unmount → mount), що фактично перемальовує його з нуля.

Важливо пам'ятати:

  • Ререндер ≠ оновлення DOM. React може викликати компонент заново, але не торкнеться DOM, якщо результат JSX не змінився (diff = 0).
  • React оптимізує це за допомогою Virtual DOM і Reconciliation.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку