From 38bee700fed59d777181046f57cd0df5d733d73f Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Mon, 18 Feb 2019 04:47:01 +0900 Subject: [PATCH 1/3] Translate hooks-reference --- content/docs/hooks-reference.md | 168 ++++++++++++++++---------------- 1 file changed, 84 insertions(+), 84 deletions(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index deeef54cf..b6cb090fe 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -6,17 +6,17 @@ prev: hooks-custom.html next: hooks-faq.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +*フック (hook)* は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。 -This page describes the APIs for the built-in Hooks in React. +このページでは React 組み込みのフックについて説明します。 -If you're new to Hooks, you might want to check out [the overview](/docs/hooks-overview.html) first. You may also find useful information in the [frequently asked questions](/docs/hooks-faq.html) section. +フックが初めての方は、先に[概要](/docs/hooks-overview.html)ページを確認してください。[よくある質問](/docs/hooks-faq.html)にも有用な情報が掲載されています。 -- [Basic Hooks](#basic-hooks) +- [基本のフック](#basic-hooks) - [`useState`](#usestate) - [`useEffect`](#useeffect) - [`useContext`](#usecontext) -- [Additional Hooks](#additional-hooks) +- [追加のフック](#additional-hooks) - [`useReducer`](#usereducer) - [`useCallback`](#usecallback) - [`useMemo`](#usememo) @@ -25,7 +25,7 @@ If you're new to Hooks, you might want to check out [the overview](/docs/hooks-o - [`useLayoutEffect`](#uselayouteffect) - [`useDebugValue`](#usedebugvalue) -## Basic Hooks {#basic-hooks} +## 基本のフック {#basic-hooks} ### `useState` {#usestate} @@ -33,21 +33,21 @@ If you're new to Hooks, you might want to check out [the overview](/docs/hooks-o const [state, setState] = useState(initialState); ``` -Returns a stateful value, and a function to update it. +ステートフルな値と、それを更新するための関数とを返します。 -During the initial render, the returned state (`state`) is the same as the value passed as the first argument (`initialState`). +初回のレンダー時に返される `state` は第 1 引数として渡された値 (`initialState`) と等しくなります。 -The `setState` function is used to update the state. It accepts a new state value and enqueues a re-render of the component. +`setState` 関数は state を更新するために使用します。新しい state の値を受け取り、コンポーネントの再レンダーをスケジューリングします。 ```js setState(newState); ``` -During subsequent re-renders, the first value returned by `useState` will always be the most recent state after applying updates. +後続の再レンダー時には、`useState` から返される 1 番目の値は常に、更新を適用した後の最新版の state になります。 -#### Functional updates {#functional-updates} +#### 関数型の更新 {#functional-updates} -If the new state is computed using the previous state, you can pass a function to `setState`. The function will receive the previous value, and return an updated value. Here's an example of a counter component that uses both forms of `setState`: +新しい state が前の state に基づいて計算される場合は、`setState` に関数を渡すことができます。この関数は前回の state の値を受け取り、更新された値を返します。以下は、`setState` の両方の形式を用いたカウンタコンポーネントの例です。 ```js function Counter({initialCount}) { @@ -63,11 +63,11 @@ function Counter({initialCount}) { } ``` -The "+" and "-" buttons use the functional form, because the updated value is based on the previous value. But the "Reset" button uses the normal form, because it always sets the count back to 0. +"+" と "-" のボタンは、更新後の値が更新前の値に基づいて計算されるため、関数形式を使っています。"Reset" ボタンは常にカウントを 0 に戻すので通常の形式を使っています。 -> Note +> 補足 > -> Unlike the `setState` method found in class components, `useState` does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax: +> クラスコンポーネントの `setState` メソッドとは異なり、`useState` は自動的な更新オブジェクトのマージを行いません。この動作は関数型の更新形式をスプレッド構文と併用することで再現可能です： > > ```js > setState(prevState => { @@ -76,11 +76,11 @@ The "+" and "-" buttons use the functional form, because the updated value is ba > }); > ``` > -> Another option is `useReducer`, which is more suited for managing state objects that contain multiple sub-values. +> 別の選択肢としては `useReducer` があり、これは複数階層の値を含んだ state オブジェクトを管理する場合にはより適しています。 -#### Lazy initial state {#lazy-initial-state} +#### state の遅延初期化 {#lazy-initial-state} -The `initialState` argument is the state used during the initial render. In subsequent renders, it is disregarded. If the initial state is the result of an expensive computation, you may provide a function instead, which will be executed only on the initial render: +`initialState` 引数は初回レンダー時に使われる state 値です。後続のレンダー時にはその値は無視されます。もし初期 state が高価な計算をして求める値である場合は、代わりに関数を渡すことができます。この関数は初回のレンダー時にのみ実行されます。 ```js const [state, setState] = useState(() => { @@ -89,9 +89,9 @@ const [state, setState] = useState(() => { }); ``` -#### Bailing out of a state update {#bailing-out-of-a-state-update} +#### state 更新の回避 {#bailing-out-of-a-state-update} -If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects. (React uses the [`Object.is` comparison algorithm](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) +現在値と同じ値で更新を行った場合、React は子のレンダーや副作用の実行を回避して処理を終了します。（React は [`Object.is` による比較アルゴリズム](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description) を使用します） ### `useEffect` {#useeffect} @@ -99,17 +99,17 @@ If you update a State Hook to the same value as the current state, React will ba useEffect(didUpdate); ``` -Accepts a function that contains imperative, possibly effectful code. +副作用を有する可能性のある命令型のコードを受け付けます。 -Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React's _render phase_). Doing so will lead to confusing bugs and inconsistencies in the UI. +DOM の書き換え、データの購読、タイマー、ロギング、あるいはその他の副作用を、関数コンポーネントの本体（React の*レンダーフェーズ*）で書くことはできません。それを行うと UI にまつわるややこしいバグや非整合性を引き起こします。 -Instead, use `useEffect`. The function passed to `useEffect` will run after the render is committed to the screen. Think of effects as an escape hatch from React's purely functional world into the imperative world. +代わりに `useEffect` を使ってください。`useEffect` に渡された関数はレンダーの結果が画面に反映された後に動作します。副作用とは React の純粋に関数的な世界から命令型の世界への避難ハッチであると考えてください。 -By default, effects run after every completed render, but you can choose to fire it [only when certain values have changed](#conditionally-firing-an-effect). +デフォルトでは副作用関数はレンダーが終了した後に毎回動作しますが、[特定の値が変化した時のみ](#conditionally-firing-an-effect)動作させるようにすることもできます。 -#### Cleaning up an effect {#cleaning-up-an-effect} +#### エフェクトのクリーンアップ {#cleaning-up-an-effect} -Often, effects create resources that need to be cleaned up before the component leaves the screen, such as a subscription or timer ID. To do this, the function passed to `useEffect` may return a clean-up function. For example, to create a subscription: +副作用はしばしば、コンポーネントが画面から消える場合にクリーンアップする必要があるようなリソース（例えば購読やタイマー ID など）を作成します。これを実現するために、`useEffect` に渡す関数はクリーンアップ用関数を返すことができます。例えば、データ購読を作成する場合は以下のようになります。 ```js useEffect(() => { @@ -121,23 +121,23 @@ useEffect(() => { }); ``` -The clean-up function runs before the component is removed from the UI to prevent memory leaks. Additionally, if a component renders multiple times (as they typically do), the **previous effect is cleaned up before executing the next effect**. In our example, this means a new subscription is created on every update. To avoid firing an effect on every update, refer to the next section. +メモリリークを防止するため、コンポーネントが UI から削除される前にクリーンアップ関数が呼び出されます。それに加えて、コンポーネントが複数回レンダーされる場合（大抵はそうですが）、**新しい副作用を実行する前に前回の副作用はクリーンアップされます**。この例では、更新が発生する度に新しい購読が作成される、ということです。毎回の更新で副作用が実行されるのを抑制するためには、後の節をご覧ください。 -#### Timing of effects {#timing-of-effects} +#### 副作用のタイミング {#timing-of-effects} -Unlike `componentDidMount` and `componentDidUpdate`, the function passed to `useEffect` fires **after** layout and paint, during a deferred event. This makes it suitable for the many common side effects, like setting up subscriptions and event handlers, because most types of work shouldn't block the browser from updating the screen. +`componentDidMount` や `componentDidUpdate` と異なり、`useEffect` に渡された関数はレイアウトと描画の**後で**遅延されたイベントとして実行されます。ほとんどの作業はブラウザによる画面への描画をブロックするべきではないため、購読やイベントハンドラのセットアップといったよくある副作用のほとんどにとって、この動作は適切です。 -However, not all effects can be deferred. For example, a DOM mutation that is visible to the user must fire synchronously before the next paint so that the user does not perceive a visual inconsistency. (The distinction is conceptually similar to passive versus active event listeners.) For these types of effects, React provides one additional Hook called [`useLayoutEffect`](#uselayouteffect). It has the same signature as `useEffect`, and only differs in when it is fired. +しかしすべての副作用が遅延できるわけではありません。例えばユーザに見えるような DOM の改変は、ユーザが見た目の不整合性を感じずに済むよう、次回の描画が発生する前に同期的に発生する必要があります（この違いは概念的には受動的なイベントリスナと能動的なイベントリスナの違いに似ています）。このようなタイプの副作用のため、React は [`useLayoutEffect`](#uselayouteffect) という別のフックを提供しています。これは `useEffect` と同じシグネチャを持っており、実行されるタイミングのみが異なります。 -Although `useEffect` is deferred until after the browser has painted, it's guaranteed to fire before any new renders. React will always flush a previous render's effects before starting a new update. +`useEffect` はブラウザが描画を終えるまで遅延されますが、次回のレンダーが起こるより前に実行されることは保証されています。React は新しい更新を始める前に常にひとつ前のレンダーの副作用をクリーンアップします。 -#### Conditionally firing an effect {#conditionally-firing-an-effect} +#### 条件付きで副作用を実行する {#conditionally-firing-an-effect} -The default behavior for effects is to fire the effect after every completed render. That way an effect is always recreated if one of its inputs changes. +デフォルトの動作では、副作用関数はレンダーの完了時に毎回実行されます。これにより、コンポーネントの入力のうちのひとつが変化した場合に毎回副作用が再作成されます。 -However, this may be overkill in some cases, like the subscription example from the previous section. We don't need to create a new subscription on every update, only if the `source` props has changed. +しかし、上述のデータ購読の例でもそうですが、これは幾つかのケースではやりすぎです。新しい購読を設定する必要があるのは毎回の更新ごとではなく、`source` プロパティが変化した場合のみです。 -To implement this, pass a second argument to `useEffect` that is the array of values that the effect depends on. Our updated example now looks like this: +これを実装するためには、`useEffect` の第 2 引数として、この副作用が依存している値の配列を渡します。変更後の例は以下のようになります。 ```js useEffect( @@ -151,13 +151,13 @@ useEffect( ); ``` -Now the subscription will only be recreated when `props.source` changes. +これで、データの購読は `props.source` が変更された場合にのみ再作成されるようになります。 -Passing in an empty array `[]` of inputs tells React that your effect doesn't depend on any values from the component, so that effect would run only on mount and clean up on unmount; it won't run on updates. +空の配列 `[]` を渡すと、この副作用がコンポーネント内のどの値にも依存していないということを React に伝えることになります。つまり副作用はマウント時に実行されアンマウント時にクリーンアップされますが、更新時には実行されないようになります。 -> Note +> 補足 > -> The array of inputs is not passed as arguments to the effect function. Conceptually, though, that's what they represent: every value referenced inside the effect function should also appear in the inputs array. In the future, a sufficiently advanced compiler could create this array automatically. +> 入力用配列は副作用関数に引数として渡されるわけではありません。しかし概念としては、この記法は副作用関数の引数が何なのかを表現しています。副作用関数の内部で参照されているすべての値は入力の配列内にも現れるべきです。将来的には、コンパイラが発達すればこの配列を自動で作成することも可能であるはずです。 ### `useContext` {#usecontext} @@ -165,13 +165,13 @@ Passing in an empty array `[]` of inputs tells React that your effect doesn't de const context = useContext(Context); ``` -Accepts a context object (the value returned from `React.createContext`) and returns the current context value, as given by the nearest context provider for the given context. +コンテキストオブジェクト（`React.createContext` からの戻り値）を受け取り、該当コンテキストに対応する最も近いコンテキストプロバイダから得られる、コンテキストの現在値を返します。 -When the provider updates, this Hook will trigger a rerender with the latest context value. +プロバイダが更新された場合、このフックは最新のコンテキストの値を使って再レンダーを発生させます。 -## Additional Hooks {#additional-hooks} +## 追加のフック {#additional-hooks} -The following Hooks are either variants of the basic ones from the previous section, or only needed for specific edge cases. Don't stress about learning them up front. +以下のフックは前節で説明した基本のフックの変種であったり、特定の稀なケースでのみ必要となったりするものです。最初から無理に学ぼうとしなくて構いません。 ### `useReducer` {#usereducer} @@ -179,11 +179,11 @@ The following Hooks are either variants of the basic ones from the previous sect const [state, dispatch] = useReducer(reducer, initialArg, init); ``` -An alternative to [`useState`](#usestate). Accepts a reducer of type `(state, action) => newState`, and returns the current state paired with a `dispatch` method. (If you're familiar with Redux, you already know how this works.) +[`useState`](#usestate) の代替品です。`(state, action) => newState` という型のリデューサ (reducer) を受け取り、現在の state を `dispatch` メソッドとペアにして返します。（もし Redux に馴染みがあれば、これがどう動作するのかはご存じでしょう） -`useReducer` is usually preferable to `useState` when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. `useReducer` also lets you optimize performance for components that trigger deep updates because [you can pass `dispatch` down instead of callbacks](/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down). +通常、`useReducer` が `useState` より好ましいのは、複数の値にまたがる複雑な state ロジックがある場合や、前の state に基づいて次の state を決める必要がある場合です。また、`useReducer` を使えば[コールバックの代わりに `dispatch` を下位コンポーネントに渡せる](/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down)ようになるため、複数階層にまたがって更新を発生させるようなコンポーネントではパフォーマンスの最適化にもなります。 -Here's the counter example from the [`useState`](#usestate) section, rewritten to use a reducer: +以下は [`useState`](#usestate) の部分で挙げたカウンタの例を、リデューサを使うよう書き換えたものです。 ```js const initialState = {count: 0}; @@ -211,9 +211,9 @@ function Counter({initialState}) { } ``` -#### Specifying the initial state {#specifying-the-initial-state} +#### 初期 state の指定 {#specifying-the-initial-state} -There’s two different ways to initialize `useReducer` state. You may choose either one depending on the use case. The simplest way to pass the initial state as a second argument: +`useReducer` の初期化の方法には 2 種類あります。ユースケースによりどちらかを選択してください。最も単純な方法は第 2 引数として初期 state を渡すものです。 ```js{3} const [state, dispatch] = useReducer( @@ -222,15 +222,15 @@ There’s two different ways to initialize `useReducer` state. You may choose ei ); ``` ->Note +> 補足 > ->React doesn’t use the `state = initialState` argument convention popularized by Redux. The initial value sometimes needs to depend on props and so is specified from the Hook call instead. If you feel strongly about this, you can call `useReducer(reducer, undefined, reducer)` to emulate the Redux behavior, but it's not encouraged. +> React では、redux で人気になった、リデューサの引数で初期値を示す `state = initialState` という慣習は使用しません。初期値は props に依存している可能性があるため、フックの呼び出し部分で指定します。強いこだわりがある場合は `useReducer(reducer, undefined, reducer)` という呼び出し方で Redux の振る舞いを再現できますが、お勧めはしません。 -#### Lazy initialization {#lazy-initialization} +#### 遅延初期化 {#lazy-initialization} -You can also create the initial state lazily. To do this, you can pass an `init` function as the third argument. The initial state will be set to `init(initialArg)`. +初期 state の作成を遅延させることもできます。そのためには `init` 関数を第 3 引数として渡してください。初期 state が `init(initialArg)` に設定されます。 -It lets you extract the logic for calculating the initial state outside the reducer. This is also handy for resetting the state later in response to an action: +これにより初期 state の計算をリデューサの外部に抽出することができます。これはアクションに応じて state をリセットしたい場合にも便利です。 ```js{1-3,11-12,19,24} function init(initialCount) { @@ -266,9 +266,9 @@ function Counter({initialCount}) { } ``` -#### Bailing out of a dispatch {#bailing-out-of-a-dispatch} +#### dispatch による更新の回避 {#bailing-out-of-a-dispatch} -If you return the same value from a Reducer Hook as the current state, React will bail out without rendering the children or firing effects. (React uses the [`Object.is` comparison algorithm](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) +state の現在値として同じ値を返した場合、React は子のレンダーや副作用の実行を回避して処理を終了します。（React は [`Object.is` による比較アルゴリズム](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description) を使用します） ### `useCallback` {#usecallback} @@ -281,15 +281,15 @@ const memoizedCallback = useCallback( ); ``` -Returns a [memoized](https://en.wikipedia.org/wiki/Memoization) callback. +[メモ化](https://en.wikipedia.org/wiki/Memoization)されたコールバックを返します。 -Pass an inline callback and an array of inputs. `useCallback` will return a memoized version of the callback that only changes if one of the inputs has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. `shouldComponentUpdate`). +インラインのコールバックとその入力の配列とを渡してください。`useCallback` はそのコールバックをメモ化したものを返し、その関数は入力値のひとつが変化した場合にのみ変化します。これは、不必要なレンダーを避けるために（例えば `shouldComponentUpdate` などを使って）参照の同一性を見るよう最適化されたコンポーネントにコールバックを渡す場合に便利です。 -`useCallback(fn, inputs)` is equivalent to `useMemo(() => fn, inputs)`. +`useCallback(fn, inputs)` は `useMemo(() => fn, inputs)` と等価です。 -> Note +> 補足 > -> The array of inputs is not passed as arguments to the callback. Conceptually, though, that's what they represent: every value referenced inside the callback should also appear in the inputs array. In the future, a sufficiently advanced compiler could create this array automatically. +> 入力用配列は副作用関数に引数として渡されるわけではありません。しかし概念としては、この記法は副作用関数の引数が何なのかを表現しています。副作用関数の内部で参照されているすべての値は入力の配列内にも現れるべきです。将来的には、コンパイラが発達すればこの配列を自動で作成することも可能であるはずです。 ### `useMemo` {#usememo} @@ -297,19 +297,19 @@ Pass an inline callback and an array of inputs. `useCallback` will return a memo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); ``` -Returns a [memoized](https://en.wikipedia.org/wiki/Memoization) value. +[メモ化](https://en.wikipedia.org/wiki/Memoization)された値を返します。 -Pass a "create" function and an array of inputs. `useMemo` will only recompute the memoized value when one of the inputs has changed. This optimization helps to avoid expensive calculations on every render. +"作成用" 関数とその入力の配列を渡してください。`useMemo` は入力値のひとつが変化した場合にのみメモ化された値を再計算します。この最適化によりレンダー毎に高価な計算が実行されるのを避けることができます。 -Remember that the function passed to `useMemo` runs during rendering. Don't do anything there that you wouldn't normally do while rendering. For example, side effects belong in `useEffect`, not `useMemo`. +`useMemo` に渡した関数はレンダー中に実行されるということを覚えておいてください。レンダー中に通常やらないようなことをこの関数内でやらないようにしましょう。例えば副作用は `useMemo` ではなく `useEffect` の仕事です。 -If no array is provided, a new value will be computed whenever a new function instance is passed as the first argument. (With an inline function, on every render.) +配列が渡されなかった場合は、第 1 引数に新しい関数が渡された場合に常に新しい値が計算されます。（第 1 引数がインラインの関数だった場合、毎レンダー毎に値が計算されます） -**You may rely on `useMemo` as a performance optimization, not as a semantic guarantee.** In the future, React may choose to "forget" some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without `useMemo` — and then add it to optimize performance. +**`useMemo` はパフォーマンス最適化のために使うものであり、意味上の保証があるものだと考えないでください。**将来的に React は、例えば画面外のコンポーネント用のメモリを解放するため、などの理由で、メモ化された値を「忘れる」ようにする可能性があります。`useMemo` なしでも動作するコードを書き、パフォーマンス最適化のために `useMemo` を加えるようにしましょう。 -> Note +> 補足 > -> The array of inputs is not passed as arguments to the function. Conceptually, though, that's what they represent: every value referenced inside the function should also appear in the inputs array. In the future, a sufficiently advanced compiler could create this array automatically. +> 入力用配列は副作用関数に引数として渡されるわけではありません。しかし概念としては、この記法は副作用関数の引数が何なのかを表現しています。副作用関数の内部で参照されているすべての値は入力の配列内にも現れるべきです。将来的には、コンパイラが発達すればこの配列を自動で作成することも可能であるはずです。 ### `useRef` {#useref} @@ -317,9 +317,9 @@ If no array is provided, a new value will be computed whenever a new function in const refContainer = useRef(initialValue); ``` -`useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. +`useRef` はミュータブルな ref オブジェクトを返し、`.current` プロパティは渡された引数 (`initialValue`) に初期化されています。返されるオブジェクトはコンポーネントの存在期間全体にわたって存在し続けます。 -A common use case is to access a child imperatively: +よくあるユースケースは、子コンポーネントに命令型でアクセスするというものです： ```js function TextInputWithFocusButton() { @@ -337,7 +337,7 @@ function TextInputWithFocusButton() { } ``` -Note that `useRef()` is useful for more than the `ref` attribute. It's [handy for keeping any mutable value around](/docs/hooks-faq.html#is-there-something-like-instance-variables) similar to how you'd use instance fields in classes. +`useRef()` は `ref` 属性で使うだけではなく、より便利に使えるということに注意してください。これはクラスでインスタンス変数を使うのと同様にして、[あらゆるミュータブルな値を保持しておく](/docs/hooks-faq.html#is-there-something-like-instance-variables)のに便利です。 ### `useImperativeHandle` {#useimperativehandle} @@ -345,7 +345,7 @@ Note that `useRef()` is useful for more than the `ref` attribute. It's [handy fo useImperativeHandle(ref, createHandle, [inputs]) ``` -`useImperativeHandle` customizes the instance value that is exposed to parent components when using `ref`. As always, imperative code using refs should be avoided in most cases. `useImperativeHandle` should be used with `forwardRef`: +`useImperativeHandle` は `ref` が使われた時に親コンポーネントに渡されるインスタンス値をカスタマイズするのに使います。いつもの話ですが、ref を使った手続き的なコードはほとんどの場合に避けるべきです。`useImperativeHandle` は `forwardRef` と組み合わせて使います： ```js function FancyInput(props, ref) { @@ -360,17 +360,17 @@ function FancyInput(props, ref) { FancyInput = forwardRef(FancyInput); ``` -In this example, a parent component that renders `` would be able to call `fancyInputRef.current.focus()`. +この例では、`` をレンダーする親コンポーネントは `fancyInputRef.current.focus()` を呼べるようになります。 ### `useLayoutEffect` {#uselayouteffect} -The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside `useLayoutEffect` will be flushed synchronously, before the browser has a chance to paint. +この関数のシグネチャは `useEffect` と同一ですが、DOM の変更があった後で同期的に副作用が呼び出されます。これは DOM からレイアウトを読み出して同期的に再描画を行う場合に使ってください。`useLayoutEffect` の内部でスケジュールされた更新はブラウザによって描画される前のタイミングで同期的に処理されます。 -Prefer the standard `useEffect` when possible to avoid blocking visual updates. +可能な場合は画面の更新がブロックするのを避けるため、標準の `useEffect` を優先して使ってください。 -> Tip +> ヒント > -> If you're migrating code from a class component, `useLayoutEffect` fires in the same phase as `componentDidMount` and `componentDidUpdate`, so if you're unsure of which effect Hook to use, it's probably the least risky. +> `useLayoutEffect` は `componentDidMount` や `componentDidUpdate` と同じフェーズで実行されますので、クラスコンポーネントから移行しておりどちらのフックを使えばいいか自信がない場合は、恐らくリスクが最も低くなります。 ### `useDebugValue` {#usedebugvalue} @@ -378,9 +378,9 @@ Prefer the standard `useEffect` when possible to avoid blocking visual updates. useDebugValue(value) ``` -`useDebugValue` can be used to display a label for custom hooks in React DevTools. +`useDebugValue` を使って React DevTools でカスタムフックのラベルを表示することができます。 -For example, consider the `useFriendStatus` custom Hook described in ["Building Your Own Hooks"](/docs/hooks-custom.html): +例えば ["独自フックの作成"](/docs/hooks-custom.html) で説明した `useFriendStatus` を例にします： ```js{6-8} function useFriendStatus(friendID) { @@ -396,17 +396,17 @@ function useFriendStatus(friendID) { } ``` -> Tip +> ヒント > -> We don't recommend adding debug values to every custom Hook. It's most valuable for custom Hooks that are part of shared libraries. +> すべてのカスタムフックにデバッグ用の値を加えるのはお勧めしません。これは最も有用なのは共有ライブラリ内のカスタムフックです。 -#### Defer formatting debug values {#defer-formatting-debug-values} +#### デバッグ用の値のフォーマットを遅延させる {#defer-formatting-debug-values} -In some cases formatting a value for display might be an expensive operation. It's also unnecessary unless a Hook is actually inspected. +値を表示用にフォーマットすることが高価な処理である場合があります。また、フックが実際に DevTools でインスペクトされない場合はフォーマット自体が不要な処理です。 -For this reason `useDebugValue` accepts a formatting function as an optional second parameter. This function is only called if the Hooks are inspected. It receives the debug value as a parameter and should return a formatted display value. +このため `useDebugValue` はオプションの第 2 引数としてフォーマット用関数を受け付けます。この関数はフックがインスペクトされている場合にのみ呼び出されます。この関数はデバッグ値を引数として受け取り、フォーマット済みの表示用の値を返します。 -For example a custom Hook that returned a `Date` value could avoid calling the `toDateString` function unnecessarily by passing the following formatter: +例えば `Date` 型の値を返すカスタムフックでは、以下のようなフォーマッタ関数を渡すことで、不必要に `toDateString` を呼び出すのを避けることができます。 ```js useDebugValue(date, date => date.toDateString()); From dde8fadb70ef476ec475e57e40ba7162418e081c Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Tue, 26 Feb 2019 12:10:16 +0900 Subject: [PATCH 2/3] Edit nav.yaml --- content/docs/nav.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 94c3a02ff..ae6e58f0b 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -120,7 +120,7 @@ - id: hooks-custom title: カスタムフックの作成 - id: hooks-reference - title: Hooks API Reference + title: フック API Reference - id: hooks-faq title: Hooks FAQ - title: Contributing From 44557c0456e9575bdd00fe3ab48fe47af7c10cd9 Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Mon, 4 Mar 2019 00:19:59 +0900 Subject: [PATCH 3/3] Apply suggestions from code review Co-Authored-By: smikitky --- content/docs/hooks-reference.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index b6cb090fe..e1d925c58 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -33,7 +33,7 @@ next: hooks-faq.html const [state, setState] = useState(initialState); ``` -ステートフルな値と、それを更新するための関数とを返します。 +ステートフルな値と、それを更新するための関数を返します。 初回のレンダー時に返される `state` は第 1 引数として渡された値 (`initialState`) と等しくなります。 @@ -283,13 +283,13 @@ const memoizedCallback = useCallback( [メモ化](https://en.wikipedia.org/wiki/Memoization)されたコールバックを返します。 -インラインのコールバックとその入力の配列とを渡してください。`useCallback` はそのコールバックをメモ化したものを返し、その関数は入力値のひとつが変化した場合にのみ変化します。これは、不必要なレンダーを避けるために（例えば `shouldComponentUpdate` などを使って）参照の同一性を見るよう最適化されたコンポーネントにコールバックを渡す場合に便利です。 +インラインのコールバックとその入力の配列を渡してください。`useCallback` はそのコールバックをメモ化したものを返し、その関数は入力値のひとつが変化した場合にのみ変化します。これは、不必要なレンダーを避けるために（例えば `shouldComponentUpdate` などを使って）参照の同一性を見るよう最適化されたコンポーネントにコールバックを渡す場合に便利です。 `useCallback(fn, inputs)` は `useMemo(() => fn, inputs)` と等価です。 > 補足 > -> 入力用配列は副作用関数に引数として渡されるわけではありません。しかし概念としては、この記法は副作用関数の引数が何なのかを表現しています。副作用関数の内部で参照されているすべての値は入力の配列内にも現れるべきです。将来的には、コンパイラが発達すればこの配列を自動で作成することも可能であるはずです。 +> 入力用配列はコールバックに引数として渡されるわけではありません。しかし概念としては、この記法はコールバックの引数が何なのかを表現しています。コールバックの内部で参照されているすべての値は入力の配列内にも現れるべきです。将来的には、コンパイラが発達すればこの配列を自動で作成することも可能であるはずです。 ### `useMemo` {#usememo} @@ -309,7 +309,7 @@ const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); > 補足 > -> 入力用配列は副作用関数に引数として渡されるわけではありません。しかし概念としては、この記法は副作用関数の引数が何なのかを表現しています。副作用関数の内部で参照されているすべての値は入力の配列内にも現れるべきです。将来的には、コンパイラが発達すればこの配列を自動で作成することも可能であるはずです。 +> 入力用配列は第 1 引数の関数に引数として渡されるわけではありません。しかし概念としては、この記法は関数の引数が何なのかを表現しています。関数の内部で参照されているすべての値は入力の配列内にも現れるべきです。将来的には、コンパイラが発達すればこの配列を自動で作成することも可能であるはずです。 ### `useRef` {#useref} @@ -398,7 +398,7 @@ function useFriendStatus(friendID) { > ヒント > -> すべてのカスタムフックにデバッグ用の値を加えるのはお勧めしません。これは最も有用なのは共有ライブラリ内のカスタムフックです。 +> すべてのカスタムフックにデバッグ用の値を加えるのはお勧めしません。これが最も有用なのは共有ライブラリ内のカスタムフックです。 #### デバッグ用の値のフォーマットを遅延させる {#defer-formatting-debug-values}