Skip to main content

​
Reference

​
shallow

function shallow<T>(objA: T, objB: T): boolean
A utility function that performs shallow equality comparison between two values. Useful as a comparison function for useStore to prevent unnecessary re-renders when selecting object slices.
​
objA
T
The first value to compare.
​
objB
T
The second value to compare.

​
Returns

​
boolean
boolean
true if the values are shallowly equal, false otherwise.

​
Comparison Behavior

The shallow function handles various data types:
  • Reference equality: Returns true if Object.is(objA, objB)
  • Primitives/null: Returns false if either value is not an object
  • Map: Compares size and all entries using Object.is
  • Set: Compares size and all values for presence
  • Date: Compares timestamps using getTime()
  • Objects: Compares own properties (including symbols) using Object.is

​
Usage

​
With useStore

import { useStore, shallow } from '@tanstack/react-store'
import { store } from './store'

function TodoList() {
  // Only re-render if the todos array properties change
  const todos = useStore(
    store,
    (state) => state.todos,
    shallow
  )

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  )
}

​
Selecting Object Slices

import { useStore, shallow } from '@tanstack/react-store'
import { store } from './store'

function UserCard() {
  // Shallow compare the selected object
  const user = useStore(
    store,
    (state) => ({
      name: state.user.name,
      avatar: state.user.avatar,
      status: state.user.status
    }),
    shallow
  )

  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <span>{user.status}</span>
    </div>
  )
}

​
With Arrays

import { useStore, shallow } from '@tanstack/react-store'
import { store } from './store'

function FilteredList() {
  // Re-render only if the filtered array reference or length changes
  const items = useStore(
    store,
    (state) => state.items.filter(item => item.active),
    shallow
  )

  return <div>Active items: {items.length}</div>
}

​
Notes

  • Only compares own properties at the first level (shallow)
  • For nested objects, only the reference is compared
  • Handles special object types: Map, Set, Date
  • Includes symbol properties in comparison
  • More efficient than deep equality for most React use cases
  • Use reference equality (default) if selecting primitive values or when you want strict reference checks