`useHydrated()`

Environment: client, server

vike-react/vike-vue/vike-solid

You need vike-react/vike-vue/vike-solid to be able to use the useHydrated() component hook. 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.

React
Vue
Solid

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

<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>

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

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.

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:

useHydrated()

Without vike-{react,vue,solid}

See also

`useHydrated()`

Without `vike-{react,vue,solid}`