useConst
useConst is a custom hook used to initialize and return a constant value.
Unlike useMemo, this will always return the same value, and if the
initializer is a function, only call it once.
Import
import { useConst } from '@hover/blueprint'
Parameters
The hook useConst accepts the initial value, or a function to get the initial value.
Usage
function Example() { const mountTime = useConst(() => new Date().toTimeString()) const obj = useConst({ a: Math.random() }) return ( <> <p>Mount time: {mountTime}</p> <p>Value from constant object: {obj.a}</p> </> )}
Why not use useMemo?
The React documentation says that the engine may choose to “forget” some
previously memoized values and recalculate them on next render, and you should
write your code so that it still works without useMemo and then add it to
optimize performance.
You should use useMemo only when you need to recalculate the value based on
dependencies.
Why not use useState?
function Example() { const [value] = useState(new Date().toTimeString()) return ( <p>Mount time: {value}</p> )}
This will work as a constant, but this is semantically wrong and it's expensive due to reducer handling which we don't need.