Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/framework/react/guides/reactivity.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ You can access any piece of the form state in the selector.

> Note, that `useStore` will cause a whole component re-render whenever the value subscribed to changes.

While it IS possible to omit the selector, resist the urge as omitting it would result in many unnecessary re-renders whenever any of the form state changes.
The selector parameter is required. It allows you to subscribe to only the specific part of the form state your component needs, helping avoid unnecessary re-renders when other parts of the state change.
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue | πŸ”΄ Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Check the TypeScript signature of useStore to confirm if selector is required or optional

# Search for useStore function/hook definition
ast-grep --pattern $'export function useStore($$$) {
  $$$
}'

# Also search for useStore type declarations
rg -nP --type=ts -C5 'function useStore|export.*useStore'

# Check for LocalSubscribe which wraps useStore
rg -nP --type=ts -C3 'function LocalSubscribe'

Repository: TanStack/form

Length of output: 2673


🏁 Script executed:

# Check if `@tanstack/react-store` is in the packages directory
fd -t d "react-store" packages/

# If it's an external package, search for useStore definition in node_modules or find where it's defined
find packages -name "*react-store*" -o -name "*store*" | head -20

# Search for any TypeScript definition files mentioning useStore signature
rg -t ts "export.*function useStore|export.*useStore.*=" --max-count=10

Repository: TanStack/form

Length of output: 98


🏁 Script executed:

# List all packages to find react-store
ls -la packages/ | grep -i store

# Search for type definitions of useStore
rg -t ts "selector\?" packages/ --max-count=20

# Look for .d.ts files that might have type signatures
fd -t f "\.d\.ts$" packages/ -x grep -l "useStore" {}

# Check package.json to understand the structure
find packages -name "package.json" -exec grep -l "react-store" {} \;

Repository: TanStack/form

Length of output: 1108


🏁 Script executed:

# Read the documentation file to see line 27 and surrounding context
sed -n '20,35p' docs/framework/react/guides/reactivity.md

# Also check if there's a useStore definition in react-store package if it exists locally
find packages -name "react-store" -type d

Repository: TanStack/form

Length of output: 773


The selector parameter is optional, not required.

The documentation claims the selector parameter is required, but the implementation across all form frameworks (React, Vue, Svelte, Solid, Angular) defines it as optional with selector?: and provides a default value (state) => state. Update the documentation to reflect that the selector parameter is optional but recommended for performance optimization.

πŸ€– Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@docs/framework/react/guides/reactivity.md` at line 27, The docs incorrectly
state that the selector parameter is required; update the text to say the
selector is optional (signature uses selector?:) and that it defaults to (state)
=> state, recommending its use for performance to subscribe only to needed parts
of form state; replace the sentence "The selector parameter is required..." with
wording that it is optional but recommended and mention the default selector
function and purpose (avoid unnecessary re-renders).


## form.Subscribe

Expand Down