|
1 | | -import { Link } from '@brillout/docpress' |
| 1 | +import { Link, Warning } from '@brillout/docpress' |
2 | 2 | import { UiFrameworkExtension, ProvidedBy, ConfigSpec } from '../../components' |
3 | 3 |
|
4 | 4 | <ConfigSpec |
@@ -41,25 +41,27 @@ Props: |
41 | 41 | - **fallback**: Content shown while the component is being loaded. |
42 | 42 | - All other props are passed to the loaded component. |
43 | 43 |
|
44 | | -> **Don't call `clientOnly()` inside a component** — always call it at your module's top level. (Otherwise the component's state isn't preserved.) |
45 | | -> ```tsx |
46 | | -> function SomeWrapper() { |
47 | | -> // ❌ Bad: Don't call inside components |
48 | | -> const SomeComponent = clientOnly(() => import('./SomeComponent.tsx')) |
49 | | -> return <SomeComponent /> |
50 | | -> } |
51 | | -> ``` |
52 | | -> ```tsx |
53 | | -> // ✅ Good: Called at the module's top level |
54 | | -> const SomeComponent = clientOnly(() => import('./SomeComponent.tsx')) |
55 | | -> function SomeWrapper() { |
56 | | -> return <SomeComponent /> |
57 | | -> } |
58 | | -> ``` |
59 | | -> |
60 | | -> See also: |
61 | | -> - [React > APIs > lazy > My `lazy` component’s state gets reset unexpectedly](https://react.dev/reference/react/lazy#my-lazy-components-state-gets-reset-unexpectedly) |
62 | | -> - [#2928 — `clientOnly` fallback resets component state when hydrated](https://github.com/vikejs/vike/issues/2928) |
| 44 | +<Warning> |
| 45 | + **Don't call `clientOnly()` inside a component** — always call it at your module's top level. (Otherwise the component's state isn't preserved.) |
| 46 | + ```tsx |
| 47 | + function SomeWrapper() { |
| 48 | + // ❌ Bad: Don't call inside components |
| 49 | + const SomeComponent = clientOnly(() => import('./SomeComponent.tsx')) |
| 50 | + return <SomeComponent /> |
| 51 | + } |
| 52 | + ``` |
| 53 | + ```tsx |
| 54 | + // ✅ Good: Called at the module's top level |
| 55 | + const SomeComponent = clientOnly(() => import('./SomeComponent.tsx')) |
| 56 | + function SomeWrapper() { |
| 57 | + return <SomeComponent /> |
| 58 | + } |
| 59 | + ``` |
| 60 | + |
| 61 | + See also: |
| 62 | + - [React > APIs > lazy > My `lazy` component’s state gets reset unexpectedly](https://react.dev/reference/react/lazy#my-lazy-components-state-gets-reset-unexpectedly) |
| 63 | + - [#2928 — `clientOnly` fallback resets component state when hydrated](https://github.com/vikejs/vike/issues/2928) |
| 64 | +</Warning> |
63 | 65 |
|
64 | 66 |
|
65 | 67 | ## Solid |
|
0 commit comments