When working with Mapbox in React, you often need to display different types of information on your map. Vector layers are a powerful way to add, style, and control custom data overlays, such as roads, administrative boundaries, or custom polygons and points. In Mapbox, a layer controls how data appears on the map, while a source provides the underlying data. You can add sources and layers programmatically in your React components by interacting with the Mapbox GL JS API after the map has loaded.

To add a vector layer, you first define a source—this could be GeoJSON data representing points, lines, or polygons. Then, you add a layer that references this source and specifies how the data should be styled. In a React component, this process typically happens inside an effect hook, ensuring the code runs after the map is available. Removing a layer or source is just as straightforward: you call the corresponding remove methods, often as part of a cleanup function to avoid memory leaks or unwanted artifacts when the component unmounts or updates.

Managing layers directly through React allows you to create interactive maps where data overlays can change in response to user actions, application state, or external events. This approach gives you fine-grained control over what appears on your map and when.

A common requirement is to let users toggle the visibility of certain map layers. You can achieve this by connecting React state to the layer's visibility property. For example, you might have a checkbox in your UI that controls whether a parks layer is shown. When the state changes, you update the corresponding Mapbox layer's layout property to either "visible" or "none".

Here is a simplified pattern for toggling layer visibility using React state:

1. Create a state variable, such as showParksLayer, initialized to true or false;
2. Add the layer to the map as usual, setting its initial visibility based on the state;
3. Use an effect hook to listen for changes in showParksLayer. When it changes, call map.setLayoutProperty('parks-layer', 'visibility', showParksLayer ? 'visible' : 'none').

This pattern ensures your map's layers react instantly to UI changes, keeping the map in sync with your application's state.