[Page Actions] Fix render issues (#7388)

Fixes: #7330
[Spin
link](https://admin.web.web-mg6g.kyle-durand.us.spin.dev/store/shop1/)

.changeset/twelve-doors-complain.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed a re-render bug with Page Actions

polaris-react/playground/DetailsPage.tsx

@@ -463,10 +463,10 @@ export function DetailsPage() {
     </VisuallyHidden>
   );
 
-  // ---- Description ----
+  const [title, setTitle] = useState(
+    "The North Face Ventrix Active Trail Hybrid Hoodie - Men's",
+  );
   const [descriptionValue, setDescriptionValue] = useState(initialDescription);
-
-  // ---- Select ----
   const [selected, setSelected] = useState('today');
 
   const options = [
@@ -546,7 +546,7 @@ export function DetailsPage() {
     <Page
       fullWidth
       breadcrumbs={[{content: 'Products', url: '/products/31'}]}
-      title="The North Face Ventrix Active Trail Hybrid Hoodie - Men's"
+      title={title}
       titleMetadata={<Badge status="success">Success badge</Badge>}
       primaryAction={{
         content: 'Save this page',
@@ -597,8 +597,11 @@ export function DetailsPage() {
             <FormLayout>
               <TextField
                 label="Title"
-                value="M60-A"
-                onChange={() => setIsDirty(true)}
+                value={title}
+                onChange={(title) => {
+                  setTitle(title);
+                  setIsDirty(true);
+                }}
                 autoComplete="off"
               />
               <TextField

polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx

@@ -1,18 +1,23 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
-import {debounce} from '../../../../utilities/debounce';
-import {useI18n} from '../../../../utilities/i18n';
 import type {
   ActionListItemDescriptor,
   ActionListSection,
   MenuActionDescriptor,
   MenuGroupDescriptor,
 } from '../../../../types';
-import {ButtonGroup} from '../../../ButtonGroup';
-// eslint-disable-next-line import/no-deprecated
-import {EventListener} from '../../../EventListener';
 import {MenuGroup} from '../MenuGroup';
+import {ButtonGroup} from '../../../ButtonGroup';
+import {debounce} from '../../../../utilities/debounce';
+import {useI18n} from '../../../../utilities/i18n';
 import {SecondaryAction} from '../SecondaryAction';
+import {useEventListener} from '../../../../utilities/use-event-listener';
 
 import styles from './Actions.scss';
 
@@ -90,6 +95,7 @@ export function Actions({actions = [], groups = [], onActionRollup}: Props) {
         currentMeasuredActions.showable.length,
         actionsAndGroups.length,
       );
+
       return {showable, rolledUp};
     });
   }, [actions, groups]);
@@ -169,12 +175,13 @@ export function Actions({actions = [], groups = [], onActionRollup}: Props) {
     [measureActions],
   );
 
-  useEffect(() => {
-    if (!actionsLayoutRef.current) {
-      return;
-    }
+  useEventListener('resize', handleResize);
+
+  useLayoutEffect(() => {
+    if (!actionsLayoutRef.current) return;
 
     availableWidthRef.current = actionsLayoutRef.current.offsetWidth;
+
     if (
       // Allow measuring twice
       // This accounts for the initial paint and re-flow
@@ -319,7 +326,6 @@ export function Actions({actions = [], groups = [], onActionRollup}: Props) {
   return (
     <div className={styles.ActionsLayout} ref={actionsLayoutRef}>
       {groupedActionsMarkup}
-      <EventListener event="resize" handler={handleResize} />
     </div>
   );
 }