From 1ea37f7b1a6d755147e154f387c598e84eff1e62 Mon Sep 17 00:00:00 2001 From: Michael Day Date: Tue, 14 Mar 2023 14:57:24 -0500 Subject: [PATCH 1/8] Create new useForceUpdate hook --- wp-modules/app/js/src/hooks/useForceUpdate.ts | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 wp-modules/app/js/src/hooks/useForceUpdate.ts diff --git a/wp-modules/app/js/src/hooks/useForceUpdate.ts b/wp-modules/app/js/src/hooks/useForceUpdate.ts new file mode 100644 index 000000000..f72d09dc9 --- /dev/null +++ b/wp-modules/app/js/src/hooks/useForceUpdate.ts @@ -0,0 +1,33 @@ +import { useLayoutEffect, useState, useRef } from '@wordpress/element'; + +type WindowDimensions = [ number, number ]; + +/** + * Re-render the calling component when the window is resized. + * + * Optionally include an array of dependencies to trigger a re-render. + */ +export default function useForceUpdate< T extends unknown >( dependencies: T[] = [] ) { + const [ , setForceUpdate ] = useState< T[] | WindowDimensions >(); + const initialRender = useRef( true ); + + useLayoutEffect( () => { + // Do not cause a re-render on first render. + if ( initialRender.current ) { + initialRender.current = false; + } else { + setForceUpdate( dependencies ); + } + + function updateSizeAndRerender() { + setForceUpdate( [ + window.innerWidth, + window.innerHeight, + ] as WindowDimensions ); + } + + window.addEventListener( 'resize', updateSizeAndRerender ); + return () => + window.removeEventListener( 'resize', updateSizeAndRerender ); + }, [ ...dependencies ] ); +} From 3f8679a33d84c8bad36bbdeb17dffdf379019107 Mon Sep 17 00:00:00 2001 From: Michael Day Date: Tue, 14 Mar 2023 14:57:48 -0500 Subject: [PATCH 2/8] Use the new hook in PatternGrid --- wp-modules/app/js/src/components/Patterns/PatternGrid.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/wp-modules/app/js/src/components/Patterns/PatternGrid.tsx b/wp-modules/app/js/src/components/Patterns/PatternGrid.tsx index c2697c193..edf89af75 100644 --- a/wp-modules/app/js/src/components/Patterns/PatternGrid.tsx +++ b/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 useForceUpdate from '../../hooks/useForceUpdate'; // Components const PatternPreview: PatternPreviewType = loadable( @@ -30,8 +30,9 @@ 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. + // Passing `themePatterns` also re-renders while searching or changing categories. // Helps ensure PatternPreview iFrames are the right size. - useWindowResize(); + useForceUpdate( [ themePatterns ] ); return ( <> From 7054173b9245ebc7d814f9533e4da9fe4d251e70 Mon Sep 17 00:00:00 2001 From: Michael Day Date: Tue, 14 Mar 2023 14:57:56 -0500 Subject: [PATCH 3/8] Delete useWindowResize --- wp-modules/app/js/src/hooks/useWindowResize.ts | 16 ---------------- 1 file changed, 16 deletions(-) delete mode 100644 wp-modules/app/js/src/hooks/useWindowResize.ts diff --git a/wp-modules/app/js/src/hooks/useWindowResize.ts b/wp-modules/app/js/src/hooks/useWindowResize.ts deleted file mode 100644 index a97079217..000000000 --- a/wp-modules/app/js/src/hooks/useWindowResize.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { useLayoutEffect, useState } from '@wordpress/element'; - -/** Rerender the calling component when the window is resized. */ -export default function useWindowResize() { - const [ , setWindowSize ] = useState( [ 0, 0 ] ); - - useLayoutEffect( () => { - function updateSizeAndRerender() { - setWindowSize( [ window.innerWidth, window.innerHeight ] ); - } - - window.addEventListener( 'resize', updateSizeAndRerender ); - return () => - window.removeEventListener( 'resize', updateSizeAndRerender ); - }, [] ); -} From c6bec039fdd50fcf2a66e3b00a24c6c68c1622a5 Mon Sep 17 00:00:00 2001 From: Michael Day Date: Tue, 14 Mar 2023 15:03:31 -0500 Subject: [PATCH 4/8] Change the hook name to useForceRerend --- wp-modules/app/js/src/components/Patterns/PatternGrid.tsx | 4 ++-- .../app/js/src/hooks/{useForceUpdate.ts => useForceRerend.ts} | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) rename wp-modules/app/js/src/hooks/{useForceUpdate.ts => useForceRerend.ts} (93%) diff --git a/wp-modules/app/js/src/components/Patterns/PatternGrid.tsx b/wp-modules/app/js/src/components/Patterns/PatternGrid.tsx index edf89af75..6a61968d2 100644 --- a/wp-modules/app/js/src/components/Patterns/PatternGrid.tsx +++ b/wp-modules/app/js/src/components/Patterns/PatternGrid.tsx @@ -8,7 +8,7 @@ import loadable from '@loadable/component'; import { patternManager } from '../../globals'; // Hooks -import useForceUpdate from '../../hooks/useForceUpdate'; +import useForceRerend from '../../hooks/useForceRerend'; // Components const PatternPreview: PatternPreviewType = loadable( @@ -32,7 +32,7 @@ export default function PatternGrid( { themePatterns }: Props ) { // If the window is resized, trigger a fresh render of the grid. // Passing `themePatterns` also re-renders while searching or changing categories. // Helps ensure PatternPreview iFrames are the right size. - useForceUpdate( [ themePatterns ] ); + useForceRerend( [ themePatterns ] ); return ( <> diff --git a/wp-modules/app/js/src/hooks/useForceUpdate.ts b/wp-modules/app/js/src/hooks/useForceRerend.ts similarity index 93% rename from wp-modules/app/js/src/hooks/useForceUpdate.ts rename to wp-modules/app/js/src/hooks/useForceRerend.ts index f72d09dc9..a1c7d244f 100644 --- a/wp-modules/app/js/src/hooks/useForceUpdate.ts +++ b/wp-modules/app/js/src/hooks/useForceRerend.ts @@ -7,7 +7,7 @@ type WindowDimensions = [ number, number ]; * * Optionally include an array of dependencies to trigger a re-render. */ -export default function useForceUpdate< T extends unknown >( dependencies: T[] = [] ) { +export default function useForceRerend< T extends unknown >( dependencies: T[] = [] ) { const [ , setForceUpdate ] = useState< T[] | WindowDimensions >(); const initialRender = useRef( true ); From 9fc3d65137db71827dae4b49b013cc2a8747f1a0 Mon Sep 17 00:00:00 2001 From: Michael Day Date: Tue, 14 Mar 2023 15:04:02 -0500 Subject: [PATCH 5/8] Linting --- wp-modules/app/js/src/hooks/useForceRerend.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/wp-modules/app/js/src/hooks/useForceRerend.ts b/wp-modules/app/js/src/hooks/useForceRerend.ts index a1c7d244f..b8655ffc5 100644 --- a/wp-modules/app/js/src/hooks/useForceRerend.ts +++ b/wp-modules/app/js/src/hooks/useForceRerend.ts @@ -7,7 +7,9 @@ type WindowDimensions = [ number, number ]; * * Optionally include an array of dependencies to trigger a re-render. */ -export default function useForceRerend< T extends unknown >( dependencies: T[] = [] ) { +export default function useForceRerend< T extends unknown >( + dependencies: T[] = [] +) { const [ , setForceUpdate ] = useState< T[] | WindowDimensions >(); const initialRender = useRef( true ); From 0884c932b49f5694b16022c2b1bcb70f113a1eea Mon Sep 17 00:00:00 2001 From: Michael Day Date: Tue, 14 Mar 2023 20:12:48 -0500 Subject: [PATCH 6/8] Suggestions from code review --- .../js/src/components/Patterns/PatternGrid.tsx | 7 ++----- .../{useForceRerend.ts => useForceRerender.ts} | 16 +++++----------- 2 files changed, 7 insertions(+), 16 deletions(-) rename wp-modules/app/js/src/hooks/{useForceRerend.ts => useForceRerender.ts} (59%) diff --git a/wp-modules/app/js/src/components/Patterns/PatternGrid.tsx b/wp-modules/app/js/src/components/Patterns/PatternGrid.tsx index 6a61968d2..fb3e6859a 100644 --- a/wp-modules/app/js/src/components/Patterns/PatternGrid.tsx +++ b/wp-modules/app/js/src/components/Patterns/PatternGrid.tsx @@ -8,7 +8,7 @@ import loadable from '@loadable/component'; import { patternManager } from '../../globals'; // Hooks -import useForceRerend from '../../hooks/useForceRerend'; +import useForceRerender from '../../hooks/useForceRerender'; // Components const PatternPreview: PatternPreviewType = loadable( @@ -29,10 +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. - // Passing `themePatterns` also re-renders while searching or changing categories. - // Helps ensure PatternPreview iFrames are the right size. - useForceRerend( [ themePatterns ] ); + useForceRerender( [ themePatterns ] ); return ( <> diff --git a/wp-modules/app/js/src/hooks/useForceRerend.ts b/wp-modules/app/js/src/hooks/useForceRerender.ts similarity index 59% rename from wp-modules/app/js/src/hooks/useForceRerend.ts rename to wp-modules/app/js/src/hooks/useForceRerender.ts index b8655ffc5..876db2c9e 100644 --- a/wp-modules/app/js/src/hooks/useForceRerend.ts +++ b/wp-modules/app/js/src/hooks/useForceRerender.ts @@ -1,4 +1,4 @@ -import { useLayoutEffect, useState, useRef } from '@wordpress/element'; +import { useLayoutEffect, useState } from '@wordpress/element'; type WindowDimensions = [ number, number ]; @@ -7,25 +7,19 @@ type WindowDimensions = [ number, number ]; * * Optionally include an array of dependencies to trigger a re-render. */ -export default function useForceRerend< T extends unknown >( - dependencies: T[] = [] +export default function useForceRerender< T extends unknown >( + dependencies: T[] ) { const [ , setForceUpdate ] = useState< T[] | WindowDimensions >(); - const initialRender = useRef( true ); useLayoutEffect( () => { - // Do not cause a re-render on first render. - if ( initialRender.current ) { - initialRender.current = false; - } else { - setForceUpdate( dependencies ); - } + setForceUpdate( dependencies ); function updateSizeAndRerender() { setForceUpdate( [ window.innerWidth, window.innerHeight, - ] as WindowDimensions ); + ] ); } window.addEventListener( 'resize', updateSizeAndRerender ); From 98ba40dd91f33f19e160b77724d6b51e845aa1a1 Mon Sep 17 00:00:00 2001 From: Michael Day Date: Tue, 14 Mar 2023 20:13:13 -0500 Subject: [PATCH 7/8] Linting --- wp-modules/app/js/src/hooks/useForceRerender.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/wp-modules/app/js/src/hooks/useForceRerender.ts b/wp-modules/app/js/src/hooks/useForceRerender.ts index 876db2c9e..522dc31a0 100644 --- a/wp-modules/app/js/src/hooks/useForceRerender.ts +++ b/wp-modules/app/js/src/hooks/useForceRerender.ts @@ -16,10 +16,7 @@ export default function useForceRerender< T extends unknown >( setForceUpdate( dependencies ); function updateSizeAndRerender() { - setForceUpdate( [ - window.innerWidth, - window.innerHeight, - ] ); + setForceUpdate( [ window.innerWidth, window.innerHeight ] ); } window.addEventListener( 'resize', updateSizeAndRerender ); From 0c1d8d9779d75069976d0aa03461ad6cb6886ec7 Mon Sep 17 00:00:00 2001 From: Michael Day Date: Tue, 14 Mar 2023 21:05:18 -0500 Subject: [PATCH 8/8] Update doc block since param is no longer optional --- wp-modules/app/js/src/hooks/useForceRerender.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/wp-modules/app/js/src/hooks/useForceRerender.ts b/wp-modules/app/js/src/hooks/useForceRerender.ts index 522dc31a0..f0b117e46 100644 --- a/wp-modules/app/js/src/hooks/useForceRerender.ts +++ b/wp-modules/app/js/src/hooks/useForceRerender.ts @@ -2,11 +2,7 @@ import { useLayoutEffect, useState } from '@wordpress/element'; type WindowDimensions = [ number, number ]; -/** - * Re-render the calling component when the window is resized. - * - * Optionally include an array of dependencies to trigger a re-render. - */ +/** Re-render the calling component when the window is resized or dependencies update. */ export default function useForceRerender< T extends unknown >( dependencies: T[] ) {