缩写

检查客户端是否已被水化 。 这个钩子只告诉你水合状态 一旦客户端水分化 就不会引发新的渲染 为了检查,你会把它和 (单位:千美元) useEffect 以触发新的渲染.

检查 故事书 演示.

安装

yarn add @charlietango/use-client-hydrated

API 密码

const output = useClientHydrated()

示例

import React, { useEffect, useState } from 'react'
import useClientHydrated from '@charlietango/use-client-hydrated'

const Component = () => {
  const hydrated = useClientHydrated()

  // Set the initial ready state based on hydrated. Will be `false` first time the component is rendered, but true after hydration.
  const [ready, setReady] = useState(hydrated)

  useEffect(() => {
    // We have been hydrated correctly now
    setReady(true)
  }, [])

  return <div>{ready ? 'Hydrated' : 'Hydrating'}</div>
}

export default Component