useListChangeObserver

import { useListChangeObserver } from "@prestojs/util";

useListChangeObserver(value,onChange,?options)

Call a function whenever values in a list change. This differs from useChangeObserver by allowing you to choose what changes you get (additions, updates, deletions) and to be passed the changed items in the callback. In order to achieve this each item in the array needs to have a unique ID which is obtained by calling the options.getId function. The default implementation will look for a _key or id property and return this, otherwise it return the value as is. This default implementation is compatible with ViewModel so you can pass lists of records returned from useViewModelCache.

export default function UserListView() {
  const { data, revalidate, isValidating } = useEndpoint(User.endpoints.list);
  // Refetch data whenever underlying cache changes
  const allRecords = useViewModelCache(User, cache => cache.getAll(fieldList));
  // NOTE: Usually you don't want multiple useListChangeObserver's on the exact same
  // subset of data as you will trigger redundant ajax queries.
  // if a record is updated & saved elsewhere, then useViewModelCache will return new
  // data which triggers useListChangeObserver. We still want useListChangeObserver()
  // to trigger the useEndpoint() revalidate because that record update may have changed the
  // order of records or caused it to [no longer] appear in a filtered list of data.
  // Also note that we pass false while data is being fetched from the backend
  useListChangeObserver(!isValidating && allRecords, revalidate);
  return <ListView records={data} />;
}

	Parameter	Type	Description
*	value	T\|false\|null\|undefined	An array of values to monitor for changes. A falsey value can be passed to disable checks. This is the same as passing `options.disabled`. This is convenient for cases where no value is available yet (eg. when waiting for initial response from an API endpoint)
*	onChange	Function	A method that will be called on any changes. This is passed an object of changes in the form: { ADD: [...], UPDATE: [[<prev value>, <updated value>]...], DELETE: [...], } Each change type (ADD, UPDATE, DELETE) will be `false` if no value has changed. The last and next list of records are also passed.
	options.disabled	boolean	If true then no changes will be detected. When this changes from true to false the callback won't be called until the next change in value. This is useful for disabling the callback when no value is yet available eg. when waiting for first response from an API.
	options.isEqual	Function	Function to determine equality between items. If not provided the default will do shallow equality checks with specific support for an `isEqual` function on objects (eg. if an object implements `isEqual` it will be called instead of doing any other comparisons. This is supported by ViewModel.
	options.getId	Function	Function to get unique ID for an item. This is used to detect modifications to the list. Without this it's unknown whether an item was removed from the list of just changed position. Support for ViewModel is provided out of the box by checking for the existence of a _key property on any object passed in.
	options.runOnAdd	boolean	If true then when any items are added it will call `onChange` with 'ADD' as the first parameter. Only applicable if value is an array.
	options.runOnDelete	boolean	If true then when any records are deleted it will call `onChange` with 'DELETE' as the first parameter. Only applicable if value is an array.
	options.runOnUpdate	boolean	If true then when any records are updated it will call `onChange` with 'UPDATE' as the first parameter. Only applicable if value is an array.

Returns

void

No return value