How to use the @bentley/ui-core.shallowDiffers function in @bentley/ui-core

public shouldComponentUpdate(nextProps: TreeProps, nextState: TreeState): boolean {
    if (this.state.modelReady !== nextState.modelReady || this.state.model !== nextState.model) {
      // always render when modelReady or model changes
      return true;
    }

    if (!nextState.modelReady) {
      // if we got here and model is not ready - don't render
      return false;
    }

    // otherwise, render when any of the following props / state change
    return this.props.selectedNodes !== nextProps.selectedNodes
      || this.props.checkboxInfo !== nextProps.checkboxInfo
      || shallowDiffers(this.props.renderOverrides, nextProps.renderOverrides)
      || this.props.dataProvider !== nextProps.dataProvider
      || this.props.nodeHighlightingProps !== nextProps.nodeHighlightingProps
      || this.state.currentlyEditedNode !== nextState.currentlyEditedNode
      || this.state.model.visible().some((n) => n.isDirty());
  }

modelReady: state.modelReady,
        selectedNodes: props.selectedNodes,
        checkboxInfo: props.checkboxInfo,
        bulkCheckboxActionsDisabled: props.bulkCheckboxActionsDisabled,
        nodeHighlightingProps: props.nodeHighlightingProps,
        cellEditing: props.cellEditing,
      },
    };

    // update highlighting engine if related props changed
    if (props.nodeHighlightingProps !== state.prev.nodeHighlightingProps) {
      derivedState.highlightingEngine = props.nodeHighlightingProps ? new HighlightingEngine(props.nodeHighlightingProps) : undefined;
    }

    // update cell editing engine if related props changed
    if (shallowDiffers(props.cellEditing, state.prev.cellEditing)) {
      derivedState.cellEditingEngine = props.cellEditing ? new CellEditingEngine(props.cellEditing) : undefined;
    }

    if (selectedNodesChanged || providerChanged) {
      state.nodeLoadingOrchestrator.cancelLoading();
    }

    // in case provider changed, have to re-create `model` and reset `modelReady`
    if (providerChanged) {
      derivedState.model = Tree.createModel(props);
      derivedState.modelReady = false;
      derivedState.nodeLoadingOrchestrator = Tree.createNodeLoadingOrchestrator(derivedState.model, props);
      derivedState.nodeEventManager = Tree.createNodeEventManager(derivedState.nodeLoadingOrchestrator, derivedState.model, props);
    } else {
      const modelBecameReady = (modelReadyChanged && state.modelReady);
      if (modelBecameReady || selectedNodesChanged) {

function doPropsDiffer(props1: TreeNodeProps, props2: TreeNodeProps) {
  return shallowDiffers(props1.highlightProps, props2.highlightProps)
    || shallowDiffers(props1.renderOverrides, props2.renderOverrides)
    || props1.valueRendererManager !== props2.valueRendererManager
    || props1.cellEditing !== props2.cellEditing
    || props1.showDescription !== props2.showDescription
    || shallowDiffers(props1.checkboxProps, props2.checkboxProps)
    || props1.imageLoader !== props2.imageLoader;
}

function doPropsDiffer(props1: TreeNodeProps, props2: TreeNodeProps) {
  return shallowDiffers(props1.highlightProps, props2.highlightProps)
    || shallowDiffers(props1.renderOverrides, props2.renderOverrides)
    || props1.valueRendererManager !== props2.valueRendererManager
    || props1.cellEditing !== props2.cellEditing
    || props1.showDescription !== props2.showDescription
    || shallowDiffers(props1.checkboxProps, props2.checkboxProps)
    || props1.imageLoader !== props2.imageLoader;
}

function doPropsDiffer(props1: TreeNodeProps, props2: TreeNodeProps) {
  return shallowDiffers(props1.highlightProps, props2.highlightProps)
    || shallowDiffers(props1.renderOverrides, props2.renderOverrides)
    || props1.valueRendererManager !== props2.valueRendererManager
    || props1.cellEditing !== props2.cellEditing
    || props1.showDescription !== props2.showDescription
    || shallowDiffers(props1.checkboxProps, props2.checkboxProps)
    || props1.imageLoader !== props2.imageLoader;
}

private static doPropsDiffer(props1: TreeNodeContentProps, props2: TreeNodeContentProps) {
    return shallowDiffers(props1.highlightProps, props2.highlightProps)
      || props1.valueRendererManager !== props2.valueRendererManager
      || props1.cellEditing !== props2.cellEditing
      || props1.showDescription !== props2.showDescription;
  }

public componentDidUpdate(prevProps: TreeProps, prevState: TreeState) {
    this._selectionHandler.selectionMode = this.props.selectionMode!;

    if (this.props.selectedNodes !== prevProps.selectedNodes) {
      this.state.nodeLoadingOrchestrator.cancelLoading();
    }

    if (this.props.nodeHighlightingProps && shallowDiffers(this.props.nodeHighlightingProps, prevProps.nodeHighlightingProps)) {
      if (this._nodesRenderInfo)
        this._shouldScrollToActiveNode = true;
      else
        this.scrollToActiveNode();
    }

    if (this.state.model !== prevState.model) {
      this.dropModelListeners(prevState.model);
      this.assignModelListeners(this.state.model);
    }

    if (this.props.dataProvider !== prevProps.dataProvider) {
      this.dropDataProviderListeners(prevProps.dataProvider);
      this.assignDataProviderListeners(this.props.dataProvider);
    }