28 lines
941 B
JavaScript
28 lines
941 B
JavaScript
import { useEffect, useRef, useState } from 'react'
|
|
|
|
/*
|
|
What we want is to use ssrData if it exists, until cache data changes
|
|
... this prevents item list jitter where the intially rendered items
|
|
are stale until the cache is rewritten with incoming ssrData
|
|
*/
|
|
export function useData (data, ssrData) {
|
|
// when fresh is true, it means data has been updated after the initial render and it's populated
|
|
const [fresh, setFresh] = useState(false)
|
|
|
|
// on first render, we want to use ssrData if it's available
|
|
// it's only unavailable on back/forward navigation
|
|
const ref = useRef(true)
|
|
const firstRender = ref.current
|
|
ref.current = false
|
|
|
|
useEffect(() => {
|
|
if (!firstRender && !fresh && data) setFresh(true)
|
|
}, [data])
|
|
|
|
// if we don't have data yet, use ssrData
|
|
// if we have data, but it's not fresh, use ssrData
|
|
// unless we don't have ssrData
|
|
if (!data || (!fresh && ssrData)) return ssrData
|
|
return data
|
|
}
|