diff --git a/beta/src/content/learn/escape-hatches.md b/beta/src/content/learn/escape-hatches.md index 981fbb53e..6ddeca40e 100644 --- a/beta/src/content/learn/escape-hatches.md +++ b/beta/src/content/learn/escape-hatches.md @@ -312,6 +312,12 @@ Read **[Lifecycle of Reactive Events](/learn/lifecycle-of-reactive-effects)** to ## Separating events from Effects {/*separating-events-from-effects*/} + + +This section describes an **experimental API that has not yet been added to React,** so you can't use it yet. + + + 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: diff --git a/beta/src/content/learn/removing-effect-dependencies.md b/beta/src/content/learn/removing-effect-dependencies.md index 78608c544..dbb70308f 100644 --- a/beta/src/content/learn/removing-effect-dependencies.md +++ b/beta/src/content/learn/removing-effect-dependencies.md @@ -605,11 +605,11 @@ function ChatRoom({ roomId }) { ### Do you want to read a value without "reacting" to its changes? {/*do-you-want-to-read-a-value-without-reacting-to-its-changes*/} - + This section describes an **experimental API that has not yet been added to React,** so you can't use it yet. - + Suppose that you want to play a sound when the user receives a new message unless `isMuted` is `true`: diff --git a/beta/src/content/learn/reusing-logic-with-custom-hooks.md b/beta/src/content/learn/reusing-logic-with-custom-hooks.md index 6cd432d0d..a2e4d5cd3 100644 --- a/beta/src/content/learn/reusing-logic-with-custom-hooks.md +++ b/beta/src/content/learn/reusing-logic-with-custom-hooks.md @@ -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*/} - + This section describes an **experimental API that has not yet been added to React,** so you can't use it yet. - + 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: diff --git a/beta/src/content/learn/separating-events-from-effects.md b/beta/src/content/learn/separating-events-from-effects.md index 46868115d..502d2e699 100644 --- a/beta/src/content/learn/separating-events-from-effects.md +++ b/beta/src/content/learn/separating-events-from-effects.md @@ -400,11 +400,11 @@ You need a way to separate this non-reactive logic from the reactive Effect arou ### Declaring an Event function {/*declaring-an-event-function*/} - + This section describes an **experimental API that has not yet been added to React,** so you can't use it yet. - + Use a special Hook called [`useEvent`](/apis/react/useEvent) to extract this non-reactive logic out of your Effect: @@ -597,11 +597,11 @@ You can think of Event functions as being very similar to event handlers. The ma ### Reading latest props and state with Event functions {/*reading-latest-props-and-state-with-event-functions*/} - + This section describes an **experimental API that has not yet been added to React,** so you can't use it yet. - + Event functions let you fix many patterns where you might be tempted to suppress the dependency linter. @@ -896,11 +896,11 @@ Read [Removing Effect Dependencies](/learn/removing-effect-dependencies) for oth ### Limitations of Event functions {/*limitations-of-event-functions*/} - + This section describes an **experimental API that has not yet been added to React,** so you can't use it yet. - + At the moment, Event functions are very limited in how you can use them: