diff --git a/beta/src/pages/blog/2020/02/26/react-v16.13.0.md b/beta/src/pages/blog/2020/02/26/react-v16.13.0.md index 17bdf0dd..6aaad78d 100644 --- a/beta/src/pages/blog/2020/02/26/react-v16.13.0.md +++ b/beta/src/pages/blog/2020/02/26/react-v16.13.0.md @@ -36,7 +36,7 @@ When dynamically applying a `style` that contains longhand and shorthand version ``` -You might expect this `
` to always have a red background, no matter the value of `toggle`. However, on alternating the value of `toggle` between `true` and `false`, the background color start as `red`, then alternates between `transparent` and `blue`, [as you can see in this demo](https://codesandbox.io/s/suspicious-sunset-g3jub). +You might expect this `
` to always have a red background, no matter the value of `toggle`. However, on alternating the value of `toggle` between `true` and `false`, the background color start as `red`, then alternates between `transparent` and `blue`, [as you can see in this demo](https://codesandbox.io/s/blue-water-ghx8mi). **React now detects conflicting style rules and logs a warning.** To fix the issue, don't mix shorthand and longhand versions of the same CSS property in the `style` prop. diff --git a/content/blog/2020-02-26-react-v16.13.0.md b/content/blog/2020-02-26-react-v16.13.0.md index 4fb53404..3a170095 100644 --- a/content/blog/2020-02-26-react-v16.13.0.md +++ b/content/blog/2020-02-26-react-v16.13.0.md @@ -34,7 +34,7 @@ When dynamically applying a `style` that contains longhand and shorthand version
``` -You might expect this `
` to always have a red background, no matter the value of `toggle`. However, on alternating the value of `toggle` between `true` and `false`, the background color start as `red`, then alternates between `transparent` and `blue`, [as you can see in this demo](https://codesandbox.io/s/suspicious-sunset-g3jub). +You might expect this `
` to always have a red background, no matter the value of `toggle`. However, on alternating the value of `toggle` between `true` and `false`, the background color start as `red`, then alternates between `transparent` and `blue`, [as you can see in this demo](https://codesandbox.io/s/serene-dijkstra-dr0vev). **React now detects conflicting style rules and logs a warning.** To fix the issue, don't mix shorthand and longhand versions of the same CSS property in the `style` prop. diff --git a/content/docs/concurrent-mode-patterns.md b/content/docs/concurrent-mode-patterns.md index ac5e2917..8370b5ec 100644 --- a/content/docs/concurrent-mode-patterns.md +++ b/content/docs/concurrent-mode-patterns.md @@ -52,7 +52,7 @@ For example, if we switch from one page to another, and none of the code or data ## Transitions {#transitions} -Let's revisit [this demo](https://codesandbox.io/s/infallible-feather-xjtbu) from the previous page about [Suspense for Data Fetching](/docs/concurrent-mode-suspense.html). +Let's revisit [this demo](https://codesandbox.io/s/sparkling-field-41z4r3) from the previous page about [Suspense for Data Fetching](/docs/concurrent-mode-suspense.html). When we click the "Next" button to switch the active profile, the existing page data immediately disappears, and we see the loading indicator for the whole page again. We can call this an "undesirable" loading state. **It would be nice if we could "skip" it and wait for some content to load before transitioning to the new screen.** @@ -120,15 +120,15 @@ Our "Next" button click handler sets the state that switches the current profile > ``` -**[Try it on CodeSandbox](https://codesandbox.io/s/musing-driscoll-6nkie)** +**[Try it on CodeSandbox](https://codesandbox.io/s/vigilant-feynman-kpjy8w)** Press "Next" a few times. Notice it already feels very different. **Instead of immediately seeing an empty screen on click, we now keep seeing the previous page for a while.** When the data has loaded, React transitions us to the new screen. -If we make our API responses take 5 seconds, [we can confirm](https://codesandbox.io/s/relaxed-greider-suewh) that now React "gives up" and transitions anyway to the next screen after 3 seconds. This is because we passed `{timeoutMs: 3000}` to `useTransition()`. For example, if we passed `{timeoutMs: 60000}` instead, it would wait a whole minute. +If we make our API responses take 5 seconds, [we can confirm](https://codesandbox.io/s/heuristic-leftpad-9hit59) that now React "gives up" and transitions anyway to the next screen after 3 seconds. This is because we passed `{timeoutMs: 3000}` to `useTransition()`. For example, if we passed `{timeoutMs: 60000}` instead, it would wait a whole minute. ### Adding a Pending Indicator {#adding-a-pending-indicator} -There's still something that feels broken about [our last example](https://codesandbox.io/s/musing-driscoll-6nkie). Sure, it's nice not to see a "bad" loading state. **But having no indication of progress at all feels even worse!** When we click "Next", nothing happens and it feels like the app is broken. +There's still something that feels broken about [our last example](https://codesandbox.io/s/vigilant-feynman-kpjy8w). Sure, it's nice not to see a "bad" loading state. **But having no indication of progress at all feels even worse!** When we click "Next", nothing happens and it feels like the app is broken. Our `useTransition()` call returns two values: `startTransition` and `isPending`. @@ -158,13 +158,13 @@ return ( ); ``` -**[Try it on CodeSandbox](https://codesandbox.io/s/jovial-lalande-26yep)** +**[Try it on CodeSandbox](https://codesandbox.io/s/frosty-haslett-ds0h9h)** Now, this feels a lot better! When we click Next, it gets disabled because clicking it multiple times doesn't make sense. And the new "Loading..." tells the user that the app didn't freeze. ### Reviewing the Changes {#reviewing-the-changes} -Let's take another look at all the changes we've made since the [original example](https://codesandbox.io/s/infallible-feather-xjtbu): +Let's take another look at all the changes we've made since the [original example](https://codesandbox.io/s/nice-shadow-zvosx0): ```js{3-5,9,11,14,19} function App() { @@ -192,7 +192,7 @@ function App() { } ``` -**[Try it on CodeSandbox](https://codesandbox.io/s/jovial-lalande-26yep)** +**[Try it on CodeSandbox](https://codesandbox.io/s/frosty-haslett-ds0h9h)** It took us only seven lines of code to add this transition: @@ -213,7 +213,7 @@ Clearly, both "versions" of `` exist at the same time. We know the This gets at the root of what Concurrent Mode is. We've [previously said](/docs/concurrent-mode-intro.html#intentional-loading-sequences) it's a bit like React working on state update on a "branch". Another way we can conceptualize is that wrapping a state update in `startTransition` begins rendering it *"in a different universe"*, much like in science fiction movies. We don't "see" that universe directly -- but we can get a signal from it that tells us something is happening (`isPending`). When the update is ready, our "universes" merge back together, and we see the result on the screen! -Play a bit more with the [demo](https://codesandbox.io/s/jovial-lalande-26yep), and try to imagine it happening. +Play a bit more with the [demo](https://codesandbox.io/s/frosty-haslett-ds0h9h), and try to imagine it happening. Of course, two versions of the tree rendering *at the same time* is an illusion, just like the idea that all programs run on your computer at the same time is an illusion. An operating system switches between different applications very fast. Similarly, React can switch between the version of the tree you see on the screen and the version that it's "preparing" to show next. @@ -251,11 +251,11 @@ function ProfilePage() { } ``` -**[Try it on CodeSandbox](https://codesandbox.io/s/boring-shadow-100tf)** +**[Try it on CodeSandbox](https://codesandbox.io/s/trusting-brown-6hj0m0)** In this example, we start data fetching at the load *and* every time you press "Refresh". We put the result of calling `fetchUserAndPosts()` into state so that components below can start reading the new data from the request we just kicked off. -We can see in [this example](https://codesandbox.io/s/boring-shadow-100tf) that pressing "Refresh" works. The `` and `` components receive a new `resource` prop that represents the fresh data, they "suspend" because we don't have a response yet, and we see the fallbacks. When the response loads, we can see the updated posts (our fake API adds them every 3 seconds). +We can see in [this example](https://codesandbox.io/s/trusting-brown-6hj0m0) that pressing "Refresh" works. The `` and `` components receive a new `resource` prop that represents the fresh data, they "suspend" because we don't have a response yet, and we see the fallbacks. When the response loads, we can see the updated posts (our fake API adds them every 3 seconds). However, the experience feels really jarring. We were browsing a page, but it got replaced by a loading state right as we were interacting with it. It's disorienting. **Just like before, to avoid showing an undesirable loading state, we can wrap the state update in a transition:** @@ -290,7 +290,7 @@ function ProfilePage() { } ``` -**[Try it on CodeSandbox](https://codesandbox.io/s/sleepy-field-mohzb)** +**[Try it on CodeSandbox](https://codesandbox.io/s/zealous-mccarthy-fiiwu2)** This feels a lot better! Clicking "Refresh" doesn't pull us away from the page we're browsing anymore. We see something is loading "inline", and when the data is ready, it's displayed. @@ -330,7 +330,7 @@ function Button({ children, onClick }) { } ``` -**[Try it on CodeSandbox](https://codesandbox.io/s/modest-ritchie-iufrh)** +**[Try it on CodeSandbox](https://codesandbox.io/s/heuristic-cerf-8bo4rk)** Note that the button doesn't care *what* state we're updating. It's wrapping *any* state updates that happen during its `onClick` handler into a transition. Now that our `