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 '@chakra-ui/react'

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.