with-select-derived-state.js

/**
 * Higher-order component used to inject state-derived props using registered
 * selectors.
 *
 * @param {Function} mapStateToProps Function called on every state change,
 *                                   expected to return object of props to
 *                                   merge with the component's own props.
 *
 * @return {Component} Enhanced component with merged state data props.
 */
export const withSelect = ( mapStateToProps ) => createHigherOrderComponent( ( WrappedComponent ) => {
	function getNextMergeProps( nextProps, prevState ) {
		const nextMergeProps = mapStateToProps( select, nextProps );

		return isShallowEqual( nextMergeProps, prevState.mergeProps ) ?
			prevState.mergeProps :
			nextMergeProps;
	}

	return class ComponentWithSelect extends Component {
		constructor( props ) {
			super( props );

			this.runSelection = this.runSelection.bind( this );

			this.unsubscribe = subscribe( this.runSelection );

			this.state = {};
		}

		static getDerivedStateFromProps( nextProps, prevState ) {
			if ( isShallowEqual( nextProps, prevState.props ) ) {
				return null;
			}

			return {
				props: nextProps,
				mergeProps: getNextMergeProps( nextProps, prevState ),
			};
		}

		shouldComponentUpdate( nextProps, nextState ) {
			// Component should update if one of either:
			//  - Props reference changes incurred in getDerivedStateFromProps
			//    after checking shallow equality difference.
			//  - Merge props are not shallow equal, either via runSelection
			//    (state change) or getDerivedStateFromProps (props change).
			return (
				nextState.props !== this.state.props ||
				nextState.mergeProps !== this.state.mergeProps
			);
		}

		componentWillUnmount() {
			this.unsubscribe();

			// While above unsubscribe avoids future listener calls, callbacks
			// are snapshotted before being invoked, so if unmounting occurs
			// during a previous callback, we need to explicitly track and
			// avoid the `runSelection` that is scheduled to occur.
			this.isUnmounting = true;
		}

		runSelection() {
			if ( this.isUnmounting ) {
				return;
			}

			this.setState( ( prevState, props ) => ( {
				mergeProps: getNextMergeProps( props, prevState ),
			} ) );
		}

		render() {
			return <WrappedComponent { ...this.props } { ...this.state.mergeProps } />;
		}
	};
}, 'withSelect' );