Skip to content

Commit 3871efa

Browse files
committed
Feedback
1 parent 13e5c04 commit 3871efa

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

src/content/reference/react/useEffectEvent.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,13 @@ function ChatRoom({ roomId, theme }) {
3232
}
3333
```
3434

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.
3636

3737
[See more examples below.](#usage)
3838

3939
#### Parameters {/*parameters*/}
4040

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.
4242

4343
#### Returns {/*returns*/}
4444

@@ -134,9 +134,9 @@ See [Separating Events from Effects](/learn/separating-events-from-effects) to l
134134

135135
### Using a timer with latest values {/*using-a-timer-with-latest-values*/}
136136

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.
138138

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:
140140

141141
<Sandpack>
142142

@@ -148,7 +148,7 @@ export default function Timer() {
148148
const [increment, setIncrement] = useState(1);
149149

150150
const onTick = useEffectEvent(() => {
151-
setCount(c => c + increment);
151+
setCount(count + increment);
152152
});
153153

154154
useEffect(() => {
@@ -192,9 +192,9 @@ Try changing the increment value while the timer is running. The counter immedia
192192

193193
---
194194

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*/}
196196

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.
198198

199199
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:
200200

0 commit comments

Comments
 (0)