Browse Source

Tweak the experimental notice

main
Dan Abramov 2 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*/}
<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:

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

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*/}
<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>
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*/}
<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>
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*/}
<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>
At the moment, Event functions are very limited in how you can use them:

Loading…
Cancel
Save