router icon indicating copy to clipboard operation
router copied to clipboard

Sub-optimal batching in React

Open XpamAmAdEuS opened this issue 2 years ago • 3 comments

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

rerenders.webm

Platform

  • OS: [e.g. macOS, Windows, Linux]
  • Browser: [e.g. Chrome, Safari, Firefox]
  • Version: [e.g. 91.1]

Additional context

No response

XpamAmAdEuS avatar Nov 28 '22 19:11 XpamAmAdEuS

This is fixed.

tannerlinsley avatar Dec 08 '22 00:12 tannerlinsley

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) }

XpamAmAdEuS avatar Dec 08 '22 18:12 XpamAmAdEuS

I'm in the process of reworking the internal state management to allow for more granular component subscriptions and batching. Stay tuned :)

tannerlinsley avatar Dec 08 '22 20:12 tannerlinsley

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) }

XpamAmAdEuS avatar Jan 11 '23 02:01 XpamAmAdEuS

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.

nvuhung avatar Jan 28 '23 14:01 nvuhung

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.

tannerlinsley avatar Feb 06 '23 04:02 tannerlinsley