Function App

examples/preact/basic/src/index.tsx:146–180

()

}

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 }}>
        <h1>TanStack Devtools Preact 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 && render(<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 />
      </Context.Provider>
    </div>
  )
}

render(<App />, document.getElementById('root')!)