@ -312,6 +312,12 @@ Read **[Lifecycle of Reactive Events](/learn/lifecycle-of-reactive-effects)** to
## Separating events from Effects {/*separating-events-from-effects*/}
<Wip>
This section describes an **experimental API that has not yet been added to React,** so you can't use it yet.
</Wip>
Event handlers only re-run when you perform the same interaction again. Unlike event handlers, Effects re-synchronize if some value they read, like a prop or a state variable, is different from what it was on last render. Sometimes, you want a mix of both behaviors: an Effect that re-runs in response to some values but not others.
All code inside Effects is *reactive.* It will run again if some reactive value it reads has changed due to a re-render. For example, this Effect will re-connect to the chat if either `roomId` or `theme` have changed after interaction:
@ -837,11 +837,11 @@ Every time your `ChatRoom` component re-renders, it passes the latest `roomId` a
### Passing event handlers to custom Hooks {/*passing-event-handlers-to-custom-hooks*/}
<Gotcha>
<Wip>
This section describes an **experimental API that has not yet been added to React,** so you can't use it yet.
</Gotcha>
</Wip>
As you start using `useChatRoom` in more components, you might want to let different components customize its behavior. For example, currently, the logic for what to do when a message arrives is hardcoded inside the Hook: