Geocortex Web provides a number of React hooks to ease development of custom components bound to models. These hooks make it simple to follow the recommended observable properties pattern for model interactions within your functional components.
Watches an object for changes in one or more properties of a component model and triggers a re-render of the component.
In Geocortex Web, component models provide a way to decouple components from data source concerns and app interactions. However, they raise the issue of consistency - how can a component stay up to date with changes in the data of the underlying model? E.g. how does the React component know when to re-render?
Geocortex Web components solve this problem by providing a way to update the UI when the data in the underlying model changes using a React hook called
useWatchAndRerender. The component render lifecycle is as follows:
- The initial data is pulled from the model and rendered.
- The component starts to watch for changes to the specified properties on the model by using the
- The value of the watched property in the model changes. In the example below it changes as a result of a button click.
- The hook that is watching the property value for changes causes the component to re-render with the new property value.
The role of the "watch" functions for a component with respect to model data is similar to the role of the
useEffect functions with respect to the local state data. The
useWatchAndRenderer function essentially defines a model property as state your component's presentation is dependent upon, much like
useState, while leaving you the responsibility to update the underlying component when appropriate. The
useWatch function defines a dependency on a model property, while leaving you to define what side effects are required, much like
Watches an object for changes in one or more properties and triggers a callback.
Subscribes to an event and triggers a re-render.
Subscribes to an event and triggers a callback.