When building interactive maps with Mapbox GL JS in React, you need to understand how the Mapbox event system works and how to connect those events to your React components. Mapbox GL JS provides a robust event system that lets you listen for a wide range of user interactions, such as clicks, drags, and zooms. Each event can trigger a callback function, allowing you to update your app's state or UI in response to user actions.

In React, you typically bind event listeners to the Mapbox map instance inside a useEffect hook or after the map is initialized. This ensures that the listeners are attached only after the map is available and are cleaned up properly when the component unmounts. Common events you might handle include "click" for detecting when a user clicks on the map; "move" for tracking when the map is panned or zoomed; and "zoomend" for responding after a zoom operation is complete.

To bind an event listener, you call the on method of the map instance, passing the event type and a handler function. You should also remember to remove event listeners when the component is destroyed to prevent memory leaks. This can be done using the off method in your cleanup logic.

A practical example is updating React state when a user clicks on the map. Suppose you want to display the coordinates of the last place the user clicked. You would set up a "click" event listener on the map. When the event fires, you extract the latitude and longitude from the event object and update your React state. This causes your component to re-render and display the new coordinates.

Here's how you might implement this pattern using React hooks and Mapbox GL JS:

import React, { useRef, useEffect, useState } from "react";
import mapboxgl from "mapbox-gl";

mapboxgl.accessToken = "YOUR_MAPBOX_ACCESS_TOKEN";

function MapComponent() {
  const mapContainerRef = useRef(null);
  const mapRef = useRef(null);
  const [clickedCoords, setClickedCoords] = useState(null);

  useEffect(() => {
    mapRef.current = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-74.5, 40],
      zoom: 9,
    });

    function handleMapClick(e) {
      setClickedCoords({
        lng: e.lngLat.lng,
        lat: e.lngLat.lat,
      });
    }

    mapRef.current.on("click", handleMapClick);

    return () => {
      mapRef.current.off("click", handleMapClick);
      mapRef.current.remove();
    };
  }, []);

  return (
    <div>
      <div ref={mapContainerRef} style={{ width: "100%", height: 400 }} />
      {clickedCoords && (
        <div>
          Last clicked coordinates: Longitude {clickedCoords.lng.toFixed(4)}, Latitude {clickedCoords.lat.toFixed(4)}
        </div>
      )}
    </div>
  );
}

In this example, the handleMapClick function receives the click event and updates the clickedCoords state with the longitude and latitude. Whenever the state changes, React re-renders the component to display the most recent coordinates below the map. This pattern is common when you want to keep your UI in sync with the user's interactions on the map.