[Mapbox]Resolving Error: Style is not done loading

When I changed the Layer property in Mapbox, I got this error.
「Error: Style is not done loading」

This is because, as it reads, it tried to execute the post-draw event before the load event was executed.

With this code, it will be executed when the map instance is acquired.

  const { map } = useMap();

  useEffect(() => {
    if (map) {
      map.getMap().setLayoutProperty("polygon", "visibility", "none");
    }
  }, [map]);

Letting the Layser property change after the Style has been loaded.

Wait for the load event in the Mapbox lifecycle and then execute it.

Mapbox

Map | Mapbox GL JS The Map object represents the map on your page. It exposes methods and properties that enable you to programmatically change the map, and fires events as users …

The load event is tied to the timing at which the map instance is retrieved.
The load event is executed immediately after all necessary resources have been downloaded and the map has been rendered visually complete.
This ensures that the process defined at the time of load is executed.

  useEffect(() => {
    if (map) {
      map.on("load", () => {
        map.getMap().setLayoutProperty("polygon", "visibility", "none");
      });
    }
  }, [map]);

It is written like JavaScript, but if you use react-map-gl, there is onLoad in the Callback, so it is smarter to use this.

Summary

While looking at the Mapbox load event, I was looking at other events.
There is a mouseout event, which is fired when the mouse cursor is off the map canvas. It seems to be useful for something. It was time to think about it.