@ -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:
@ -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.
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)