Merge pull request #115 from studiopress/try/force-rerender-all-stale…

…-previews

Fix preview width when searching or filtering patterns

wp-modules/app/js/src/components/Patterns/PatternGrid.tsx

@@ -8,7 +8,7 @@ import loadable from '@loadable/component';
 import { patternManager } from '../../globals';
 
 // Hooks
-import useWindowResize from '../../hooks/useWindowResize';
+import useForceRerender from '../../hooks/useForceRerender';
 
 // Components
 const PatternPreview: PatternPreviewType = loadable(
@@ -29,9 +29,7 @@ type Props = {
 
 /** Render the patterns in a grid, or a message if no patterns are found. */
 export default function PatternGrid( { themePatterns }: Props ) {
-	// If the window is resized, trigger a fresh render of the grid.
-	// Helps ensure PatternPreview iFrames are the right size.
-	useWindowResize();
+	useForceRerender( [ themePatterns ] );
 
 	return (
 		<>

wp-modules/app/js/src/hooks/useForceRerender.ts

@@ -0,0 +1,22 @@
+import { useLayoutEffect, useState } from '@wordpress/element';
+
+type WindowDimensions = [ number, number ];
+
+/** Re-render the calling component when the window is resized or dependencies update. */
+export default function useForceRerender< T extends unknown >(
+	dependencies: T[]
+) {
+	const [ , setForceUpdate ] = useState< T[] | WindowDimensions >();
+
+	useLayoutEffect( () => {
+		setForceUpdate( dependencies );
+
+		function updateSizeAndRerender() {
+			setForceUpdate( [ window.innerWidth, window.innerHeight ] );
+		}
+
+		window.addEventListener( 'resize', updateSizeAndRerender );
+		return () =>
+			window.removeEventListener( 'resize', updateSizeAndRerender );
+	}, [ ...dependencies ] );
+}