Edit

useHydrated()

Environment: client, server

Provided by: vike-react/vike-vue/vike-solid

You need vike-react/vike-vue/vike-solid to be able to use useHydrated(). If you don't use vike-{react,vue,solid} then see Without vike-{react,vue,solid}.

The useHydrated() hook returns whether the page has already been hydrated.

On the server, it always returns false. On the client, it returns false on first render and true after hydration completes.

Common use case: disable interactive elements until hydration completes.

The difference with pageContext.isClientSide && !pageContext.isHydration (which returns the same value) is that useHydrated() triggers a re-render after the component hydrates.

React

import { useHydrated } from 'vike-react/useHydrated'
 
function SomeComponent() {
  const hydrated = useHydrated()
  return (
    <button type="button" disabled={!hydrated} onClick={doSomething}>
      Click me
    </button>
  )
}

Vue

<template>
  <button type="button" :disabled="!hydrated" @click="doSomething">Click me</button>
</template>
 
<script setup>
import { useHydrated } from 'vike-vue/useHydrated'
const hydrated = useHydrated()
</script>

<template>
  <button type="button" :disabled="!hydrated" @click="doSomething">
    Click me
  </button>
</template>
 
<script setup lang="ts">
import { useHydrated } from 'vike-vue/useHydrated'
const hydrated = useHydrated()
</script>

Solid

import { useHydrated } from 'vike-solid/useHydrated'
 
function SomeComponent() {
  const hydrated = useHydrated()
  return (
    <button type="button" disabled={!hydrated()} onClick={doSomething}>
      Click me
    </button>
  )
}

Without vike-{react,vue,solid}

If you don't use a UI framework Vike extension vike-react/vike-vue/vike-solid, you can implement useHydrated() yourself.

See the source code:

• GitHub > vikejs/vike-react
• GitHub > vikejs/vike-vue
• GitHub > vikejs/vike-solid

See also

• API > <ClientOnly>
• API > +ssr