This sample demonstrates how to watch for changes in components using reactiveUtils to observe property and state changes. Updates are shown in the message panel as they occur. Use reactiveUtils 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 reactiveUtils, wait for the component to be fully loaded.

      await mapElement.viewOnReady();

Use reactiveUtils.watch() to observe mapElement.ready. 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 reactiveUtils.watch() to observe several properties at once by returning them as an array from the getValue 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 mapElement.basemap?.title 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.