Browse Source

[Beta] useTransition API (#5311)

* [Beta] useTransition API

* rewrite

* bump example

* fix

* clarify
main
dan 2 years ago
committed by GitHub
parent
commit
e162995194
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      beta/src/content/apis/react/index.md
  2. 2
      beta/src/content/apis/react/useDeferredValue.md
  3. 2
      beta/src/content/apis/react/useState.md
  4. 1620
      beta/src/content/apis/react/useTransition.md
  5. 3
      beta/src/sidebarAPIs.json

4
beta/src/content/apis/react/index.md

@ -111,11 +111,11 @@ function TodoList({ todos, tab, theme }) {
[See the `useMemo` page for more examples.](/apis/react/useMemo)
Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating urgent updates that must be synchronous (like typing into an input) from non-urgent updates which don't need to block the user interface (like updating a chart).
Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart).
To prioritize rendering, use one of these Hooks:
- [`useTransition`](/apis/react/useTransition) lets you mark a state transition as non-urgent and allow other updates to interrupt it.
- [`useTransition`](/apis/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it.
- [`useDeferredValue`](/apis/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first.
---

2
beta/src/content/apis/react/useDeferredValue.md

@ -953,7 +953,7 @@ During the initial render, the returned deferred value will be the same as the v
- `useDeferredValue` does not by itself prevent extra network requests.
- There is no fixed delay caused by `useDeferredValue` itself. As soon as there are no urgent updates to handle, React will immediately start working on the background re-render with the new deferred value. However, any updates caused by events (like typing) will interrupt the background re-render and get prioritized over it.
- There is no fixed delay caused by `useDeferredValue` itself. As soon as React finishes the original re-render, React will immediately start working on the background re-render with the new deferred value. However, any updates caused by events (like typing) will interrupt the background re-render and get prioritized over it.
- The background re-render caused by `useDeferredValue` does not fire Effects until it's committed to the screen. If the background re-render suspends, its Effects will run after the data loads and the UI updates.

2
beta/src/content/apis/react/useState.md

@ -31,7 +31,7 @@ function MyComponent() {
// ...
```
The convention is to name state variables like `[something, setSomething]` using [array destructuring.](https://javascript.info/destructuring-assignment)
The convention is to name state variables like `[something, setSomething]` using [array destructuring.](https://javascript.info/destructuring-assignment)
`useState` returns an array with exactly two items:

1620
beta/src/content/apis/react/useTransition.md

File diff suppressed because it is too large

3
beta/src/sidebarAPIs.json

@ -72,8 +72,7 @@
},
{
"title": "useTransition",
"path": "/apis/react/useTransition",
"wip": true
"path": "/apis/react/useTransition"
}
]
},

Loading…
Cancel
Save