kliping.pro
  • Docs
  • Explore
  • Builder
  • Directory
  • Colors
  • Typeset
Saved
Hooks
  • Getting Started2
  • State7
  • Advanced6
  • Lifecycle16
  • useDebounceEffect
  • useDebounceFn
  • useDeepCompareEffect
  • useDeepCompareLayoutEffect
  • useEffectEvent
  • useEffectWithTarget
  • useInterval
  • useIsHydrated
  • useIsomorphicLayoutEffect
  • useMount
  • useThrottleEffect
  • useThrottleFn
  • useTimeout
  • useUnmount
  • useUpdate
  • useUpdateEffect
  • Browser21
  • Development1
  • Third-Party4
  • Libraries4
  1. Hooks
  2. Lifecycle
  3. useIsomorphicLayoutEffect

useIsomorphicLayoutEffect

PreviousNext

Efek yang aman saat dirender di server. Di Vue tidak ada yang perlu dipilih.

Tidak ada yang perlu dipasang.

Vue sudah menyediakan padanannya — onMounted(). Halaman ini menjelaskan cara memakainya.

onMounted tidak pernah berjalan di server, jadi tidak ada dua jalur yang harus dipilih:

ts
onMounted(() => {
  width.value = window.innerWidth   // aman
})

Yang perlu diperhatikan justru hasil gambarnya, bukan efeknya: nilai yang cuma bisa diketahui di peramban harus punya nilai awal yang sama di server dan pada gambaran pertama, kalau tidak Vue akan membuang bagian itu lalu menggambarnya ulang.

ts
const width = ref<number | null>(null)   // null di server, null di gambar pertama

Untuk keperluan yang benar-benar harus berjalan sebelum peramban menggambar, ada flush: 'sync' — tapi jarang benar-benar dibutuhkan:

ts
watch(source, updatePosition, { flush: 'sync' })
PrevioususeIsHydratedNext useMount

© 2026 Kliping. Free components are open source under the MIT License.

LicenseCreditsRoadmap