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/useEffectEvent.md
+19-20Lines changed: 19 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ version: canary
14
14
15
15
<Intro>
16
16
17
-
`useEffectEvent`is a React Hook that lets you extract non-reactive logic from your Effects into a reusable function called an [Effect Event](/learn/separating-events-from-effects#declaring-an-effect-event).
Call`useEffectEvent`at the top level of your component to declare an Effect Event. Effect Events are functions you can call inside Effects, such as `useEffect`:
@@ -51,33 +51,33 @@ function ChatRoom({ roomId, theme }) {
51
51
}
52
52
```
53
53
54
-
[See more examples below.](#usage)
54
+
[在下方查看更多示例](#usage)
55
55
56
-
#### Parameters {/*parameters*/}
56
+
#### 参数 {/*parameters*/}
57
57
58
-
-`callback`: A function containing the logic for your Effect Event. When you define an Effect Event with `useEffectEvent`, the `callback`always accesses the latest values from props and state when it is invoked. This helps avoid issues with stale closures.
-**Only call inside Effects:**Effect Events should only be called within Effects. Define them just before the Effect that uses them. Do not pass them to other components or hooks.
67
-
-**Not a dependency shortcut:** Do not use `useEffectEvent`to avoid specifying dependencies in your Effect's dependency array. This can hide bugs and make your code harder to understand. Prefer explicit dependencies or use refs to compare previous values if needed.
68
-
-**Use for non-reactive logic:** Only use `useEffectEvent`to extract logic that does not depend on changing values.
### Reading the latest props and state {/*reading-the-latest-props-and-state*/}
74
+
### 读取最新的 props 和 state {/*reading-the-latest-props-and-state*/}
75
75
76
-
Typically, when you access a reactive value inside an Effect, you must include it in the dependency array. This makes sure your Effect runs again whenever that value changes, which is usually the desired behavior.
To [read the latest props or state](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events) in your Effect, without making those values reactive, include them in an Effect Event.
You can pass reactive values like `url` as arguments to the Effect Event. This lets you access the latest values without making your Effect re-run for every change.
0 commit comments