Які дані краще зберігати в стані компонента, а які передавати через пропси? Наведіть приклад.

Повне пояснення

Що це і навіщо

У React state використовується для внутрішньої логіки компонента, а пропси – для передачі даних та колбеків між компонентами. Це дозволяє ізолювати локальну поведінку і забезпечує односторонній потік даних.

Ключові принципи

• State: локальний, змінюється через setState/Hook; компонент сам керує ним.
• Props: зовнішній, односторонній; компонент не змінює їх безпосередньо.

Як це працює

React рендерить компонент, передає пропси, а state зберігається в інтерналі. При зміні state викликається повторний рендер.

Практика і реалізація

// Counter.tsx – локальний state
import { useState } from 'react';
export const Counter = ({ onIncrement }: { onIncrement: () => void }) => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => { setCount(c => c + 1); onIncrement(); }}>+</button>
    </div>
  );
};

// Parent.tsx – передає пропс
import { Counter } from './Counter';
export const Parent = () => {
  const handleInc = () => console.log('incremented');
  return <Counter onIncrement={handleInc} />;
};

Тестування

• Unit: перевірити, що setCount змінює state.
• Integration: перевірити, що onIncrement викликається при кліку.

Оптимізація

Використовуйте React.memo або useCallback, щоб уникнути зайвих рендерів, коли пропси не змінюються.

Часті помилки

1. Модифікація пропсів – не дозволено.
2. Зберігання великих об’єктів у state – краще передавати через пропси.
3. Невірне використання ключів – може призвести до некоректного рендеру.
4. Занадто глибока вкладеність пропсів – розділіть на декілька компонентів.
5. Використання state для даних, що не змінюються – це зайве рендеринг.
6. Відсутність типізації у TS – може призвести до помилок.
7. Невикористання useCallback для колбеків – викликає нові функції при кожному рендері.
8. Зберігання колбеків у state – не потрібно, передавайте їх як пропси.

Cheatsheet

• State: локальні, змінюються через setState/Hook.
• Props: зовнішні, односторонній потік.
• useCallback: мемоізація колбеків.
• React.memo: запобігання зайвим рендером.

Follow‑up питання

1. Як уникнути «prop drilling»? – використати Context або state‑менеджер.
2. Коли слід використовувати Redux замість локального state? – коли дані потрібні багатьом компонентам.
3. Як працює useReducer у порівнянні з useState? – для складної логіки стану.