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
*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.
*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.
To add state to a component, use one of these Hooks:
17
+
コンポーネントに state を追加するには、次のフックのいずれかを使います：
18
18
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)
19
+
*[`useState`](/reference/react/useState)は直接的に更新できる state 変数を定義します。
20
+
*[`useReducer`](/reference/react/useReducer)は、[リデューサ関数](/learn/extracting-state-logic-into-a-reducer)内に書いたロジックを用いて更新を行う state 変数を定義します。
21
21
22
22
```js
23
23
functionImageGallery() {
@@ -27,11 +27,11 @@ function ImageGallery() {
27
27
28
28
---
29
29
30
-
## Context Hooks {/*context-hooks*/}
30
+
## コンテクストフック {/*context-hooks*/}
31
31
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.
*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.
46
+
*ref* を用いると、コンポーネントは DOM ノードやタイムアウト ID などの、[レンダーに用いない情報を保持](/learn/referencing-values-with-refs)することができます。state と違い、ref の値を更新してもコンポーネントは再レンダーされません。ref は、React パラダイムからの「避難ハッチ」です。これらは組み込みのブラウザ API などの、React 外のシステムを取り扱うときに役立ちます。
47
47
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.
*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.
@@ -72,23 +72,23 @@ function ChatRoom({ roomId }) {
72
72
// ...
73
73
```
74
74
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)
* [`useInsertionEffect`](/reference/react/useInsertionEffect) は React が DOM に変更を加える前に発火します。ライブラリは動的な CSS をこのフックで挿入できます。
81
81
82
82
---
83
83
84
-
## Performance Hooks {/*performance-hooks*/}
84
+
## パフォーマンス関連フック {/*performance-hooks*/}
85
85
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.
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).
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.
0 commit comments