Function App

examples/react/basic/src/index.tsx:166–203

()

}

function App() {
  const [state, setState] = useState(1)
  const [win, setWin] = useState<Window | null>(null)
  const [postId, setPostId] = useState(-1)
  return (
    <div>
      <Context.Provider value={{ count: state, setCount: setState }}>
        <QueryClientProvider client={queryClient}>
          <h1>TanStack Devtools React Basic Example</h1>
          current count: {state}
          <Button onClick={() => setState(state + 1)}>Click me</Button>
          <Button onClick={() => setWin(window.open('', '', 'popup'))}>
            Click me to open new window
          </Button>
          {win && createPortal(<Mounted />, win.document.body)}
          <Feature />
          <p>
            As you visit the posts below, you will notice them in a loading
            state the first time you load them. However, after you return to
            this list and click on any posts you have already visited again, you
            will see them load instantly and background refresh right before
            your eyes!{' '}
            <strong>
              (You may need to throttle your network speed to simulate longer
              loading sequences)
            </strong>
          </p>
          {postId > -1 ? (
            <Post postId={postId} setPostId={setPostId} />
          ) : (
            <Posts setPostId={setPostId} />
          )}
          <Devtools />
        </QueryClientProvider>
      </Context.Provider>
    </div>
  )
}

const root = createRoot(document.getElementById('root')!)
root.render(<App />)