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/useInsertionEffect.md
+33-33
Original file line number
Diff line number
Diff line change
@@ -4,13 +4,13 @@ title: useInsertionEffect
4
4
5
5
<Pitfall>
6
6
7
-
`useInsertionEffect`is for CSS-in-JS library authors. Unless you are working on a CSS-in-JS library and need a place to inject the styles, you probably want [`useEffect`](/reference/react/useEffect)or[`useLayoutEffect`](/reference/react/useLayoutEffect)instead.
* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. When your component is added to the DOM, but before any layout effects fire, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. When your component is removed from the DOM, React will run your cleanup function.
47
+
* `setup`: エフェクトのロジックが記述された関数です。このセットアップ関数は、オプションで*クリーンアップ*関数を返すことができます。コンポーネントが初めて DOM に追加された後、レイアウトエフェクトが発火する前に、React はセットアップ関数を実行します。依存配列 (dependencies) が変更された再レンダー時には、React はまず古い値を使ってクリーンアップ関数（あれば）を実行し、次に新しい値を使ってセットアップ関数を実行します。コンポーネントが DOM から削除された後、React はクリーンアップ関数を最後にもう一度実行します。
48
48
49
-
* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup`code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm. If you don't specify the dependencies at all, your Effect will re-run after every re-render of the component.
* Effects only run on the client. They don't run during server rendering.
58
-
* You can't update state from inside `useInsertionEffect`.
59
-
* By the time `useInsertionEffect`runs, refs are not attached yet.
60
-
* `useInsertionEffect`may run either before or after the DOM has been updated. You shouldn't rely on the DOM being updated at any particular time.
61
-
* Unlike other types of Effects, which fire cleanup for every Effect and then setup for every Effect, `useInsertionEffect`will fire both cleanup and setup one component at a time. This results in an "interleaving" of the cleanup and setup functions.
Traditionally, you would style React components using plain CSS.
68
+
従来、React コンポーネントのスタイル付けはプレーンな CSS を使用して行われていました。
69
69
70
70
```js
71
71
// In your JS file:
@@ -75,20 +75,20 @@ Traditionally, you would style React components using plain CSS.
75
75
.success { color: green; }
76
76
```
77
77
78
-
Some teams prefer to author styles directly in JavaScript code instead of writing CSS files. This usually requires using a CSS-in-JS library or a tool. There are three common approaches to CSS-in-JS:
If you use CSS-in-JS, we recommend a combination of the first two approaches (CSS files for static styles, inline styles for dynamic styles). **We don't recommend runtime `<style>`tag injection for two reasons:**
Similarly to `useEffect`, `useInsertionEffect`does not run on the server. If you need to collect which CSS rules have been used on the server, you can do it during rendering:
#### How is this better than injecting styles during rendering or useLayoutEffect? {/*how-is-this-better-than-injecting-styles-during-rendering-or-uselayouteffect*/}
If you insert styles during rendering and React is processing a [non-blocking update,](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) the browser will recalculate the styles every single frame while rendering a component tree, which can be **extremely slow.**
`useInsertionEffect`is better than inserting styles during [`useLayoutEffect`](/reference/react/useLayoutEffect) or [`useEffect`](/reference/react/useEffect) because it ensures that by the time other Effects run in your components, the `<style>`tags have already been inserted. Otherwise, layout calculations in regular Effects would be wrong due to outdated styles.
0 commit comments