React Hooks та Context докорінно змінили підхід до керування станом і обміну даними у React-додатках. З появою хуків у версії 16.8 у 2019 році розробники отримали можливість використовувати стан і методи життєвого циклу у функціональних компонентах, що призвело до більш лаконічного та читабельного коду.

З іншого боку, Context забезпечує зручний спосіб обміну даними між компонентами без необхідності передавати пропси на кожному рівні. Ми розглянемо потужну синергію між React hooks та Context, демонструючи їхній спільний потенціал у спрощенні складного керування станом і забезпеченні безперервного потоку даних у дереві компонентів.

У наступних розділах детально розглянемо наступне:

Хук стану

useState дозволяє компоненту зберігати та відновлювати інформацію (наприклад, введення користувача). Наприклад, компонент форми може використовувати стан для збереження значення введення, а компонент галереї зображень — для відстеження індексу вибраного зображення.

function Form() {
  const [value, setValue] = useState('');
  // ...
}

Хук посилання

useRef надає можливість компоненту зберігати інформацію, яка не впливає на рендеринг, таку як DOM-вузол або ідентифікатор тайм-ауту. На відміну від стану, зміна посилання не викликає повторного рендерингу компонента. Посилання слугують «аварійним виходом» із типової парадигми React і корисні при взаємодії з не-React системами, наприклад, з нативними API браузера.

function Form() {
  const inputRef = useRef(null);
  // ...
}

Хук ефекту

useEffect дозволяє компоненту встановлювати зв'язки та синхронізуватися із зовнішніми системами, включаючи взаємодію з мережами, маніпулювання DOM браузера, обробку анімацій, інтеграцію віджетів, розроблених з використанням інших UI-бібліотек, а також безшовне включення коду, написаного не на React.

function Animation({ animationId }) {
  useEffect(() => {
    const animation = createAnimation(animationId);
    animation.start();
    
    // Cleaning up the animation when the component unmounts
    return () => animation.stop();
  }, [animationId]);
  // ...
}

Хук мемоізації

useMemo підвищує продуктивність рендерингу шляхом мінімізації зайвих обчислень. Наприклад, можна вказати React повторно використовувати кешований результат обчислення або уникати повторного рендерингу, якщо дані не змінилися з попереднього рендеру.

function NewspaperList({ data, filter }) {
  const filteredData = useMemo(
    () => performFiltering(data, filter),
    [data, filter]
  );
  // ...
}

Хук контексту

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

function Section() {
  const theme = useContext(ThemeContext);
  // ...
}