diff --git a/examples/react/basic-external-atoms/src/main.tsx b/examples/react/basic-external-atoms/src/main.tsx
index 6a1dd8a7c8..546512e67e 100644
--- a/examples/react/basic-external-atoms/src/main.tsx
+++ b/examples/react/basic-external-atoms/src/main.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import { TanStackDevtools } from '@tanstack/react-devtools'
import ReactDOM from 'react-dom/client'
import './index.css'
-import { useCreateAtom, useSelector } from '@tanstack/react-store'
+import { useCreateAtom } from '@tanstack/react-store'
import {
createColumnHelper,
createPaginatedRowModel,
@@ -79,14 +79,8 @@ function App() {
pageSize: 10,
})
- // Subscribe to each atom independently — fine-grained reactivity.
- const sorting = useSelector(sortingAtom)
- const pagination = useSelector(paginationAtom)
-
- console.log('sorting', sorting)
- console.log('pagination', pagination)
-
- // Create the table and pass your per-slice external atoms.
+ // Pass the per-slice external atoms directly. The React adapter subscribes
+ // through table.store, so no separate useSelector call is needed here.
const table = useTable(
{
key: 'basic-external-atoms', // needed for devtools
@@ -185,7 +179,7 @@ function App() {
Page
- {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '}
+ {(table.state.pagination.pageIndex + 1).toLocaleString()} of{' '}
{table.getPageCount().toLocaleString()}
@@ -195,7 +189,7 @@ function App() {
type="number"
min="1"
max={table.getPageCount()}
- defaultValue={table.atoms.pagination.get().pageIndex + 1}
+ defaultValue={table.state.pagination.pageIndex + 1}
onChange={(e) => {
const page = e.target.value ? Number(e.target.value) - 1 : 0
table.setPageIndex(page)
@@ -204,7 +198,7 @@ function App() {
/>