Browse Source

Tweak the experimental notice

main
Dan Abramov 3 years ago
parent
commit
4ff4d8fd11
  1. 6
      beta/src/content/learn/escape-hatches.md
  2. 4
      beta/src/content/learn/removing-effect-dependencies.md
  3. 4
      beta/src/content/learn/reusing-logic-with-custom-hooks.md
  4. 12
      beta/src/content/learn/separating-events-from-effects.md

6
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*/} ## 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. 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: 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:

4
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*/} ### Do you want to read a value without "reacting" to its changes? {/*do-you-want-to-read-a-value-without-reacting-to-its-changes*/}
<Gotcha> <Wip>
This section describes an **experimental API that has not yet been added to React,** so you can't use it yet. This section describes an **experimental API that has not yet been added to React,** so you can't use it yet.
</Gotcha> </Wip>
Suppose that you want to play a sound when the user receives a new message unless `isMuted` is `true`: Suppose that you want to play a sound when the user receives a new message unless `isMuted` is `true`:

4
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*/} ### 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. 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: 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:

12
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*/} ### Declaring an Event function {/*declaring-an-event-function*/}
<Gotcha> <Wip>
This section describes an **experimental API that has not yet been added to React,** so you can't use it yet. This section describes an **experimental API that has not yet been added to React,** so you can't use it yet.
</Gotcha> </Wip>
Use a special Hook called [`useEvent`](/apis/react/useEvent) to extract this non-reactive logic out of your Effect: 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*/} ### Reading latest props and state with Event functions {/*reading-latest-props-and-state-with-event-functions*/}
<Gotcha> <Wip>
This section describes an **experimental API that has not yet been added to React,** so you can't use it yet. This section describes an **experimental API that has not yet been added to React,** so you can't use it yet.
</Gotcha> </Wip>
Event functions let you fix many patterns where you might be tempted to suppress the dependency linter. 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*/} ### Limitations of Event functions {/*limitations-of-event-functions*/}
<Gotcha> <Wip>
This section describes an **experimental API that has not yet been added to React,** so you can't use it yet. This section describes an **experimental API that has not yet been added to React,** so you can't use it yet.
</Gotcha> </Wip>
At the moment, Event functions are very limited in how you can use them: At the moment, Event functions are very limited in how you can use them:

Loading…
Cancel
Save