#fetcher.load reloads the document

1 messages · Page 1 of 1 (latest)

desert drum
#

fetcher.load reloads the document

desert forum
#

Dot load subscribes to revalidation just like useLoaderData

#

If you want a one off fetch then you can use submit with method GET

desert drum
#

hmm, just tried, but result is the same 😭

onDebouncedInputChange={value => {
  if (value) {
    // autocompleteFetcher.load(
    //   `/explore/${category}/${addressPath}?query=${value}`,
    // )
    autocompleteFetcher.submit({query: value}, {method: 'get'})
  }
}}
desert forum
#

except that the whole app is being reloaded everytime

do you mean a re-render or literally the browser refreshes?

desert drum
#

sorry, I meant re-rendered, and I can't stop it with component memo

desert forum
#

re-renders should not break anything

#

map being client side only has no effect here because after first page load that's always true, it never server renders again

desert drum
#

the map is client only, so all the pins are blinking while it's refetching new dropdown data

#

hmm

desert forum
#

either the map component is getting unmounted and remounted, which can happen if you have any conditional rendering above it

#

or teh data you're passing to it is changing

#

like data={navigation.state === 'loading' ? [] : loaderData.items} as a naïve example

desert drum
#

oooh maybe it's mounting/unmounting issue, I'm using some google maps lib, might need to investigate that part

#

thanks for the heads up, will investigate!:)

desert drum
#

Doesn't seem to be a lib issue... I've tried a custom google maps loader from script and this gets reloaded on every .load or .submit with method get

import {useEffect, useRef} from 'react'

export const CustomGoogleMap = () => {
  const mapRef = useRef<HTMLDivElement | null>(null)
  const mapInstance = useRef<google.maps.Map | null>(null)

  useEffect(() => {
    window.initMap = initMap

    if (
      window.google &&
      window.google.maps &&
      mapRef.current &&
      !mapInstance.current
    ) {
      initMap()
    }
  }, [])

  const initMap = () => {
    if (mapRef.current) {
      const mapOptions: google.maps.MapOptions = {
        center: {lat: 37.7749, lng: -122.4194},
        zoom: 12,
        disableDefaultUI: true,
      }

      mapInstance.current = new window.google.maps.Map(
        mapRef.current,
        mapOptions,
      )
    }
  }

  return <div ref={mapRef} className="w-full h-full"></div>
}
desert forum
desert drum
#

yeah

#

loaders are not executing, but all components from root are rerendering

desert forum
#

re-renders are ok, your code has to work even if it renders more often than you want

#

otherwise you just get bugs in different places

#

why do you need window.initMap = initMap?

desert drum
#

I was just getting a bug in the console, seems like google is calling this, if I remove same thing

# 
    at _.Cj (main.js:147:373)
    at nga (main.js:255:211)
    at main.js:254:267
desert forum
#

I suspect that's not meant to be the same function you're using to set the ref

desert drum
#

probably, I'll set it to a noop, but it's still remounting the map though 😭

#

maybe I should be using client side fetching in this case...?

#

for the dropdown

#

the weird thing is that refs are being lost during this rerender

#

they become null and that's why it re-initializes

desert forum
#

which suggests the problem is in the parent component

#

either it does one render without this component and then renders it again

#

or a key changes

desert drum
#

I'll try to investigate a bit more, maybe a fresh project