feat: add useShallow #2090

FaberVitale · 2023-09-30T13:21:00Z

Summary

Adds a useShallow hook to prevent unnecessary re-renders when a selector outputs the same value according to shallow equal.

Basic usage

import { create } from 'zustand'
import { useShallow } from 'zustand/shallow'

const useMyStore = create(() => ({ a: 1, b: 2, c: 3 }))

export const TestShallow = () => {
  const output = useMyStore(useShallow(Object.keys))

  return <div>{output.join(',')}</div>
}

See tests in shallow.test.tsx for more details.

Related Issues or Discussions

RFC: deprecate `equalityFn` towards v5 (migration path exists) #1937
RFC: deprecate `equalityFn` towards v5 (migration path exists) #1937 (reply in thread)
RFC: deprecate `equalityFn` towards v5 (migration path exists) #1937 (reply in thread)

Check List

yarn run prettier for formatting code and docs

See - pmndrs#1937 - pmndrs#1937 (reply in thread) - pmndrs#1937 (reply in thread)

vercel · 2023-09-30T13:21:04Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
zustand-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 2, 2023 1:09pm

codesandbox-ci · 2023-09-30T13:21:26Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 886bf51:

Sandbox	Source
React	Configuration
React TypeScript	Configuration
React Browserify	Configuration
React Snowpack	Configuration
React Parcel	Configuration
Next.js	Configuration
@pavlobu/zustand demo	Configuration

dai-shi · 2023-09-30T13:36:40Z

src/shallow.ts

+        ? (prev.current as U)
+        : (prev.current = next)
+    },
+    [selector]


I don't think we need useMemo nor useCallback for this, because Zustand doesn't require stable selector.

Do you prefer useRef? I think we should use useMemo like #1937 (reply in thread) , because React may prohibit updating ref during render in the future (L73 is usually not allowed).

Version 1 of #1937 (reply in thread) requires useCallback to use inline selectors.

Version 2 of #1937 (reply in thread) works but we open the door to potential stale closure issues.

If there are no better alternatives version 2 is better.

Are there less cumbersome alternatives?

I wish we could use useEvent or something similar during the render phase :/

Oops, that's my bad. I forgot about it. Let's use useRef then.

I think you can remove useMemo from your implementation.

It's not necessary because the caller of useShallow can always wrap the selector with useCallabck.

We never need useCallback, it doesn't improve anything.

dai-shi · 2023-09-30T13:39:32Z

Basic usage

create returns a hook. So, let's do this.

import { create } from 'zustand'
import { useShallow } from 'zustand/shallow'

const useMyStore = create(() => ({ a: 1, b: 2, c: 3 }))

export const TestShallow = () => {
  const output = useMyStore(useShallow(Object.keys))

  return <div>{output.join(',')}</div>
}

Maybe, useShallow((state) => Ojbect.keys(state)) might be easier to read even though it can be less efficient.

dai-shi · 2023-09-30T14:11:20Z

src/shallow.ts

+export function useShallow<S, U>(selector: (state: S) => U): (state: S) => U {
+  const prev = useRef<U>()
+
+  return (state) => {
+    const next = selector(state)
+    return shallow(prev.current, next)
+      ? (prev.current as U)
+      : (prev.current = next)
+  }
+}


The code looks good to me.

FaberVitale · 2023-09-30T14:13:27Z

@dai-shi do you know why renderHook is not defined here?

It's rather odd.

I can implement those tests without renderHook if needed.

dai-shi · 2023-09-30T14:24:49Z

Why useShallow does not have a dependency array?

I don't think we need that section.

We need to update docs too. Would you like to work on this PR, or should it be a separate PR?

dai-shi · 2023-09-30T14:27:02Z

do you know why renderHook is not defined

I think it's because in the production mode.

I can implement those tests without renderHook if needed.

Yeah, that should be the way to go.

…I-MATRIX-NOSKIP)

FaberVitale · 2023-09-30T14:48:23Z

Why useShallow does not have a dependency array?

I don't think we need that section.

We need to update docs too. Would you like to work on this PR, or should it be a separate PR?

I'll open another PR tomorrow.

Thanks

EDIT:

see #2090 (comment)

FaberVitale · 2023-10-01T09:00:23Z

Added guide in 9526d87.

Let me know if it's ok.

Thanks

dai-shi · 2023-10-01T09:08:23Z

Added guide in 9526d87.

Let me know if it's ok.

Thanks

The content looks good. But, what's required in #1937 discussion, I think, is that
we should show the use of useShallow everywhere in the docs instead of using createWithEqualityFn and shallow. What do you think?

FaberVitale · 2023-10-01T09:14:52Z

It's only mentioned in the readme (## Selecting multiple state slices), it seems:

I'll update it

…actions/runs/6369420511/job/17289749161?pr=2090

dai-shi

Thanks for working on docs too!
Below are some comments.

dai-shi · 2023-10-01T11:25:39Z

readme.md

@@ -86,36 +86,31 @@ const honey = useBearStore((state) => state.honey)

 If you want to construct a single object with multiple state-picks inside, similar to redux's mapStateToProps, you can tell zustand that you want the object to be diffed shallowly by passing the `shallow` equality function.


Needs to revise this line too?

readme.md

Co-authored-by: Daishi Kato <[email protected]>

dai-shi

Thanks so much for your contribution!

related: pmndrs/zustand#2090

* feat: add useShallow See - pmndrs/zustand#1937 - pmndrs/zustand#1937 (reply in thread) - pmndrs/zustand#1937 (reply in thread) * chore(useShallow): improve unit tests * chore(useShallow): PR feedback pmndrs/zustand#2090 (comment) * fix(useShallow): tests not working on test_matrix (cjs, production, CI-MATRIX-NOSKIP) * chore(useShallow): fix eslint warning issue (unused import) * refactor(useShallow): simplify tests * docs(useShallow): add guide * fix(useShallow): prettier:ci error https://github.com/pmndrs/zustand/actions/runs/6369420511/job/17289749161?pr=2090 * docs(useShallow): update readme * docs(useShallow): remove obsolete line from readme Co-authored-by: Daishi Kato <[email protected]> * doc(useShallow): PR feedback pmndrs/zustand#2090 (comment) * docs(useShallow): small improvements of the useShallow guide --------- Co-authored-by: Daishi Kato <[email protected]>

feat: add useShallow

2a62f17

See - pmndrs#1937 - pmndrs#1937 (reply in thread) - pmndrs#1937 (reply in thread)

vercel bot deployed to Preview September 30, 2023 13:21 View deployment

chore(useShallow): improve unit tests

51ef6fc

vercel bot deployed to Preview September 30, 2023 13:29 View deployment

dai-shi reviewed Sep 30, 2023

View reviewed changes

chore(useShallow): PR feedback pmndrs#2090 (comment)

1f1a2ae

vercel bot deployed to Preview September 30, 2023 14:07 View deployment

dai-shi reviewed Sep 30, 2023

View reviewed changes

fix(useShallow): tests not working on test_matrix (cjs, production, C…

f4fa7d4

…I-MATRIX-NOSKIP)

vercel bot deployed to Preview September 30, 2023 14:51 View deployment

FaberVitale added 2 commits October 1, 2023 10:08

chore(useShallow): fix eslint warning issue (unused import)

96c7c17

refactor(useShallow): simplify tests

dabaa09

vercel bot deployed to Preview October 1, 2023 08:13 View deployment

docs(useShallow): add guide

9526d87

vercel bot deployed to Preview October 1, 2023 08:59 View deployment

FaberVitale added 2 commits October 1, 2023 11:29

fix(useShallow): prettier:ci error https://github.com/pmndrs/zustand/…

ac28c31

…actions/runs/6369420511/job/17289749161?pr=2090

docs(useShallow): update readme

7160527

vercel bot deployed to Preview October 1, 2023 09:35 View deployment

dai-shi reviewed Oct 1, 2023

View reviewed changes

docs(useShallow): remove obsolete line from readme

323291c

Co-authored-by: Daishi Kato <[email protected]>

vercel bot deployed to Preview October 1, 2023 16:45 View deployment

FaberVitale added 2 commits October 1, 2023 18:56

doc(useShallow): PR feedback pmndrs#2090 (comment)

6ae26e5

docs(useShallow): small improvements of the useShallow guide

05aca18

vercel bot deployed to Preview October 1, 2023 16:57 View deployment

dai-shi approved these changes Oct 2, 2023

View reviewed changes

dai-shi added this to the v4.4.2 milestone Oct 2, 2023

Merge branch 'main' into feat/add-use-shallow

886bf51

vercel bot deployed to Preview October 2, 2023 13:09 View deployment

dai-shi merged commit 3cbd468 into pmndrs:main Oct 2, 2023
33 checks passed

dai-shi mentioned this pull request Oct 4, 2023

Support for custom equality function dai-shi/use-context-selector#19

Closed

rexerwang pushed a commit to rexerwang/min-kit that referenced this pull request Dec 28, 2023

feat(store)!: export zustanduseShallow instead of shallow

66e65ae

related: pmndrs/zustand#2090

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add useShallow #2090

feat: add useShallow #2090

FaberVitale commented Sep 30, 2023 •

edited

Loading

vercel bot commented Sep 30, 2023 •

edited

Loading

codesandbox-ci bot commented Sep 30, 2023 •

edited

Loading

dai-shi Sep 30, 2023

FaberVitale Sep 30, 2023 •

edited

Loading

dai-shi Sep 30, 2023

dai-shi Sep 30, 2023

dai-shi commented Sep 30, 2023

dai-shi Sep 30, 2023

FaberVitale commented Sep 30, 2023

dai-shi commented Sep 30, 2023

dai-shi commented Sep 30, 2023

FaberVitale commented Sep 30, 2023 •

edited

Loading

FaberVitale commented Oct 1, 2023

dai-shi commented Oct 1, 2023

FaberVitale commented Oct 1, 2023

dai-shi left a comment

dai-shi Oct 1, 2023

dai-shi left a comment

		@@ -86,36 +86,31 @@ const honey = useBearStore((state) => state.honey)

		If you want to construct a single object with multiple state-picks inside, similar to redux's mapStateToProps, you can tell zustand that you want the object to be diffed shallowly by passing the `shallow` equality function.

feat: add useShallow #2090

feat: add useShallow #2090

Conversation

FaberVitale commented Sep 30, 2023 • edited Loading

Summary

Basic usage

Related Issues or Discussions

Check List

vercel bot commented Sep 30, 2023 • edited Loading

codesandbox-ci bot commented Sep 30, 2023 • edited Loading

dai-shi Sep 30, 2023

Choose a reason for hiding this comment

FaberVitale Sep 30, 2023 • edited Loading

Choose a reason for hiding this comment

dai-shi Sep 30, 2023

Choose a reason for hiding this comment

dai-shi Sep 30, 2023

Choose a reason for hiding this comment

dai-shi commented Sep 30, 2023

dai-shi Sep 30, 2023

Choose a reason for hiding this comment

FaberVitale commented Sep 30, 2023

dai-shi commented Sep 30, 2023

dai-shi commented Sep 30, 2023

FaberVitale commented Sep 30, 2023 • edited Loading

FaberVitale commented Oct 1, 2023

dai-shi commented Oct 1, 2023

FaberVitale commented Oct 1, 2023

dai-shi left a comment

Choose a reason for hiding this comment

dai-shi Oct 1, 2023

Choose a reason for hiding this comment

dai-shi left a comment

Choose a reason for hiding this comment

FaberVitale commented Sep 30, 2023 •

edited

Loading

vercel bot commented Sep 30, 2023 •

edited

Loading

codesandbox-ci bot commented Sep 30, 2023 •

edited

Loading

FaberVitale Sep 30, 2023 •

edited

Loading

FaberVitale commented Sep 30, 2023 •

edited

Loading