{"componentChunkName":"component---src-templates-docs-js","path":"/docs/hooks-custom.html","result":{"data":{"markdownRemark":{"html":"

Хуки — це новинка в React 16.8. Вони дозволяють вам використовувати стан та інші можливості React без написання класу.

\n

Створення власних хуків дозволить вам винести логіку компонента у функції, придатні для повторного використання.

\n

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

\n
import React, { useState, useEffect } from 'react';\n\nfunction FriendStatus(props) {\n  const [isOnline, setIsOnline] = useState(null);  useEffect(() => {    function handleStatusChange(status) {      setIsOnline(status.isOnline);    }    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);    return () => {      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);    };  });\n  if (isOnline === null) {\n    return 'Завантаження...';\n  }\n  return isOnline ? 'В мережі' : 'Не в мережі';\n}
\n

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

\n
import React, { useState, useEffect } from 'react';\n\nfunction FriendListItem(props) {\n  const [isOnline, setIsOnline] = useState(null);  useEffect(() => {    function handleStatusChange(status) {      setIsOnline(status.isOnline);    }    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);    return () => {      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);    };  });\n  return (\n    <li style={{ color: isOnline ? 'green' : 'black' }}>\n      {props.friend.name}\n    </li>\n  );\n}
\n

Замість цього ми б хотіли, щоб FriendStatus і FriendListItem розділяли цю логіку.

\n

Інколи треба повторно використовувати однакову логіку стану в декількох компонентах. Традиційно використовувалися два підходи: компоненти вищого порядку та рендер-пропси. Зараз ми побачимо, як за допомогою хуків вирішити багато схожих проблем без додавання непотрібних компонентів у дерево.

\n

Виокремлення користувацького хука

\n

Коли ми хочемо, щоб дві функції JavaScript розділяли спільну логіку, ми виокремлюємо її в третю функцію. Компоненти та хуки є функціями, а тому це правило працює і для них!

\n

Користувацький хук — це JavaScript-функція, ім’я якої починається з ”use”, і яка може викликати інші хуки. Наприклад, useFriendStatus нижче — наш перший користувацький хук:

\n
import { useState, useEffect } from 'react';\n\nfunction useFriendStatus(friendID) {  const [isOnline, setIsOnline] = useState(null);\n\n  useEffect(() => {\n    function handleStatusChange(status) {\n      setIsOnline(status.isOnline);\n    }\n\n    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);\n    return () => {\n      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);\n    };\n  });\n\n  return isOnline;\n}
\n

Тут немає нічого нового — логіка повністю скопійована з компонентів вище. Так само як і в компонентах, ви маєте впевнитись, що не використовуєте хуки в межах умовних операторів і викликаєте їх на верхньому рівні вашого власного хука.

\n

На відміну від React-компонента, користувацький хук не повинен мати особливої сигнатури. Ми можемо вирішувати, що він прийматиме як аргументи, яке значення він буде повертати і чи буде повертати його взагалі. Іншими словами, все як для звичайної функції. Ім’я функції-хука варто завжди починати з use, щоб ви могли відразу розпізнати, що для неї виконуються правила хуків.

\n

Метою нашого useFriendStatus хука є підписка на статус друга. Саме тому він приймає friendID у якості аргумента та повертає статус друга в мережі:

\n
function useFriendStatus(friendID) {\n  const [isOnline, setIsOnline] = useState(null);\n\n  // ...\n\n  return isOnline;\n}
\n

Тепер давайте поглянемо, як ми можемо використовувати наш користувацький хук.

\n

Використання користувацького хука

\n

Спочатку нашою метою було усунення повторної логіки з компонентів FriendStatus і FriendListItem. Кожен з них хоче знати, чи знаходиться друг у мережі.

\n

Тепер, коли ми виокремили цю логіку в хук useFriendStatus, ми можемо просто використати його:

\n
function FriendStatus(props) {\n  const isOnline = useFriendStatus(props.friend.id);\n  if (isOnline === null) {\n    return 'Завантаження...';\n  }\n  return isOnline ? 'В мережі' : 'Не в мережі';\n}
\n
function FriendListItem(props) {\n  const isOnline = useFriendStatus(props.friend.id);\n  return (\n    <li style={{ color: isOnline ? 'green' : 'black' }}>\n      {props.friend.name}\n    </li>\n  );\n}
\n

Чи є цей код еквівалентним початковим прикладам? Так, він працює абсолютно таким самим чином. Придивіться ближче і ви побачите, що ми не внесли ніяких змін у логіку. Все, що ми зробили, це виокремили спільних для обох функцій код в окрему функцію. Користувацькі хуки — це більше домовленість, яка природньо випливає з дизайну хуків, а не особливість функціоналу React.

\n

Чи повинен я починати імена моїх хуків з “use”? Так, будь ласка. Ця домовленість є дуже важливою. Без неї ми не зможемо автоматично перевіряти порушення правил хуків, тому що ми не зможемо визначити, чи містить певна функція виклики хуків.

\n

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

\n

Як користувацький хук отримує власний ізольований стан? Кожен виклик хука отримує ізольований стан. Незважаючи на те, що ми напряму викликаємо useFriendStatus, з точки зору React наш компонент просто викликає useState і useEffect. І як ми дізналися раніше, ми можемо викликати useState та useEffect багато разів в одному компоненті і при цьому вони будуть повністю незалежними.

\n

Порада: Передача інформації між хуками

\n

Оскільки хуки є функціями, ми можемо передавати інформацію між ними.

\n

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

\n
const friendList = [\n  { id: 1, name: 'Маруся' },\n  { id: 2, name: 'Гриць' },\n  { id: 3, name: 'Галя' },\n];\n\nfunction ChatRecipientPicker() {\n  const [recipientID, setRecipientID] = useState(1);  const isRecipientOnline = useFriendStatus(recipientID);\n  return (\n    <>\n      <Circle color={isRecipientOnline ? 'green' : 'red'} />      <select\n        value={recipientID}\n        onChange={e => setRecipientID(Number(e.target.value))}\n      >\n        {friendList.map(friend => (\n          <option key={friend.id} value={friend.id}>\n            {friend.name}\n          </option>\n        ))}\n      </select>\n    </>\n  );\n}
\n

Ми зберігаємо поточний ID друга у змінній стану recipientID і оновлюємо її, якщо користувач обирає іншого друга в <select>.

\n

Оскільки виклик хука useState надає нам останнє значення змінної стану recipientID, ми можемо передати його у наш користувацький хук useFriendStatus у якості аргумента:

\n
  const [recipientID, setRecipientID] = useState(1);\n  const isRecipientOnline = useFriendStatus(recipientID);
\n

Це дозволяє нам дізнатись, чи є наразі обраний друг у мережі. Якщо ми оберемо іншого друга і оновимо змінну стану recipientID, наш хук useFriendStatus відпишеться від попередньо обраного друга і підпишеться на статус щойно обраного.

\n

useYourImagination()

\n

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

\n

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

\n

Наприклад, ви хочете мати складний компонент, що містить багато локальних змінних стану і керується особливим чином. useState не спрощує централізацію логіки оновлення, а тому ви можете захотіти переписати його у вигляді редюсера Redux:

\n
function todosReducer(state, action) {\n  switch (action.type) {\n    case 'add':\n      return [...state, {\n        text: action.text,\n        completed: false\n      }];\n    // ... інші дії ...\n    default:\n      return state;\n  }\n}
\n

Редюсери дуже зручні для тестування в ізоляції і масштабування для вираження більш складної логіки оновлення. За необхідності ви можете розбити їх на менші за об’ємом редюсери. Однак вам можуть подобатися переваги використання локального стану React або ж ви не хочете встановлювати додаткову бібліотеку.

\n

А що, якби ми могли написати хук useReducer, що дозволяє вам керувати локальним станом нашого компоненту, використовуючи редюсер? Його спрощена версія може виглядати так:

\n
function useReducer(reducer, initialState) {\n  const [state, setState] = useState(initialState);\n\n  function dispatch(action) {\n    const nextState = reducer(state, action);\n    setState(nextState);\n  }\n\n  return [state, dispatch];\n}
\n

Тепер ми можемо використати цей хук в нашому компоненті і дозволити редюсеру керувати його станом:

\n
function Todos() {\n  const [todos, dispatch] = useReducer(todosReducer, []);\n  function handleAddClick(text) {\n    dispatch({ type: 'add', text });\n  }\n\n  // ...\n}
\n

Потреба керувати локальним станом складного компонента за допомогою редюсера доволі поширена. Саме тому ми вже додали хук useReducer до React. Ви знайдете його разом з іншими вбудованими хуками у API-довіднику хуків.

","frontmatter":{"title":"Створення користувацьких хуків","next":"hooks-reference.html","prev":"hooks-rules.html"},"fields":{"path":"content/docs/hooks-custom.md","slug":"docs/hooks-custom.html"}}},"pageContext":{"slug":"docs/hooks-custom.html"}},"staticQueryHashes":[]}