Hide and Show DirectionsRenderer after Creation - How?

[kevinjavitz]

I am having a hard time hiding and then showing a directionsrenderer after creation. Here is my code.

I have modified the example: https://github.com/visgl/react-google-maps/blob/main/examples/directions/src/app.tsx

To add a state for all the directionsRenderers so that I can later access them:

 useEffect(() => {
    if (!routesLibrary || !map) return;
    setDirectionsService(new routesLibrary.DirectionsService());
   const directionsRen =  new routesLibrary.DirectionsRenderer({map, polylineOptions: {strokeColor: 'red'}});
   console.log('directionsRen from route.jsx', directionsRen)
   setDirectionsRenderer(directionsRen);
   setDirectionsRenderers(prevState => ({
      ...prevState,
      [route.driver]: directionsRen
    }));
    console.log('directionsRenderers from route.jsx', directionsRenderers)
  }, [routesLibrary, map]);

Then in another file I am using code like this to try and hide it, but it's not working. I am updating the routes to see if it triggers a rerenderer but it did not help.

Console logging directionsRenderers[driver.id] shows that it is the object and it's working: https://i.imgur.com/K6wLeTI.png
but setMap to null does not hide the directions / route

  directionsRenderers[driver.id].setMap(null);
  const updatedRoutes = routes.map(route => {
    if (route.driver === driver.id) {
      return {
        ...route,
        visible: false
      };
    }
    return route;
  });
  setRoutes(updatedRoutes);

My routes file looks like this, I also tried just hiding using visible to true and false but that does not work

{routes.map((route, index) => (
        route.visible && <Route key={index} route={route} />
      ))}

[kevinjavitz]

so this makes no sense but the same exact code today after restarting the server is working

[usefulthink]

I have the suspicion that the polyline you see on the map doesn't belong to the instance of the DirectionsRenderer you have, but without seeing more of the code it's very hard to make guesses as to what's going on there.

Now that you mention the server, something like this could be caused by the Component hot-reloading. You're also missing a cleanup-function and a dependency for the effect (maybe that is outside of the code you've shown).

I'd always recommend to break up the one big effect into smaller, more manageable parts and add dependencies and cleanup-functions as needed, that can often prevent these issues:

const map = useMap();
const routesLibrary = useMapsLibrary('routes');

const directionsService = useMemo(() => routesLibrary && new routesLibrary.DirectionsService(), [routesLibrary]);

const [renderersByDriver, setRenderersByDriver] = useState({});
useEffect(() => {
  const renderer = new routesLibrary.DirectionsRenderer({map});
  setRenderersByDriver(prevState => ({
    ...prevState,
    [route.driver]: renderer,
  }));

  return () => {
    renderer.setMap(null);
    // remove entry from renderersByDriver
    setRenderersByDriver(({[route.driver]:_, ...newState}) => newState);
  };
}, [map, routesLibrary, route.driver]);