router
router copied to clipboard
Sub-optimal batching in React
Describe the bug
After leaving windows with mouse and return inside window and click empty space any component that live inside RouterProvider it rerenders.
mouse hover on links that have preload="intend" also rerender everything inside RouterProvider without click on link.
Your Example Website or App
https://tanstack.com/router/v1/docs/examples/react/kitchen-sink?file=src%2Fmain.tsx
Steps to Reproduce the Bug or Issue
function Root() { const routerState = router.useState(); console.log('render'); concole log inside root in this official example
Expected behavior
expect not to rerender 2 times even without strict mode.
Screenshots or Videos
Platform
- OS: [e.g. macOS, Windows, Linux]
- Browser: [e.g. Chrome, Safari, Firefox]
- Version: [e.g. 91.1]
Additional context
No response
This is fixed.
Problem still here for me did tests on 0.0.1-beta.38. it comes from listeners on mount in router.ts.
Have idea if maybe if those listeners can be part of router oprions. Not sure why they here but without them everything works perfect in my app.
// addEventListener does not exist in React Native, but window does if (!isServer && window.addEventListener) { // Listen to visibillitychange and focus window.addEventListener('visibilitychange', router.onFocus, false) window.addEventListener('focus', router.onFocus, false) }
I'm in the process of reworking the internal state management to allow for more granular component subscriptions and batching. Stay tuned :)
any news about this issue? This one its comming from // addEventListener does not exist in React Native, but window does // In the future, we might need to invert control here for more adapters // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition if (window.addEventListener) { // Listen to visibilitychange and focus window.addEventListener('visibilitychange', onFocus, false) window.addEventListener('focus', onFocus, false) }
Any update for this?
I have same the problem with beta 61. The app is re-rendered when focus or click some place on page.
This is from the default windowFocusRefetching functionality in react-loaders. It's implemented exactly the same as Query is. You can turn it off in each loader or in the loaderClient options.