Вступ: React Хуки та Контекст

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

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

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

Хук State

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

js
9
1
2
3
4
function Form() {
  const [value, setValue] = useState('');
  // ...
}

Хук Ref

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

js
9
1
2
3
4
function Form() {
  const inputRef = useRef(null);
  // ...
}

Хук Effect

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

js
99
1
2
3
4
5
6
7
8
9
10
function Animation({ animationId }) {
  useEffect(() => {
    const animation = createAnimation(animationId);
    animation.start();
    
    // Cleaning up the animation when the component unmounts
    return () => animation.stop();
  }, [animationId]);
  // ...
}

Хук Memo

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

js
9
1
2
3
4
5
6
7
function NewspaperList({ data, filter }) {
  const filteredData = useMemo(
    () => performFiltering(data, filter),
    [data, filter]
  );
  // ...
}

Хук Context

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

js
9
1
2
3
4
function Section() {
  const theme = useContext(ThemeContext);
  // ...
}