Skip to content

Feat(example): Add with-zustand example #17835

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 4 commits into from
Nov 10, 2020
Merged

Feat(example): Add with-zustand example #17835

merged 4 commits into from
Nov 10, 2020

Conversation

callumbooth
Copy link
Contributor

Helps with pmndrs/zustand#182

I have seen the comments from this PR #11222 (review) and this PR matches the with-redux example.

@ijjk ijjk added the examples Issue was opened via the examples template. label Oct 13, 2020
@callumbooth callumbooth mentioned this pull request Oct 13, 2020
Closed
@ijjk
Copy link
Member

ijjk commented Oct 13, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
buildDuration 14.5s 14.2s -280ms
nodeModulesSize 63.4 MB 63.4 MB ✓
Page Load Tests Overall increase ✓
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.541 2.515 -0.03
/ avg req/sec 984.01 993.94 +9.93
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.48 1.47 -0.01
/error-in-render avg req/sec 1689.07 1700.94 +11.87
Client Bundles (main, webpack, commons)
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
677f882d2ed8..133b.js gzip 11.1 kB 11.1 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-2540b2f..aa10.js gzip 7.22 kB 7.22 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58 kB 58 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
677f882d2ed8..dule.js gzip 6.9 kB 6.9 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-0d1e0b8..dule.js gzip 6.28 kB 6.28 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 52.9 kB 52.9 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-409b283..e3ab.js gzip 1.32 kB 1.32 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.73 kB 7.73 kB ✓
Client Pages Modern
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-92d3016..dule.js gzip 1.28 kB 1.28 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.37 kB 5.37 kB ✓
Client Build Manifests
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_buildManifest.js gzip 323 B 323 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 652 B 652 B ✓
Rendered Page Sizes
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
index.html gzip 1 kB 1 kB ✓
link.html gzip 1.01 kB 1.01 kB ✓
withRouter.html gzip 996 B 996 B ✓
Overall change 3.01 kB 3.01 kB ✓
Serverless Mode
General
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
buildDuration 15.9s 15.9s -31ms
nodeModulesSize 63.4 MB 63.4 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
677f882d2ed8..133b.js gzip 11.1 kB 11.1 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-2540b2f..aa10.js gzip 7.22 kB 7.22 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58 kB 58 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
677f882d2ed8..dule.js gzip 6.9 kB 6.9 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-0d1e0b8..dule.js gzip 6.28 kB 6.28 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 52.9 kB 52.9 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-409b283..e3ab.js gzip 1.32 kB 1.32 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.73 kB 7.73 kB ✓
Client Pages Modern
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-92d3016..dule.js gzip 1.28 kB 1.28 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.37 kB 5.37 kB ✓
Client Build Manifests
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_buildManifest.js gzip 323 B 323 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 652 B 652 B ✓
Serverless bundles
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_error.js 1.05 MB 1.05 MB ✓
404.html 4.34 kB 4.34 kB ✓
hooks.html 3.92 kB 3.92 kB ✓
index.js 1.05 MB 1.05 MB ✓
link.js 1.1 MB 1.1 MB ✓
routerDirect.js 1.09 MB 1.09 MB ✓
withRouter.js 1.09 MB 1.09 MB ✓
Overall change 5.41 MB 5.41 MB ✓
Commit: 004876c

@callumbooth
Copy link
Contributor Author

Hi, I seem to having some issue getting zustand working with nextjs (likely an issue on the zustand side not nextjs) but if there is any assistance that can be provided it would be very appreciated.

I have created a code sandbox based on the code from this sandbox. It works when navigating between different pages but getting a bug where navigating to the same page causes the page component to have a reference to an old store. https://codesandbox.io/s/vanilla-store-example-vim2c?file=/pages/ssg.js

@vercel vercel bot temporarily deployed to Preview November 10, 2020 22:13 Inactive
@vercel vercel bot temporarily deployed to Preview November 10, 2020 22:31 Inactive
@lfades
Copy link
Member

lfades commented Nov 10, 2020

@callumbooth I'm unsure of what might be happening on that sandbox as I cannot reproduce that issue locally by cloning the additional page you have in that sandbox into the example app. It might be the sandbox itself or something else in the files there that differs from this example.

lfades
lfades approved these changes Nov 10, 2020
View reviewed changes
Copy link
Member

@lfades lfades left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@callumbooth This example looks very good to me. Tested locally and it works as expected. Thank you! 👏

@ijjk
Copy link
Member

ijjk commented Nov 10, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
buildDuration 14.3s 13.9s -400ms
nodeModulesSize 85 MB 85 MB ✓
Page Load Tests Overall decrease ⚠️
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.558 2.653 ⚠️ +0.1
/ avg req/sec 977.42 942.46 ⚠️ -34.96
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.451 1.514 ⚠️ +0.06
/error-in-render avg req/sec 1723.53 1650.8 ⚠️ -72.73
Client Bundles (main, webpack, commons)
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
677f882d2ed8..7d3b.js gzip 11.3 kB 11.3 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-673683e..14c7.js gzip 7.48 kB 7.48 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58.5 kB 58.5 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
677f882d2ed8..dule.js gzip 7.04 kB 7.04 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-0c7333c..dule.js gzip 6.47 kB 6.47 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 53.2 kB 53.2 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB ✓
_error-fca3d..2eb1.js gzip 3.44 kB 3.44 kB ✓
hooks-d4591d..e7c2.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-8a9d104..0e42.js gzip 1.55 kB 1.55 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.96 kB 7.96 kB ✓
Client Pages Modern
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-d1cfb87..dule.js gzip 1.49 kB 1.49 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.59 kB 5.59 kB ✓
Client Build Manifests
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 330 B 330 B ✓
Overall change 652 B 652 B ✓
Rendered Page Sizes
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
index.html gzip 970 B 970 B ✓
link.html gzip 978 B 978 B ✓
withRouter.html gzip 964 B 964 B ✓
Overall change 2.91 kB 2.91 kB ✓
Serverless Mode
General
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
buildDuration 15.4s 15.4s ⚠️ +33ms
nodeModulesSize 85 MB 85 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
677f882d2ed8..7d3b.js gzip 11.3 kB 11.3 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-673683e..14c7.js gzip 7.48 kB 7.48 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58.5 kB 58.5 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
677f882d2ed8..dule.js gzip 7.04 kB 7.04 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-0c7333c..dule.js gzip 6.47 kB 6.47 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 53.2 kB 53.2 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB ✓
_error-fca3d..2eb1.js gzip 3.44 kB 3.44 kB ✓
hooks-d4591d..e7c2.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-8a9d104..0e42.js gzip 1.55 kB 1.55 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.96 kB 7.96 kB ✓
Client Pages Modern
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-d1cfb87..dule.js gzip 1.49 kB 1.49 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.59 kB 5.59 kB ✓
Client Build Manifests
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 330 B 330 B ✓
Overall change 652 B 652 B ✓
Serverless bundles
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_error.js 915 kB 915 kB ✓
404.html 4.61 kB 4.61 kB ✓
hooks.html 3.86 kB 3.86 kB ✓
index.js 916 kB 916 kB ✓
link.js 965 kB 965 kB ✓
routerDirect.js 957 kB 957 kB ✓
withRouter.js 957 kB 957 kB ✓
Overall change 4.72 MB 4.72 MB ✓
Commit: 756911e

@ijjk
Copy link
Member

ijjk commented Nov 10, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
buildDuration 13.4s 13.2s -145ms
nodeModulesSize 85 MB 85 MB ✓
Page Load Tests Overall increase ✓
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.467 2.427 -0.04
/ avg req/sec 1013.57 1030.11 +16.54
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.338 1.245 -0.09
/error-in-render avg req/sec 1869.15 2007.84 +138.69
Client Bundles (main, webpack, commons)
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
677f882d2ed8..7d3b.js gzip 11.3 kB 11.3 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-673683e..14c7.js gzip 7.48 kB 7.48 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58.5 kB 58.5 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
677f882d2ed8..dule.js gzip 7.04 kB 7.04 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-0c7333c..dule.js gzip 6.47 kB 6.47 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 53.2 kB 53.2 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB ✓
_error-fca3d..2eb1.js gzip 3.44 kB 3.44 kB ✓
hooks-d4591d..e7c2.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-8a9d104..0e42.js gzip 1.55 kB 1.55 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.96 kB 7.96 kB ✓
Client Pages Modern
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-d1cfb87..dule.js gzip 1.49 kB 1.49 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.59 kB 5.59 kB ✓
Client Build Manifests
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 330 B 330 B ✓
Overall change 652 B 652 B ✓
Rendered Page Sizes
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
index.html gzip 970 B 970 B ✓
link.html gzip 978 B 978 B ✓
withRouter.html gzip 964 B 964 B ✓
Overall change 2.91 kB 2.91 kB ✓
Serverless Mode
General
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
buildDuration 14.8s 15.1s ⚠️ +338ms
nodeModulesSize 85 MB 85 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
677f882d2ed8..7d3b.js gzip 11.3 kB 11.3 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-673683e..14c7.js gzip 7.48 kB 7.48 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58.5 kB 58.5 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
677f882d2ed8..dule.js gzip 7.04 kB 7.04 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-0c7333c..dule.js gzip 6.47 kB 6.47 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 53.2 kB 53.2 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB ✓
_error-fca3d..2eb1.js gzip 3.44 kB 3.44 kB ✓
hooks-d4591d..e7c2.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-8a9d104..0e42.js gzip 1.55 kB 1.55 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.96 kB 7.96 kB ✓
Client Pages Modern
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-d1cfb87..dule.js gzip 1.49 kB 1.49 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.59 kB 5.59 kB ✓
Client Build Manifests
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 330 B 330 B ✓
Overall change 652 B 652 B ✓
Serverless bundles
vercel/next.js canary callumbooth/next.js add-with-zustand-example Change
_error.js 915 kB 915 kB ✓
404.html 4.61 kB 4.61 kB ✓
hooks.html 3.86 kB 3.86 kB ✓
index.js 916 kB 916 kB ✓
link.js 965 kB 965 kB ✓
routerDirect.js 957 kB 957 kB ✓
withRouter.js 957 kB 957 kB ✓
Overall change 4.72 MB 4.72 MB ✓
Commit: cd839b1

@kodiakhq kodiakhq bot merged commit f300eca into vercel:canary Nov 10, 2020
@vercel vercel locked as resolved and limited conversation to collaborators Jan 29, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@lfades lfades lfades approved these changes

@chibicode chibicode Awaiting requested review from chibicode

@ijjk ijjk Awaiting requested review from ijjk

@Timer Timer Awaiting requested review from Timer

@timneutkens timneutkens Awaiting requested review from timneutkens

Assignees
No one assigned
Labels
examples Issue was opened via the examples template.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@callumbooth @ijjk @lfades