Browse Source

[Beta] Update links (#5023)

main
zqran 2 years ago
committed by GitHub
parent
commit
efb44ded1c
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      beta/src/content/learn/reusing-logic-with-custom-hooks.md
  2. 2
      beta/src/content/learn/separating-events-from-effects.md
  3. 4
      beta/src/content/learn/synchronizing-with-effects.md
  4. 2
      beta/src/content/learn/you-might-not-need-an-effect.md

2
beta/src/content/learn/reusing-logic-with-custom-hooks.md

@ -104,7 +104,7 @@ These two components work fine, but the duplication in logic between them is unf
### Extracting your own custom Hook from a component {/*extracting-your-own-custom-hook-from-a-component*/} ### Extracting your own custom Hook from a component {/*extracting-your-own-custom-hook-from-a-component*/}
Imagine for a moment that, similar to [`useState`](/apis/react/useState) and [`useEffect`](/apis/useEffect), there was a built-in `useOnlineStatus` Hook. Then both of these components could be simplified and you could remove the duplication between them: Imagine for a moment that, similar to [`useState`](/apis/react/useState) and [`useEffect`](/apis/react/useEffect), there was a built-in `useOnlineStatus` Hook. Then both of these components could be simplified and you could remove the duplication between them:
```js {2,7} ```js {2,7}
function StatusBar() { function StatusBar() {

2
beta/src/content/learn/separating-events-from-effects.md

@ -406,7 +406,7 @@ This section describes an **experimental API that has not yet been added to Reac
</Gotcha> </Gotcha>
Use a special Hook called [`useEvent`](/apis/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:
```js {1,4-6} ```js {1,4-6}
import { useEffect, useEvent } from 'react'; import { useEffect, useEvent } from 'react';

4
beta/src/content/learn/synchronizing-with-effects.md

@ -53,7 +53,7 @@ Let's look at each of these steps in detail.
### Step 1: Declare an Effect {/*step-1-declare-an-effect*/} ### Step 1: Declare an Effect {/*step-1-declare-an-effect*/}
To declare an Effect in your component, import the [`useEffect` Hook](/api/useeffect) from React: To declare an Effect in your component, import the [`useEffect` Hook](/apis/react/useEffect) from React:
```js ```js
import { useEffect } from 'react'; import { useEffect } from 'react';
@ -1365,7 +1365,7 @@ body {
<Solution> <Solution>
When [Strict Mode](/apis/StrictMode) is on (like in the sandboxes on this site), React remounts each component once in development. This causes the interval to be set up twice, and this is why each second the counter increments twice. When [Strict Mode](/apis/react/StrictMode) is on (like in the sandboxes on this site), React remounts each component once in development. This causes the interval to be set up twice, and this is why each second the counter increments twice.
However, React's behavior is not the *cause* of the bug: the bug already exists in the code. React's behavior makes the bug more noticeable. The real cause is that this Effect starts a process but doesn't provide a way to clean it up. However, React's behavior is not the *cause* of the bug: the bug already exists in the code. React's behavior makes the bug more noticeable. The real cause is that this Effect starts a process but doesn't provide a way to clean it up.

2
beta/src/content/learn/you-might-not-need-an-effect.md

@ -683,7 +683,7 @@ function ChatIndicator() {
} }
``` ```
This approach is less error-prone than manually syncing mutable data to React state with an Effect. Typically, you'll write a custom Hook like `useOnlineStatus()` above so that you don't need to repeat this code in the individual components. [Read more about subscribing to external stores from React components.](/apis/usesyncexternalstore) This approach is less error-prone than manually syncing mutable data to React state with an Effect. Typically, you'll write a custom Hook like `useOnlineStatus()` above so that you don't need to repeat this code in the individual components. [Read more about subscribing to external stores from React components.](/apis/react/useSyncExternalStore)
### Fetching data {/*fetching-data*/} ### Fetching data {/*fetching-data*/}

Loading…
Cancel
Save