Skip to content

Wrap all the makeActions functions in useCallback - #2112

Merged
david-crespo merged 2 commits into
mainfrom
use-callbacks-everywhere
Mar 29, 2024
Merged

david-crespo merged 2 commits into
mainfrom
use-callbacks-everywhere

Conversation

@david-crespo

Copy link
Copy Markdown
Collaborator

This is a very noisy but empty change, so we're pulling it out, so the rest of our useQueryTable conversions will not be as noisy as #2111.

@vercel

vercel Bot commented Mar 29, 2024 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
console ✅ Ready (Inspect) Visit Preview Mar 29, 2024 9:20pm

@charliepark charliepark left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

@david-crespo

Copy link
Copy Markdown
Collaborator Author

Still flaking. It’s probably time to really figure this out, or if that takes too long, just change the test.

@david-crespo
david-crespo merged commit 1954709 into main Mar 29, 2024
@david-crespo
david-crespo deleted the use-callbacks-everywhere branch March 29, 2024 23:14
david-crespo added a commit that referenced this pull request Sep 3, 2026
…ty (#3364)

The Firefox run on the audit log merge to main failed `Silo IP pools` on
all three attempts, each time in `clickRowAction` on the menu item, with
Chrome and Safari passing:


https://github.com/oxidecomputer/console/actions/runs/33767277998/attempts/1

I could not repro locally with the code as-is, but I can make it happen
by adding a delay in the mock API (see below). `SiloIpPoolsTab` fetches
the silo's pools twice: the paginated list that the table renders, and a
second `useQuery` for all of them, which the "Make default" confirm
modal uses to find the existing default for the same IP version and type
so it can warn that it will be replaced. `makeActions` depends on that
second result. The sequence in the test:

1. The test unlinks a pool, and the mutation's `onSuccess` invalidates
both the paginated list and the all-pools list.
2. The test waits for the unlinked row to disappear, which happens as
soon as the paginated refetch lands, and then opens the next row's menu.
3. If the all-pools refetch has already landed by then, nothing happens.
If it lands after the menu is open, it gives `makeActions` a new
identity.
4. `useColsWithActions` builds a new actions column with a new inline
`cell` closure.
5.
[`flexRender`](https://github.com/TanStack/table/blob/ab2819c/packages/react-table/src/index.tsx#L18-L27)
renders a function `cell` as a component, so a new function is a new
element type and React remounts the whole cell.
6. The open menu is unmounted along with the cell and comes back closed,
so the menu item Playwright was about to click is gone.

To confirm this, I added a 150ms delay to the mock all-pools response so
it lands right around the time the test opens the menu. On main, the e2e
test fails 5 out of 42 runs on Firefox with exactly the CI error,
detached menu item and all, at the same line. With the fix and the same
delay, it passes 24 out of 24. A longer delay like 1.5s makes the test
pass again on main because Playwright opens the menu and clicks before
the refetch lands, which is also why the test has been fine locally.
With the 1.5s delay and a throwaway e2e test that holds the menu open
across it, the menu closed before the fix and stayed open after.

The fix is to make the more actions button cell a single module-level
`ActionsCell` component and pass `makeActions` and `copyIdLabel` through
column `meta` instead of closing over them in a dynamic cell definition.
The element type is then stable no matter how often the callback or the
columns array changes identity, so it fixes every table using
`getActionsCol` without touching any call sites. The browser spec opens
a row menu, rerenders with a new `makeActions`, and asserts the menu is
still open. It failed in all three browsers before the fix.

This is the same mechanism behind the polling-closes-the-menu problems
in #2112, #2460, and #2816. Each of those was fixed by memoizing
`makeActions` or the columns array carefully enough to keep the closure
identity stable. With a stable cell component, that memoization is only
a render-count optimization, so I softened the doc comments on
`useColsWithActions`. The `instanceState` hack on NIC rows from #2460
could be unwound now, but I've left that for a followup.

This branch was successfully deployed

1 active deployment
Preview — df5c19ef Deployed Mar 29, 2024 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants