To render your first Mapbox map in a React application, you will build a functional component that creates and displays a map using your Mapbox access token. Begin by ensuring you have your access token ready. In this walkthrough, you will use useRef to reference the map container DOM element and useEffect to handle the map's initialization and cleanup lifecycle.

Start by importing the necessary React hooks. You will also need to include the Mapbox GL JS script and CSS in your project setup, as described in the previous chapter. The following is a minimal React component that displays a Mapbox map:

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

mapboxgl.accessToken = "YOUR_MAPBOX_ACCESS_TOKEN";

function MapComponent() {
  const mapContainer = useRef(null);
  const map = useRef(null);
  const [lng, setLng] = useState(-74.5);
  const [lat, setLat] = useState(40);
  const [zoom, setZoom] = useState(9);

  useEffect(() => {
    if (map.current) return; // initialize map only once
    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [lng, lat],
      zoom: zoom,
    });

    return () => {
      map.current && map.current.remove();
    };
  }, []);

  return (
    <div
      ref={mapContainer}
      style={{ width: "100%", height: "400px" }}
    />
  );
}

This component sets up a div to hold the map and uses the useRef hook to maintain references to both the map container and the map instance. The useEffect hook ensures that the map is initialized only once when the component mounts and is properly removed when the component unmounts.

Breaking down the component, notice how you manage the map's center and zoom using React state. The lng, lat, and zoom state variables define the longitude, latitude, and zoom level for the map's initial view. These values are passed directly into the Mapbox map's configuration through the center and zoom properties. If you want to allow users to interact with the map and update the state accordingly, you can listen to map events and update these state values. For example, you might add listeners for the move event to update the state when the user pans or zooms the map. This pattern ensures that your React component stays in sync with the map's current view and allows you to control or respond to map changes in your application logic.