From 801008e276812a6f94f2f5dc634bcbfe01d23026 Mon Sep 17 00:00:00 2001 From: Axel Navarro Date: Mon, 13 Dec 2021 07:38:50 -0300 Subject: [PATCH] docs(hooks): add a notice about useState alternative --- .changeset/little-dodos-happen.md | 5 +++++ packages/hooks/src/use-const.ts | 7 +++++-- 2 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 .changeset/little-dodos-happen.md diff --git a/.changeset/little-dodos-happen.md b/.changeset/little-dodos-happen.md new file mode 100644 index 00000000000..4754f2cd30f --- /dev/null +++ b/.changeset/little-dodos-happen.md @@ -0,0 +1,5 @@ +--- +"@chakra-ui/hooks": patch +--- + +Add a comment about useState alternative diff --git a/packages/hooks/src/use-const.ts b/packages/hooks/src/use-const.ts index 6fee93f2a25..7b3b1ccd4b8 100644 --- a/packages/hooks/src/use-const.ts +++ b/packages/hooks/src/use-const.ts @@ -4,10 +4,13 @@ import { useRef } from "react" * Creates a constant value over the lifecycle of a component. * * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer - * a guarantee that it won't re-run for performance reasons later on. By using `useConstant` - * you can ensure that initialisers don't execute twice or more. + * a guarantee that it won't re-run for performance reasons later on. By using `useConst` + * you can ensure that initializers don't execute twice or more. */ export function useConst any)>(init: T) { + // Use useRef to store the value because it's the least expensive built-in + // hook that works here. We could also use `useState` but that's more + // expensive internally due to reducer handling which we don't need. const ref = useRef(null) if (ref.current === null) {