Implement rerender with useReducer

WordPress · Nov 20, 2024 · d3cafb4 · d3cafb4
1 parent 04db6fd
commit d3cafb4
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 13 deletions.
diff --git a/packages/components/src/slot-fill/bubbles-virtually/fill.tsx b/packages/components/src/slot-fill/bubbles-virtually/fill.tsx
@@ -4,6 +4,7 @@
 import { useObservableValue } from '@wordpress/compose';
 import {
 	useContext,
+	useReducer,
 	useRef,
 	useEffect,
 	createPortal,
@@ -14,13 +15,12 @@ import {
  */
 import SlotFillContext from './slot-fill-context';
 import StyleProvider from '../../style-provider';
-import useForceUpdate from '../use-force-update';
 import type { FillComponentProps } from '../types';
 
 export default function Fill( { name, children }: FillComponentProps ) {
 	const registry = useContext( SlotFillContext );
 	const slot = useObservableValue( registry.slots, name );
-	const rerender = useForceUpdate();
+	const [ , rerender ] = useReducer( () => [], [] );
 	const ref = useRef( { rerender } );
 
 	useEffect( () => {

diff --git a/packages/components/src/slot-fill/slot.tsx b/packages/components/src/slot-fill/slot.tsx
@@ -9,6 +9,7 @@ import type { ReactElement, ReactNode, Key } from 'react';
 import {
 	useContext,
 	useEffect,
+	useReducer,
 	useRef,
 	Children,
 	cloneElement,
@@ -20,7 +21,6 @@ import {
  */
 import SlotFillContext from './context';
 import type { SlotComponentProps } from './types';
-import useForceUpdate from './use-force-update';
 
 /**
  * Whether the argument is a function.
@@ -34,7 +34,7 @@ function isFunction( maybeFunc: any ): maybeFunc is Function {
 
 function Slot( props: Omit< SlotComponentProps, 'bubblesVirtually' > ) {
 	const registry = useContext( SlotFillContext );
-	const rerender = useForceUpdate();
+	const [ , rerender ] = useReducer( () => [], [] );
 	const ref = useRef( { rerender } );
 
 	const { name, children, fillProps = {} } = props;

diff --git a/packages/components/src/slot-fill/use-force-update.ts b/packages/components/src/slot-fill/use-force-update.ts