GridMeasurementHelper component to continuously measure grid cells

editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts

@@ -45,6 +45,7 @@ import {
 import { mapDropNulls } from '../../../../core/shared/array-utils'
 import { assertNever } from '../../../../core/shared/utils'
 import { showGridControls } from '../../commands/show-grid-controls-command'
+import { memoize } from '../../../../core/shared/memoize'
 
 export function runGridRearrangeMove(
   targetElement: ElementPath,
@@ -813,3 +814,11 @@ function getOriginalElementGridConfiguration(
     mouseCellPosInOriginalElement,
   }
 }
+
+export const getAllGrids = memoize(getAllGridsInner, { maxSize: 1 })
+
+function getAllGridsInner(jsxMetadata: ElementInstanceMetadataMap): Array<ElementPath> {
+  return Object.keys(jsxMetadata)
+    .filter((key) => MetadataUtils.isGridLayoutedContainer(jsxMetadata[key]))
+    .map(EP.fromString)
+}

editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx

@@ -17,7 +17,6 @@ import type { InsertionPath } from '../../../editor/store/insertion-path'
 import { CSSCursor } from '../../canvas-types'
 import { setCursorCommand } from '../../commands/set-cursor-command'
 import { propertyToSet, updateBulkProperties } from '../../commands/set-property-command'
-import { showGridControls } from '../../commands/show-grid-controls-command'
 import { updateSelectedViews } from '../../commands/update-selected-views-command'
 import { controlsForGridPlaceholders } from '../../controls/grid-controls'
 import { ParentBounds } from '../../controls/parent-bounds'

editor/src/components/canvas/controls/grid-controls.tsx

@@ -40,7 +40,6 @@ import {
   pointsEqual,
   scaleRect,
   windowPoint,
-  zeroRectangle,
   zeroRectIfNullOrInfinity,
 } from '../../../core/shared/math-utils'
 import {
@@ -89,7 +88,6 @@ import { windowToCanvasCoordinates } from '../dom-lookup'
 import type { Axis } from '../gap-utils'
 import { useCanvasAnimation } from '../ui-jsx-canvas-renderer/animation-context'
 import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
-import { CanvasLabel } from './select-mode/controls-common'
 import { useMaybeHighlightElement } from './select-mode/select-mode-hooks'
 import type { GridCellCoordinates } from '../canvas-strategies/strategies/grid-cell-bounds'
 import { gridCellTargetId } from '../canvas-strategies/strategies/grid-cell-bounds'
@@ -659,12 +657,14 @@ export const GridRowColumnResizingControls =
   })
 
 export const GridControlsKey = (gridPath: ElementPath) => `grid-controls-${EP.toString(gridPath)}`
+export const GridControlKey = (gridPath: ElementPath) => `grid-control-${EP.toString(gridPath)}`
 
 export interface GridControlProps {
   grid: GridData
+  visible: 'visible' | 'hidden'
 }
 
-export const GridControl = React.memo<GridControlProps>(({ grid }) => {
+export const GridControl = React.memo<GridControlProps>(({ grid, visible }) => {
   const dispatch = useDispatch()
   const controls = useAnimationControls()
   const colorTheme = useColorTheme()
@@ -916,6 +916,7 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
       grid.padding == null
         ? 0
         : `${grid.padding.top}px ${grid.padding.right}px ${grid.padding.bottom}px ${grid.padding.left}px`,
+    opacity: visible === 'visible' ? 1 : 0,
   }
 
   // Gap needs to be set only if the other two are not present or we'll have rendering issues
@@ -1126,38 +1127,43 @@ GridControl.displayName = 'GridControl'
 
 export interface GridControlsProps {
   targets: ElementPath[]
+  visible: 'visible' | 'hidden'
 }
 
-export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ targets }) => {
-  const targetRootCell = useEditorState(
-    Substores.canvas,
-    (store) => store.editor.canvas.controls.gridControlData?.rootCell ?? null,
-    'GridControls targetRootCell',
-  )
+export const GridControls = controlForStrategyMemoized<GridControlsProps>(
+  ({ targets, visible }) => {
+    const targetRootCell = useEditorState(
+      Substores.canvas,
+      (store) => store.editor.canvas.controls.gridControlData?.rootCell ?? null,
+      'GridControls targetRootCell',
+    )
 
-  const hoveredGrids = useEditorState(
-    Substores.canvas,
-    (store) => stripNulls([store.editor.canvas.controls.gridControlData?.grid]),
-    'GridControls hoveredGrids',
-  )
+    const hoveredGrids = useEditorState(
+      Substores.canvas,
+      (store) => stripNulls([store.editor.canvas.controls.gridControlData?.grid]),
+      'GridControls hoveredGrids',
+    )
 
-  const grids = useGridData(uniqBy([...targets, ...hoveredGrids], (a, b) => EP.pathsEqual(a, b)))
+    const grids = useGridData(uniqBy([...targets, ...hoveredGrids], (a, b) => EP.pathsEqual(a, b)))
 
-  if (grids.length === 0) {
-    return null
-  }
+    if (grids.length === 0) {
+      return null
+    }
 
-  return (
-    <div id={'grid-controls'}>
-      <CanvasOffsetWrapper>
-        {grids.map((grid) => {
-          return <GridControl key={`grid-control-${EP.toString(grid.elementPath)}`} grid={grid} />
-        })}
-        <AbsoluteDistanceIndicators targetRootCell={targetRootCell} />
-      </CanvasOffsetWrapper>
-    </div>
-  )
-})
+    return (
+      <div id={'grid-controls'}>
+        <CanvasOffsetWrapper>
+          {grids.map((grid) => {
+            return (
+              <GridControl key={GridControlKey(grid.elementPath)} grid={grid} visible={visible} />
+            )
+          })}
+          <AbsoluteDistanceIndicators targetRootCell={targetRootCell} />
+        </CanvasOffsetWrapper>
+      </div>
+    )
+  },
+)
 
 const MIN_INDICATORS_DISTANCE = 32 // px
 
@@ -1845,10 +1851,10 @@ function gridPlaceholderWidthOrHeight(scale: number): string {
 export function controlsForGridPlaceholders(
   gridPath: ElementPath,
   whenToShow: WhenToShowControl = 'always-visible',
-): ControlWithProps<any> {
+): ControlWithProps<GridControlsProps> {
   return {
     control: GridControls,
-    props: { targets: [gridPath] },
+    props: { targets: [gridPath], visible: 'visible' },
     key: GridControlsKey(gridPath),
     show: whenToShow,
     priority: 'bottom',

editor/src/components/canvas/controls/new-canvas-controls.tsx

@@ -74,6 +74,10 @@ import { NO_OP } from '../../../core/shared/utils'
 import { useIsMyProject } from '../../editor/store/collaborative-editing'
 import { MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
 import { MultiplayerPresence } from '../multiplayer-presence'
+import { GridControl, GridControlKey, GridControlsKey, useGridData } from './grid-controls'
+import { getAllGrids } from '../canvas-strategies/strategies/grid-helpers'
+import type { ControlWithProps } from '../canvas-strategies/canvas-strategy-types'
+import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
 
 export const CanvasControlsContainerID = 'new-canvas-controls-container'
 
@@ -338,6 +342,12 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
     'NewCanvasControlsInner',
   )
 
+  const gridsWithoutControl = useGridsWithoutControl(
+    strategyControls,
+    dragInteractionActive,
+    componentMetadata,
+  )
+
   const cmdKeyPressed = keysPressed['cmd'] ?? false
 
   const contextMenuEnabled = !isLiveMode(editorMode)
@@ -596,6 +606,20 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
                   isSelectOrInsertMode(editorMode) &&
                     !EP.multiplePathsAllWithTheSameUID(localSelectedViews),
                   <>
+                    {when(
+                      dragInteractionActive,
+                      <CanvasOffsetWrapper>
+                        {gridsWithoutControl.map((grid) => {
+                          return (
+                            <GridControl
+                              key={GridControlKey(grid.elementPath)}
+                              grid={grid}
+                              visible={'hidden'}
+                            />
+                          )
+                        })}
+                      </CanvasOffsetWrapper>,
+                    )}
                     {strategyControls.map((c) => (
                       <RenderControlMemoized
                         key={c.key}
@@ -673,4 +697,21 @@ const SelectionAreaRectangle = React.memo(
   },
 )
 
+function useGridsWithoutControl(
+  strategyControls: Array<ControlWithProps<unknown>>,
+  dragInteractionActive: boolean,
+  metadata: ElementInstanceMetadataMap,
+) {
+  const grids = React.useMemo(() => {
+    if (!dragInteractionActive) {
+      return []
+    }
+    return getAllGrids(metadata).filter((grid) => {
+      return strategyControls.every((control) => control.key !== GridControlsKey(grid))
+    })
+  }, [metadata, strategyControls, dragInteractionActive])
+
+  return useGridData(grids)
+}
+
 SelectionAreaRectangle.displayName = 'SelectionAreaRectangle'

editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap

@@ -34,6 +34,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -53,7 +54,7 @@ Array [
   "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)()//Symbol(react.memo)()",
+  "/null/Symbol(react.memo)()//Symbol(react.memo)()",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())",
@@ -84,7 +85,7 @@ Array [
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)()//Symbol(react.memo)()",
+  "/null/Symbol(react.memo)()//Symbol(react.memo)()",
   "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div/ElementsOutsideVisibleAreaIndicator/Symbol(react.memo)(IndicatorArrow)",
@@ -814,6 +815,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -833,7 +835,7 @@ Array [
   "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)()//Symbol(react.memo)()",
+  "/null/Symbol(react.memo)()//Symbol(react.memo)()",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())",
@@ -864,7 +866,7 @@ Array [
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)()//Symbol(react.memo)()",
+  "/null/Symbol(react.memo)()//Symbol(react.memo)()",
   "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div/ElementsOutsideVisibleAreaIndicator/Symbol(react.memo)(IndicatorArrow)",
@@ -1483,6 +1485,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -1772,6 +1775,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -2373,6 +2377,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -2480,6 +2485,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -2598,6 +2604,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -2875,6 +2882,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -3352,6 +3360,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -3401,6 +3410,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",

editor/src/core/performance/performance-regression-tests.spec.tsx

@@ -65,7 +65,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`858`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`862`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1110`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1114`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`650`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`651`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`775`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`776`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 })