Memoize ThemeContext.Provider value #135
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Every time <Theme /> renders a new object is constructed and passed to ThemeContext.Provider. This guarantees that regardless of what inputs changed the Context will be propagated. This is particularly harmful when React is doing hydration because if an unhydrated Suspense boudnary exists in the sub-tree of the Provider it will fall back to client rendering regardless of whether the context is an actual dependency for that Suspense boundary. This commit adds memoization so the value only changes if one of it's inputs change To make this memoization effective the default argument for `themes` needed to be statically extracted (it constructs a new array on each function invocation otherwise)
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Published as 0.2.1 @gnoff |
pacocoursey
added a commit
that referenced
this pull request
Aug 28, 2023
* add license file (#119) * Fix README hydration ThemeSwitcher example (#120) Using `resolvedTheme` will cause the select to show `light` or `dark` when `system` is selected rather than `system` as expected. Co-authored-by: Paco <34928425+pacocoursey@users.noreply.github.com> * Update documentation around `defaultTheme` (#130) The previous documentation referred to using `<ThemeProvider defaultTheme="system">`, but this is no longer necessary * Memoize ThemeContext.Provider value (#135) Every time <Theme /> renders a new object is constructed and passed to ThemeContext.Provider. This guarantees that regardless of what inputs changed the Context will be propagated. This is particularly harmful when React is doing hydration because if an unhydrated Suspense boudnary exists in the sub-tree of the Provider it will fall back to client rendering regardless of whether the context is an actual dependency for that Suspense boundary. This commit adds memoization so the value only changes if one of it's inputs change To make this memoization effective the default argument for `themes` needed to be statically extracted (it constructs a new array on each function invocation otherwise) * docs: link npm-version badge to npm package-site (#136) * Update README with instructions for Next.js 13 appDir (#168) Update README.md * make `next-themes` react agnostic (#186) * tooling: add monorepo and update playwright tests (#196) * chore: add .nvmrc * chore: convert intor a turbo based monorepo (yarn workspaces) * chore: start refactoring playwright tests * chore: add missing scripts to 'example' package and update playwright config accordingly * fix(example/tailwind): use class-attribute * chore(actions): update node version and bump setup-node to v2 * chore: move license to repository-root * Update README with note for HTML class attribute (#192) * Port #178 (#200) * port pr 178 * fix up logic * fix: add explicit undefined type to support exactOptionalPropertyTypes option (Port #177) (#201) add explicit undefined * Convert to pnpm monorepo, fix Vercel builds, improve test caching, lint (#202) * cleanup package.json files * prettier * move tests to test/ * empty commit for vercel build * empty commit for vercel build * rename root package.json * upgrade next.js and react in examples * switch to pnpm monorepo, upgrade deps * update github actions to use pnpm, add to packageManager * use workspace dep * update workflows to install pnpm * back to npx * many changes… * empty commit for vercel build * empty commit for vercel build * empty commit for vercel build * idk * revert link changes, ready to merge * chore: add @types/node & @types/jest to root to ensure IDE correctly lints jest globals * chore: fix remaining merge-issues * chore(types): improve comend for UseThemeProps.theme * chore: fix merge-issue that caused forcedTheme to not be returned as resolvedTheme * chore: cleanup README --------- Co-authored-by: Paco <34928425+pacocoursey@users.noreply.github.com> Co-authored-by: Max Leiter <mleiter@usc.edu> Co-authored-by: Bruno Crosier <bruno.crosier@gmail.com> Co-authored-by: Josh Story <josh.c.story@gmail.com> Co-authored-by: Ian Jones <witspr@gmail.com> Co-authored-by: Dimitri POSTOLOV <en3m@ya.ru> Co-authored-by: Amr Hassaballah <hassaballah.amr@gmail.com>
Brooooooklyn
added a commit
to toeverything/AFFiNE
that referenced
this pull request
Mar 13, 2024
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@storybook/test-runner](https://togithub.com/storybookjs/test-runner) | [`^0.16.0` -> `^0.17.0`](https://renovatebot.com/diffs/npm/@storybook%2ftest-runner/0.16.0/0.17.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [next-themes](https://togithub.com/pacocoursey/next-themes) | [`^0.2.1` -> `^0.3.0`](https://renovatebot.com/diffs/npm/next-themes/0.2.1/0.3.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>storybookjs/test-runner (@​storybook/test-runner)</summary> ### [`v0.17.0`](https://togithub.com/storybookjs/test-runner/releases/tag/v0.17.0) [Compare Source](https://togithub.com/storybookjs/test-runner/compare/v0.16.0...v0.17.0) ##### 🚀 Enhancement - Release 0.17.0 [#​438](https://togithub.com/storybookjs/test-runner/pull/438) ([@​JReinhold](https://togithub.com/JReinhold) [@​shilman](https://togithub.com/shilman) [@​valentinpalkovic](https://togithub.com/valentinpalkovic) [@​yannbf](https://togithub.com/yannbf) [@​ndelangen](https://togithub.com/ndelangen)) - Support Storybook 8 [#​429](https://togithub.com/storybookjs/test-runner/pull/429) ([@​yannbf](https://togithub.com/yannbf)) - Support unhandled rendering errors [#​421](https://togithub.com/storybookjs/test-runner/pull/421) ([@​yannbf](https://togithub.com/yannbf)) ##### 🐛 Bug Fix - Prebundle dependencies [#​431](https://togithub.com/storybookjs/test-runner/pull/431) ([@​yannbf](https://togithub.com/yannbf)) - Update internal example to Storybook 8 [#​430](https://togithub.com/storybookjs/test-runner/pull/430) ([@​yannbf](https://togithub.com/yannbf)) - swap storybook/jest to storybook/test [#​427](https://togithub.com/storybookjs/test-runner/pull/427) ([@​ndelangen](https://togithub.com/ndelangen)) - Add PR template [#​428](https://togithub.com/storybookjs/test-runner/pull/428) ([@​yannbf](https://togithub.com/yannbf)) - Fix build step [#​425](https://togithub.com/storybookjs/test-runner/pull/425) ([@​valentinpalkovic](https://togithub.com/valentinpalkovic)) - Remove --prerelease from sb upgrade CI [#​423](https://togithub.com/storybookjs/test-runner/pull/423) ([@​JReinhold](https://togithub.com/JReinhold)) - Support stories with meta id for permalinking [#​419](https://togithub.com/storybookjs/test-runner/pull/419) ([@​yannbf](https://togithub.com/yannbf)) ##### 📝 Documentation - Docs: Add remark regarding pnp support [#​432](https://togithub.com/storybookjs/test-runner/pull/432) ([@​yannbf](https://togithub.com/yannbf)) - docs: replace postRender(deprecated) with postVisit [#​418](https://togithub.com/storybookjs/test-runner/pull/418) ([@​junkisai](https://togithub.com/junkisai)) ##### Authors: 6 - Jeppe Reinhold ([@​JReinhold](https://togithub.com/JReinhold)) - Junki Saito ([@​junkisai](https://togithub.com/junkisai)) - Michael Shilman ([@​shilman](https://togithub.com/shilman)) - Norbert de Langen ([@​ndelangen](https://togithub.com/ndelangen)) - Valentin Palkovic ([@​valentinpalkovic](https://togithub.com/valentinpalkovic)) - Yann Braga ([@​yannbf](https://togithub.com/yannbf)) </details> <details> <summary>pacocoursey/next-themes (next-themes)</summary> ### [`v0.3.0`](https://togithub.com/pacocoursey/next-themes/releases/tag/v0.3.0) #### What's - `"use client"` was added to the library output so that you can use it as a React Client component without creating a wrapper. #### New Contributors - [@​MaxLeiter](https://togithub.com/MaxLeiter) made their first contribution in [pacocoursey/next-themes#120 - [@​gnoff](https://togithub.com/gnoff) made their first contribution in [pacocoursey/next-themes#135 - [@​WITS](https://togithub.com/WITS) made their first contribution in [pacocoursey/next-themes#168 - [@​dimaMachina](https://togithub.com/dimaMachina) made their first contribution in [pacocoursey/next-themes#186 - [@​amrhassab](https://togithub.com/amrhassab) made their first contribution in [pacocoursey/next-themes#192 - [@​BekzodIsakov](https://togithub.com/BekzodIsakov) made their first contribution in [pacocoursey/next-themes#241 - [@​BlankParticle](https://togithub.com/BlankParticle) made their first contribution in [pacocoursey/next-themes#253 **Full Changelog**: pacocoursey/next-themes@v0.2.0...v0.3.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://togithub.com/renovatebot/renovate/discussions) if that's undesired. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/toeverything/AFFiNE). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4yMzAuMCIsInVwZGF0ZWRJblZlciI6IjM3LjIzOC4xIiwidGFyZ2V0QnJhbmNoIjoiY2FuYXJ5In0=-->
renovate bot
added a commit
to inabagumi/shinju-date
that referenced
this pull request
Mar 13, 2024
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [next-themes](https://togithub.com/pacocoursey/next-themes) | [`^0.2.1` -> `^0.3.0`](https://renovatebot.com/diffs/npm/next-themes/0.2.1/0.3.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>pacocoursey/next-themes (next-themes)</summary> ### [`v0.3.0`](https://togithub.com/pacocoursey/next-themes/releases/tag/v0.3.0) #### What's - `"use client"` was added to the library output so that you can use it as a React Client component without creating a wrapper. #### New Contributors - [@​MaxLeiter](https://togithub.com/MaxLeiter) made their first contribution in [pacocoursey/next-themes#120 - [@​gnoff](https://togithub.com/gnoff) made their first contribution in [pacocoursey/next-themes#135 - [@​WITS](https://togithub.com/WITS) made their first contribution in [pacocoursey/next-themes#168 - [@​dimaMachina](https://togithub.com/dimaMachina) made their first contribution in [pacocoursey/next-themes#186 - [@​amrhassab](https://togithub.com/amrhassab) made their first contribution in [pacocoursey/next-themes#192 - [@​BekzodIsakov](https://togithub.com/BekzodIsakov) made their first contribution in [pacocoursey/next-themes#241 - [@​BlankParticle](https://togithub.com/BlankParticle) made their first contribution in [pacocoursey/next-themes#253 **Full Changelog**: pacocoursey/next-themes@v0.2.0...v0.3.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/inabagumi/shinju-date). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4yMzguMSIsInVwZGF0ZWRJblZlciI6IjM3LjIzOC4xIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Adriel-M
pushed a commit
to Adriel-M/adriel.dev
that referenced
this pull request
Mar 13, 2024
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [next-themes](https://togithub.com/pacocoursey/next-themes) | [`^0.2.1` -> `^0.3.0`](https://renovatebot.com/diffs/npm/next-themes/0.2.1/0.3.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>pacocoursey/next-themes (next-themes)</summary> ### [`v0.3.0`](https://togithub.com/pacocoursey/next-themes/releases/tag/v0.3.0) #### What's - `"use client"` was added to the library output so that you can use it as a React Client component without creating a wrapper. #### New Contributors - [@​MaxLeiter](https://togithub.com/MaxLeiter) made their first contribution in [pacocoursey/next-themes#120 - [@​gnoff](https://togithub.com/gnoff) made their first contribution in [pacocoursey/next-themes#135 - [@​WITS](https://togithub.com/WITS) made their first contribution in [pacocoursey/next-themes#168 - [@​dimaMachina](https://togithub.com/dimaMachina) made their first contribution in [pacocoursey/next-themes#186 - [@​amrhassab](https://togithub.com/amrhassab) made their first contribution in [pacocoursey/next-themes#192 - [@​BekzodIsakov](https://togithub.com/BekzodIsakov) made their first contribution in [pacocoursey/next-themes#241 - [@​BlankParticle](https://togithub.com/BlankParticle) made their first contribution in [pacocoursey/next-themes#253 **Full Changelog**: pacocoursey/next-themes@v0.2.0...v0.3.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/Adriel-M/adriel.dev). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4yMzguMSIsInVwZGF0ZWRJblZlciI6IjM3LjIzOC4xIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
tisnamuliarta
added a commit
to tisnamuliarta/laravel-shadcn
that referenced
this pull request
Mar 14, 2024
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [next-themes](https://togithub.com/pacocoursey/next-themes) | [`^0.2.1` -> `^0.3.0`](https://renovatebot.com/diffs/npm/next-themes/0.2.1/0.3.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>pacocoursey/next-themes (next-themes)</summary> ### [`v0.3.0`](https://togithub.com/pacocoursey/next-themes/releases/tag/v0.3.0) #### What's - `"use client"` was added to the library output so that you can use it as a React Client component without creating a wrapper. #### New Contributors - [@​MaxLeiter](https://togithub.com/MaxLeiter) made their first contribution in [pacocoursey/next-themes#120 - [@​gnoff](https://togithub.com/gnoff) made their first contribution in [pacocoursey/next-themes#135 - [@​WITS](https://togithub.com/WITS) made their first contribution in [pacocoursey/next-themes#168 - [@​dimaMachina](https://togithub.com/dimaMachina) made their first contribution in [pacocoursey/next-themes#186 - [@​amrhassab](https://togithub.com/amrhassab) made their first contribution in [pacocoursey/next-themes#192 - [@​BekzodIsakov](https://togithub.com/BekzodIsakov) made their first contribution in [pacocoursey/next-themes#241 - [@​BlankParticle](https://togithub.com/BlankParticle) made their first contribution in [pacocoursey/next-themes#253 **Full Changelog**: pacocoursey/next-themes@v0.2.0...v0.3.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/tisnamuliarta/laravel-shadcn). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4yMzguMSIsInVwZGF0ZWRJblZlciI6IjM3LjIzOC4xIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->
1 task
](https://renovatebot.com){kind=link}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Every time
<Theme />renders, a new object is constructed and passed toThemeContext.Provider. This guarantees that regardless of what inputs changed the Context will be propagated. This is particularly harmful when React is doing hydration because if an unhydrated Suspense boundary exists in the sub-tree of the Provider it will fall back to client rendering regardless of whether the context is an actual dependency for that Suspense boundary.This commit adds memoization so the value only changes if one of it's inputs change To make this memoization effective the default argument for
themesneeded to be statically extracted (it constructs a new array on each function invocation otherwise)