Open
Conversation
📝 WalkthroughWalkthroughAdds a set of React hooks and context utilities for TanStack Store (useSelector, useValue, useSetValue, useAtom, useCreateAtom, useCreateStore, createStoreContext), extracts/refactors shallow and useStore (deprecated alias), updates docs, examples, package exports, and expands tests. Changes
Sequence Diagram(s)sequenceDiagram
participant App as React App
participant Provider as StoreProvider
participant Context as StoreContext
participant Component as Component
participant Source as Atom/Store
App->>Provider: create store/atom via useCreateStore/useCreateAtom
App->>Provider: wrap children with StoreProvider(value)
Provider->>Context: provide keyed value ({ store, atom })
Component->>Context: useStoreContext()
Context-->>Component: returns { store, atom }
Component->>Source: useSelector(source, selector) / useValue(source)
Source-->>Component: selected or full value
Component->>Source: useSetValue(source) / useAtom(source)
Source-->>Component: returns stable setter / [value, setter]
Component->>Source: invoke setter -> update
Source->>Component: subscription triggers re-render with new value
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit 47f9806
☁️ Nx Cloud last updated this comment at |
Contributor
🚀 Changeset Version Preview7 package(s) bumped directly, 0 bumped as dependents. 🟨 Minor bumps
|
@tanstack/angular-store
@tanstack/preact-store
@tanstack/react-store
@tanstack/solid-store
@tanstack/store
@tanstack/svelte-store
@tanstack/vue-store
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
🧹 Nitpick comments (1)
packages/react-store/src/createRequiredContext.ts (1)
4-25: Consider making context name configurable for reusable diagnostics.The helper is generic, but the current error/display name are store-specific. Parameterizing the name would keep future usage messages accurate.
Possible refactor
-export function createRequiredContext<TValue>() { +export function createRequiredContext<TValue>(contextName = 'StoreContext') { const Context = createContext<TValue | null>(null) - Context.displayName = 'StoreContext' + Context.displayName = contextName @@ if (value === null) { - throw new Error('Missing StoreProvider for StoreContext') + throw new Error(`Missing Provider for ${contextName}`) }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/react-store/src/createRequiredContext.ts` around lines 4 - 25, Change createRequiredContext to accept an optional context name parameter (e.g., createRequiredContext<TValue>(contextName = 'StoreContext')) and use that parameter to set Context.displayName and to build the thrown error in useRequiredValue; update references to Context.displayName and the error message string ("Missing StoreProvider for StoreContext") to interpolate the provided contextName so diagnostics reflect the caller-provided name, and keep Provider and useRequiredValue behavior the same.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.changeset/petite-actors-lie.md:
- Around line 2-11: The changeset .changeset/petite-actors-lie.md currently
lists blanket minor bumps for many framework packages and a generic message
("chore: update deps and change build process to tsdown") that doesn't match the
PR's "new React hooks" feature; update the changeset to either (a) limit the
package entries to only the affected package(s) (e.g., '@tanstack/react-store')
and change the message to describe the new React hooks, or (b) split into two
changesets—one describing the new React hooks for the React package and a
separate one for dependency/build changes—so release notes and version bumps
accurately reflect the feature scope.
In `@docs/framework/react/reference/functions/createStoreContext.md`:
- Around line 9-33: Docs currently show createStoreContext<TValue>(): object but
the implementation requires TValue extends object and returns a typed store
context provider object; update the doc signature to declare the generic
constraint (TValue extends object) and replace the vague return type "object"
with the precise typed context return (reference the createStoreContext function
and the StoreProvider it returns, and mention
useStoreContext/useSelector/useValue hooks so readers see the linkage) so the
docs match the implementation's API contract.
In `@docs/framework/react/reference/functions/useCreateAtom.md`:
- Line 48: The markdown contains a duplicated heading "## Call Signature" for
useCreateAtom which triggers MD024; edit the second occurrence so it is unique
(e.g., change it to "## Call Signature (overload 2)" or "## Call Signature —
Overload 2") to avoid duplicate-heading lint warnings while preserving the
overload content for the useCreateAtom documentation.
In `@docs/framework/react/reference/functions/useCreateStore.md`:
- Around line 8-44: The docs have duplicate "## Call Signature" headings which
triggers MD024; edit the useCreateStore documentation so each overload section
has a unique heading (e.g., rename one to "## Call Signatures" or "## Call
Signature (overload)" or similar), ensuring the references to the function
useCreateStore and the content under the original first block remain unchanged
and only the trailing duplicate heading is renamed or removed to eliminate the
duplicate heading conflict.
In `@docs/framework/react/reference/functions/useSetValue.md`:
- Line 50: The docs file has duplicate "## Call Signature" headings for the
useSetValue function which can trigger markdownlint MD024; update the second
overload heading to a unique label (e.g., "## Call Signature (overload 2)" or
"## Call Signature — overloaded") so the overload sections for useSetValue are
distinct and avoid the lint rule.
In `@examples/react/atoms/index.html`:
- Line 10: Replace the unversioned CDN script URL in the HTML (the <script
src="https://unpkg.com/react-scan/dist/auto.global.js"> tag) with a pinned
package version and add Subresource Integrity and crossorigin attributes; e.g.,
change the src to include a specific version like react-scan@0.3.4, fetch the
integrity value from https://unpkg.com/react-scan@0.3.4/dist/auto.global.js?meta
and add integrity="..." and crossorigin="anonymous" to the script tag to prevent
tampering and unexpected updates.
In `@examples/react/atoms/src/index.tsx`:
- Around line 2-8: The import mixes a type with value imports which violates
import/consistent-type-specifier-style; separate the type import from runtime
imports by creating a dedicated type-only import for Atom (e.g., import type {
Atom } from '@tanstack/react-store') and keep useAtom, useCreateAtom,
useSetValue, useValue in a separate non-type import from '@tanstack/react-store'
so the type and value imports are in distinct statements.
In `@examples/react/simple/index.html`:
- Line 14: Update the floating CDN import script tag (the line with
src="https://unpkg.com/react-scan/dist/auto.global.js") to pin to
react-scan@0.5.3 by changing the src to
https://unpkg.com/react-scan@0.5.3/dist/auto.global.js and add an integrity
attribute containing the correct SRI hash for that exact file plus
crossorigin="anonymous"; obtain the precise SRI (sha256/sha384/sha512) from the
published artifact or a trusted SRI tool and paste it into the integrity
attribute so the script tag includes both integrity="..." and
crossorigin="anonymous".
In `@examples/react/store-context/src/index.tsx`:
- Around line 2-10: The import list from '@tanstack/react-store' is not
alphabetized (violates sort-imports); reorder the named imports so
createStoreContext appears first and the rest follow alphabetically (e.g.,
createStoreContext, useAtom, useCreateAtom, useCreateStore, useSelector,
useSetValue, useValue) to satisfy the linter rule and keep the import statement
consistent.
In `@examples/react/stores/src/index.tsx`:
- Line 2: Change the mixed import to use a top-level type-only import for the
Store type: import type { Store } separately and keep the runtime imports
(useCreateStore, useSelector) as normal imports; update the import statement(s)
in index.tsx so Store is imported with the `import type` form to satisfy
import/consistent-type-specifier-style while leaving useCreateStore and
useSelector as runtime imports.
---
Nitpick comments:
In `@packages/react-store/src/createRequiredContext.ts`:
- Around line 4-25: Change createRequiredContext to accept an optional context
name parameter (e.g., createRequiredContext<TValue>(contextName =
'StoreContext')) and use that parameter to set Context.displayName and to build
the thrown error in useRequiredValue; update references to Context.displayName
and the error message string ("Missing StoreProvider for StoreContext") to
interpolate the provided contextName so diagnostics reflect the caller-provided
name, and keep Provider and useRequiredValue behavior the same.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 23a04a85-8c1a-486d-a0d5-e429944d1e62
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (52)
.changeset/petite-actors-lie.mddocs/config.jsondocs/framework/react/quick-start.mddocs/framework/react/reference/functions/createStoreContext.mddocs/framework/react/reference/functions/shallow.mddocs/framework/react/reference/functions/useAtom.mddocs/framework/react/reference/functions/useCreateAtom.mddocs/framework/react/reference/functions/useCreateStore.mddocs/framework/react/reference/functions/useSelector.mddocs/framework/react/reference/functions/useSetValue.mddocs/framework/react/reference/functions/useStore.mddocs/framework/react/reference/functions/useValue.mddocs/framework/react/reference/index.mddocs/framework/react/reference/interfaces/UseSelectorOptions.mdexamples/angular/simple/angular.jsonexamples/preact/simple/package.jsonexamples/react/atoms/README.mdexamples/react/atoms/index.htmlexamples/react/atoms/package.jsonexamples/react/atoms/src/index.tsxexamples/react/atoms/tsconfig.jsonexamples/react/simple/index.htmlexamples/react/simple/package.jsonexamples/react/simple/src/index.tsxexamples/react/store-context/README.mdexamples/react/store-context/index.htmlexamples/react/store-context/package.jsonexamples/react/store-context/src/index.tsxexamples/react/store-context/src/vite-env.d.tsexamples/react/store-context/tsconfig.jsonexamples/react/store-context/vite.config.tsexamples/react/stores/README.mdexamples/react/stores/index.htmlexamples/react/stores/package.jsonexamples/react/stores/src/index.tsxexamples/react/stores/tsconfig.jsonexamples/solid/simple/package.jsonexamples/svelte/simple/package.jsonexamples/vue/simple/package.jsonpackages/react-store/src/createRequiredContext.tspackages/react-store/src/createStoreContext.tspackages/react-store/src/index.tspackages/react-store/src/shallow.tspackages/react-store/src/useAtom.tspackages/react-store/src/useCreateAtom.tspackages/react-store/src/useCreateStore.tspackages/react-store/src/useSelector.tspackages/react-store/src/useSetValue.tspackages/react-store/src/useStore.tspackages/react-store/src/useValue.tspackages/react-store/tests/index.test.tsxpackages/react-store/tests/test.test-d.ts
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
🎯 Changes
Depecated
useStorein favor ofuseSelectoruseValue(source, options?)Read the current value from an atom or the full state from a store.
useSetValue(source)Get a stable setter for a writable atom or store while preserving that source’s native setter behavior.
useAtom(atom, options?)Keep the atom tuple API for reading and writing writable atoms as
[value, setValue].useSelector(source, selector, options?)Keep the unified selector hook for deriving slices from atoms or stores.
useCreateAtom(initialValue, options?)Create a stable local atom instance for the lifetime of a component.
useCreateStore(initialValue)Create a stable local store instance for the lifetime of a component.
createStoreContext()Create a typed React context for passing grouped atoms and stores through a subtree.
✅ Checklist
pnpm test:pr.🚀 Release Impact
Summary by CodeRabbit
New Features
Documentation
Deprecations
Chores