From e7f2b465ddfd90eb00d0b9e2a6689e03cd3b71bb Mon Sep 17 00:00:00 2001 From: Yehyoung Kang Date: Wed, 22 Mar 2023 17:33:58 +0900 Subject: [PATCH] Don't recommend memoizing selectors As per the discussions below, memoizing selectors does not improve performance significantly as of v4. Thus we should avoid recommending selector memoization. Note that the same paragraph was removed from the README in PR #550 (https://github.com/pmndrs/zustand/pull/550) and this section may have been left behind as an oversight. - https://github.com/pmndrs/zustand/discussions/658 - https://github.com/pmndrs/zustand/discussions/971 --- docs/recipes/recipes.mdx | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/docs/recipes/recipes.mdx b/docs/recipes/recipes.mdx index b58d62eb77..ce12ef2eeb 100644 --- a/docs/recipes/recipes.mdx +++ b/docs/recipes/recipes.mdx @@ -65,29 +65,6 @@ const currentBear = useCredentialsStore((state) => state.currentBear) const bear = useBearStore((state) => state.bears[currentBear]) ``` -## Memoizing selectors - -It is generally recommended to memoize selectors with `useCallback`. -This will prevent unnecessary computations each render. -It also allows React to optimize performance in concurrent mode. - -```jsx -const fruit = useStore(useCallback((state) => state.fruits[id], [id])) -``` - -If a selector doesn't depend on scope, -you can define it outside the render function -to obtain a fixed reference without `useCallback`. - -```jsx -const selector = (state) => state.berries - -function Component() { - const berries = useStore(selector) - // ... -} -``` - ## Overwriting state The `set` function has a second argument, `false` by default.