How to use @wordpress/is-shallow-equal - 10 common examples

onStoreChange() {
			if ( ! this.canRunSelection ) {
				this.hasQueuedSelection = true;
				return;
			}

			const nextMergeProps = getNextMergeProps( this.props );
			if ( isShallowEqualObjects( this.mergeProps, nextMergeProps ) ) {
				return;
			}

			this.mergeProps = nextMergeProps;

			// Schedule an update. Merge props are not assigned to state since
			// derivation of merge props from incoming props occurs within
			// shouldComponentUpdate, where setState is not allowed. setState
			// is used here instead of forceUpdate because forceUpdate bypasses
			// shouldComponentUpdate altogether, which isn't desireable if both
			// state and props change within the same render. Unfortunately,
			// this requires that next merge props are generated twice.
			this.setState( {} );
		}

const hasSyncRenderingChanged = nextProps.isAsync !== this.props.isAsync;

			if ( hasRegistryChanged ) {
				this.unsubscribe();
				this.subscribe( nextProps.registry );
			}

			if ( hasSyncRenderingChanged ) {
				renderQueue.flush( this );
			}

			// Treat a registry change as equivalent to `ownProps`, to reflect
			// `mergeProps` to rendered component if and only if updated.
			const hasPropsChanged = (
				hasRegistryChanged ||
				! isShallowEqualObjects( this.props.ownProps, nextProps.ownProps )
			);

			// Only render if props have changed or merge props have been updated
			// from the store subscriber.
			if ( this.state === nextState && ! hasPropsChanged && ! hasSyncRenderingChanged ) {
				return false;
			}

			if ( hasPropsChanged || hasSyncRenderingChanged ) {
				const nextMergeProps = getNextMergeProps( nextProps );
				if ( ! isShallowEqualObjects( this.mergeProps, nextMergeProps ) ) {
					// If merge props change as a result of the incoming props,
					// they should be reflected as such in the upcoming render.
					// While side effects are discouraged in lifecycle methods,
					// this component is used heavily, and prior efforts to use
					// `getDerivedStateFromProps` had demonstrated miserable

// Treat a registry change as equivalent to `ownProps`, to reflect
			// `mergeProps` to rendered component if and only if updated.
			const hasPropsChanged = (
				hasRegistryChanged ||
				! isShallowEqualObjects( this.props.ownProps, nextProps.ownProps )
			);

			// Only render if props have changed or merge props have been updated
			// from the store subscriber.
			if ( this.state === nextState && ! hasPropsChanged && ! hasSyncRenderingChanged ) {
				return false;
			}

			if ( hasPropsChanged || hasSyncRenderingChanged ) {
				const nextMergeProps = getNextMergeProps( nextProps );
				if ( ! isShallowEqualObjects( this.mergeProps, nextMergeProps ) ) {
					// If merge props change as a result of the incoming props,
					// they should be reflected as such in the upcoming render.
					// While side effects are discouraged in lifecycle methods,
					// this component is used heavily, and prior efforts to use
					// `getDerivedStateFromProps` had demonstrated miserable
					// performance.
					this.mergeProps = nextMergeProps;
				}

				// Regardless whether merge props are changing, fall through to
				// incur the render since the component will need to receive
				// the changed `ownProps`.
			}

			return true;
		}

UNSAFE_componentWillReceiveProps( nextProps ) {
		if (
			this.props.siteId === nextProps.siteId &&
			this.props.postId === nextProps.postId &&
			isShallowEqual( this.props.query, nextProps.query )
		) {
			return;
		}

		this.request( nextProps );
	}

if ( isObject( element ) && hasFilter( 'blocks.getSaveContent.extraProps' ) ) {
		/**
		 * Filters the props applied to the block save result element.
		 *
		 * @param {Object}      props      Props applied to save element.
		 * @param {WPBlockType} blockType  Block type definition.
		 * @param {Object}      attributes Block attributes.
		 */
		const props = applyFilters(
			'blocks.getSaveContent.extraProps',
			{ ...element.props },
			blockType,
			attributes
		);

		if ( ! isShallowEqual( props, element.props ) ) {
			element = cloneElement( element, props );
		}
	}

	/**
	 * Filters the save result of a block during serialization.
	 *
	 * @param {WPElement}   element    Block save result.
	 * @param {WPBlockType} blockType  Block type definition.
	 * @param {Object}      attributes Block attributes.
	 */
	element = applyFilters( 'blocks.getSaveElement', element, blockType, attributes );

	return (
		
			{ element }

const index = this.dropZones.indexOf( dropZone );
			const isDraggingOverDropZone = index === hoveredDropZoneIndex;
			dropZone.setState( {
				isDraggingOverDocument: isTypeSupportedByDropZone( dragEventType, dropZone ),
				isDraggingOverElement: isDraggingOverDropZone,
				position: isDraggingOverDropZone ? position : null,
				type: isDraggingOverDropZone ? dragEventType : null,
			} );
		} );

		const newState = {
			isDraggingOverDocument: true,
			hoveredDropZone: hoveredDropZoneIndex,
			position,
		};
		if ( ! isShallowEqual( newState, this.state ) ) {
			this.setState( newState );
		}
	}

shouldReplaceReviews( prevProps, nextProps ) {
			return (
				prevProps.orderby !== nextProps.orderby ||
				prevProps.order !== nextProps.order ||
				prevProps.productId !== nextProps.productId ||
				! isShallowEqual( prevProps.categoryIds, nextProps.categoryIds )
			);
		}

shouldComponentUpdate( nextProps ) {
			return ! isShallowEqual( nextProps, this.props );
		}

updateNestedSettings() {
		const {
			blockListSettings,
			allowedBlocks,
			updateNestedSettings,
		} = this.props;

		const newSettings = {
			allowedBlocks,
			templateLock: this.getTemplateLock(),
		};

		if ( ! isShallowEqual( blockListSettings, newSettings ) ) {
			updateNestedSettings( newSettings );
		}
	}

hasSameCurrency( other ) {
		Money.assertMoney( other );
		return isShallowEqual(
			this.currency.toJSON(),
			other.currency.toJSON()
		);
	}