This sample demonstrates how to watch for changes in components using reactive to observe property and state changes. Updates are shown in the message panel as they occur.
Use reactive when you need control over property changes, especially for continuous observation or reacting to specific value updates.
If you want to respond to higher-level component behavior like when a component is ready or react to interactions, see watch for changes with components, which uses lifecycle methods and custom events.
Import reactiveUtils
Once the map components are defined, import reactiveUtils at the start of your script.
const reactiveUtils = await $arcgis.import("@arcgis/core/core/reactiveUtils.js");
Wait for the component to be ready
Before using the reactive, wait for the component to be fully loaded.
await mapElement.viewOnReady();
Use reactive to observe map. When the value is true, the element is fully initialized and you can safely start reacting to other property changes.
reactiveUtils.watch(
() => mapElement.ready,
(isComponentReady) => {
state.ready = isComponentReady;
renderState();
},
{ initial: true }
);
Watch component's property changes
With the component fully initialized, live map interaction can be tracked. Use reactive to observe several properties at once by returning them as an array from the get function. The callback runs whenever any of those values change.
reactiveUtils.watch(
() => [mapElement.zoom, mapElement.scale, mapElement.stationary],
([zoomLevel, scaleValue, isStationary]) => {
state.zoom = zoomLevel;
state.scale = Math.round(scaleValue);
state.stationary = isStationary;
renderState();
},
{ initial: true }
);
The map property is also observed so that any time the user selects a new basemap in the gallery, the updated title is pushed to the shared state and displayed in the messages panel.
reactiveUtils.watch(
() => mapElement.basemap?.title,
(basemapTitle) => {
state.basemap = basemapTitle;
renderState();
},
{ initial: true }
);
For more information, see the Observing property changes with reactiveUtils guide topic.