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() { />