diff --git a/beta/src/content/learn/reusing-logic-with-custom-hooks.md b/beta/src/content/learn/reusing-logic-with-custom-hooks.md index 98b83a28b..37c01da84 100644 --- a/beta/src/content/learn/reusing-logic-with-custom-hooks.md +++ b/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*/} -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} function StatusBar() { diff --git a/beta/src/content/learn/separating-events-from-effects.md b/beta/src/content/learn/separating-events-from-effects.md index 19c130da8..ecc1d0770 100644 --- a/beta/src/content/learn/separating-events-from-effects.md +++ b/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 -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} import { useEffect, useEvent } from 'react'; diff --git a/beta/src/content/learn/synchronizing-with-effects.md b/beta/src/content/learn/synchronizing-with-effects.md index fabbdc747..3d7812998 100644 --- a/beta/src/content/learn/synchronizing-with-effects.md +++ b/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*/} -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 import { useEffect } from 'react'; @@ -1365,7 +1365,7 @@ body { -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. diff --git a/beta/src/content/learn/you-might-not-need-an-effect.md b/beta/src/content/learn/you-might-not-need-an-effect.md index 9d70c1f90..68c104978 100644 --- a/beta/src/content/learn/you-might-not-need-an-effect.md +++ b/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*/}