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
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,13 +32,13 @@ function ChatRoom({ roomId, theme }) {
32
32
}
33
33
```
34
34
35
-
Effect Events are a part of your Effect logic, but they behave more like an event handler. They always “see” the latest values of your props and state without re-synchronizing your Effect, so they're excluded from Effect dependencies. See [Separating Events from Effects](/learn/separating-events-from-effects#extracting-non-reactive-logic-out-of-effects) to learn more.
35
+
Effect Events are a part of your Effect logic, but they behave more like an event handler. They always “see” the latest values from render (like props and state) without re-synchronizing your Effect, so they're excluded from Effect dependencies. See [Separating Events from Effects](/learn/separating-events-from-effects#extracting-non-reactive-logic-out-of-effects) to learn more.
36
36
37
37
[See more examples below.](#usage)
38
38
39
39
#### Parameters {/*parameters*/}
40
40
41
-
*`callback`: A function containing the logic for your Effect Event. The function can accept any number of arguments and return any value. When you call the returned Effect Event function, the `callback` always accesses the latest values from props and state at the time of the call.
41
+
*`callback`: A function containing the logic for your Effect Event. The function can accept any number of arguments and return any value. When you call the returned Effect Event function, the `callback` always accesses the latest committed values from render at the time of the call.
42
42
43
43
#### Returns {/*returns*/}
44
44
@@ -134,9 +134,9 @@ See [Separating Events from Effects](/learn/separating-events-from-effects) to l
134
134
135
135
### Using a timer with latest values {/*using-a-timer-with-latest-values*/}
136
136
137
-
When you use `setInterval` or `setTimeout` in an Effect, you often want to read the latest state values without restarting the timer whenever those values change.
137
+
When you use `setInterval` or `setTimeout` in an Effect, you often want to read the latest values from render without restarting the timer whenever those values change.
138
138
139
-
This counter increments by the current `increment` value every second. The `onTick` Effect Event reads the latest `increment` without causing the interval to restart:
139
+
This counter increments `count`by the current `increment` value every second. The `onTick` Effect Event reads the latest`count` and`increment` without causing the interval to restart:
140
140
141
141
<Sandpack>
142
142
@@ -148,7 +148,7 @@ export default function Timer() {
148
148
const [increment, setIncrement] =useState(1);
149
149
150
150
constonTick=useEffectEvent(() => {
151
-
setCount(c=> c+ increment);
151
+
setCount(count+ increment);
152
152
});
153
153
154
154
useEffect(() => {
@@ -192,9 +192,9 @@ Try changing the increment value while the timer is running. The counter immedia
192
192
193
193
---
194
194
195
-
### Using an event listener with latest state {/*using-an-event-listener-with-latest-state*/}
195
+
### Using an event listener with latest values {/*using-an-event-listener-with-latest-values*/}
196
196
197
-
When you set up an event listener in an Effect, you often need to read the latest state in the callback. Without `useEffectEvent`, you would need to include the state in your dependencies, causing the listener to be removed and re-added on every change.
197
+
When you set up an event listener in an Effect, you often need to read the latest values from render in the callback. Without `useEffectEvent`, you would need to include the values in your dependencies, causing the listener to be removed and re-added on every change.
198
198
199
199
This example shows a dot that follows the cursor, but only when "Can move" is checked. The `onMove` Effect Event always reads the latest `canMove` value without re-running the Effect:
0 commit comments