You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react/hooks.md
+40-37Lines changed: 40 additions & 37 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,20 +4,21 @@ title: "React: вбудовані хуки"
4
4
5
5
<Intro>
6
6
7
-
*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React.
7
+
*Хуки* дають змогу використовувати різноманітні можливості React усередині компонентів. Ви можете застосовувати як вбудовані хуки, так і поєднувати їх, створюючи власні. На цій сторінці перелічено всі хуки, що вбудовані в React.
8
8
9
9
</Intro>
10
10
11
11
---
12
12
13
-
## State Hooks {/*state-hooks*/}
13
+
## Хуки стану {/*state-hooks*/}
14
14
15
-
*State* lets a component["remember" information like user input.](/learn/state-a-components-memory)For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index.
15
+
*Стан* дає компоненту змогу["запам’ятовувати" інформацію таку як, наприклад, введення користувача.](/learn/state-a-components-memory)Скажімо, компонент форми може зберігати введене значення, а компонент галереї зображень — індекс вибраного зображення.
16
16
17
-
To add state to a component, use one of these Hooks:
17
+
Щоб додати стан до компонента, використовуйте один із цих хуків:
18
+
19
+
*[`useState`](/reference/react/useState) оголошує змінну стану, яку ви можете оновлювати безпосередньо.
20
+
*[`useReducer`](/reference/react/useReducer) оголошує змінну стану з логікою оновлення всередині [функції-редюсера.](/learn/extracting-state-logic-into-a-reducer)
18
21
19
-
*[`useState`](/reference/react/useState) declares a state variable that you can update directly.
20
-
*[`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
21
22
22
23
```js
23
24
functionImageGallery() {
@@ -27,11 +28,11 @@ function ImageGallery() {
27
28
28
29
---
29
30
30
-
## Context Hooks {/*context-hooks*/}
31
+
## Хуки контексту {/*context-hooks*/}
31
32
32
-
*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep.
33
+
*Контекст* дає компоненту змогу [отримувати інформацію від далеких батьків без передавання через пропси.](/learn/passing-props-to-a-component) Наприклад, компонент найвищого рівня вашого застосунку може передавати поточну тему інтерфейсу всім вкладеним компонентам, незалежно від глибини.
33
34
34
-
* [`useContext`](/reference/react/useContext) reads and subscribes to a context.
35
+
* [`useContext`](/reference/react/useContext) читає та підписується на контекст.
35
36
36
37
```js
37
38
functionButton() {
@@ -41,12 +42,12 @@ function Button() {
41
42
42
43
---
43
44
44
-
## Ref Hooks {/*ref-hooks*/}
45
+
## Хуки рефів {/*ref-hooks*/}
45
46
46
-
*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.
47
+
*Рефи* дають компоненту змогу [зберігати довільну інформацію, яка не бере участі в рендері.](/learn/referencing-values-with-refs) Наприклад, DOM-вузол або ідентифікатор таймауту. На відміну від стану, оновлення рефа не призводить до повторного рендеру компонента. Рефи — це "рятівне рішення" за межами парадигми React. Вони корисні, коли потрібно працювати з не-React системами, як-от вбудовані API браузера.
47
48
48
-
* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node.
49
-
* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used.
49
+
* [`useRef`](/reference/react/useRef) оголошує реф. Ви можете зберігати в ньому будь-які дані, найчастіше — посилання на DOM-вузол.
50
+
* [`useImperativeHandle`](/reference/react/useImperativeHandle) дає змогу кастомізувати реф, який ваш компонент передає назовні. Використовується рідко.
50
51
51
52
```js
52
53
functionForm() {
@@ -56,11 +57,11 @@ function Form() {
56
57
57
58
---
58
59
59
-
## Effect Hooks {/*effect-hooks*/}
60
+
## Хуки ефектів {/*effect-hooks*/}
60
61
61
-
*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code.
62
+
*Ефекти* дають компоненту змогу [підключатися до зовнішніх систем і синхронізуватися з ними.](/learn/synchronizing-with-effects) Зокрема, це може бути робота з мережею, DOM браузера, а також анімаціями чи віджетами, створеними з використанням інших бібліотек, та іншим не-React кодом.
62
63
63
-
* [`useEffect`](/reference/react/useEffect) connects a component to an external system.
64
+
* [`useEffect`](/reference/react/useEffect) підключає компонент до зовнішньої системи.
64
65
65
66
```js
66
67
functionChatRoom({ roomId }) {
@@ -72,23 +73,24 @@ function ChatRoom({ roomId }) {
72
73
// ...
73
74
```
74
75
75
-
Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
76
+
Ефекти — це "аварійний вихід" за межі парадигми React. Не використовуйте ефекти для керування потоком даних у вашому застосунку. Якщо ви не взаємодієте із зовнішньою системою, [можливо, ефект вам взагалі не потрібен.](/learn/you-might-not-need-an-effect)
76
77
77
-
There are two rarely used variations of `useEffect` with differences in timing:
78
+
Існують дві рідковживані варіації `useEffect`, які відрізняються моментом виконання:
78
79
79
-
* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here.
80
-
* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.
80
+
* [`useLayoutEffect`](/reference/react/useLayoutEffect) спрацьовує до того, як браузер перемалює екран. У цей момент можна дізнатися розміри або положення елементів у DOM.
81
+
* [`useInsertionEffect`](/reference/react/useInsertionEffect) спрацьовує до того, як React змінить DOM. Бібліотеки можуть вставляти динамічний CSS саме тут.
81
82
82
83
---
83
84
84
-
## Performance Hooks {/*performance-hooks*/}
85
+
## Хуки продуктивності {/*performance-hooks*/}
86
+
87
+
Поширений спосіб оптимізації повторного рендеру — уникати зайвих обчислень. Наприклад, ви можете вказати React повторно використати кешований результат або пропустити ререндер, якщо дані не змінилися з моменту попереднього рендеру.
85
88
86
-
A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render.
89
+
Щоб уникати обчислень і непотрібного рендерингу, скористайтеся одним із цих хуків:
87
90
88
-
To skip calculations and unnecessary re-rendering, use one of these Hooks:
91
+
- [`useMemo`](/reference/react/useMemo) дає змогу кешувати результат ресурсомісткого обчислення.
92
+
- [`useCallback`](/reference/react/useCallback) дає змогу кешувати визначення функції перед тим, як передати її оптимізованому компоненту.
89
93
90
-
- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation.
91
-
- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component.
Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart).
102
+
Інколи уникнути ререндеру неможливо, бо екран справді потребує оновлення. У такому випадку продуктивність можна покращити, розділивши блокувальні оновлення, які мають бути синхронними (наприклад, введення тексту в поле), і неблокувальні, які не обов’язково затримують інтерфейс (наприклад, оновлення діаграми).
101
103
102
-
To prioritize rendering, use one of these Hooks:
104
+
Щоб керувати пріоритетом рендерингу, скористайтеся одним із цих хуків:
103
105
104
-
- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it.
105
-
- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first.
106
+
- [`useTransition`](/reference/react/useTransition) дає змогу позначити зміну стану як неблокувальну, дозволяючи іншим оновленням її переривати.
107
+
- [`useDeferredValue`](/reference/react/useDeferredValue) дає змогу відкласти оновлення неважливої частини інтерфейсу, щоб інші частини могли оновитися раніше.
106
108
107
109
---
108
110
109
-
## Other Hooks {/*other-hooks*/}
111
+
## Інші хуки {/*other-hooks*/}
112
+
113
+
Ці хуки здебільшого корисні авторам бібліотек й рідко використовуються у звичайному коді застосунків.
110
114
111
-
These Hooks are mostly useful to library authors and aren't commonly used in the application code.
115
+
- [`useDebugValue`](/reference/react/useDebugValue) дає змогу кастомізувати мітку, яку React DevTools показує для вашого кастомного хука.
116
+
- [`useId`](/reference/react/useId) дає компоненту змогу прив’язати до себе унікальний ідентифікатор. Зазвичай використовується з API доступності.
117
+
- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) дозволяє компоненту підписатися на зовнішнє сховище.
118
+
- [`useActionState`](/reference/react/useActionState) дає змогу керувати станом дій.
112
119
113
-
- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook.
114
-
- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs.
115
-
- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store.
116
-
* [`useActionState`](/reference/react/useActionState) allows you to manage state of actions.
117
120
118
121
---
119
122
120
-
## Your own Hooks {/*your-own-hooks*/}
123
+
## Власні хуки {/*your-own-hooks*/}
121
124
122
-
You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions.
125
+
Ви також можете [створювати власні кастомні хуки](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) як звичайні функції JavaScript.
0 commit comments