[PR #1366] [MERGED] Move saveScrollWidth call to layout effect #3691

Closed
opened 2026-02-28 20:45:19 -06:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/1366
Author: @j-f1
Created: 7/19/2023
Status: Merged
Merged: 7/21/2023
Merged by: @j-f1

Base: masterHead: jed/update-in-render


📝 Commits (2)

  • de0d442 Move saveScrollWidth call to layout effect
  • 99e98ff Add release note

📊 Changes

2 files changed (+12 additions, -6 deletions)

View changed files

📝 packages/desktop-client/src/components/table.tsx (+6 -6)
upcoming-release-notes/1366.md (+6 -0)

📄 Description

FYI @carkom.

This was triggering the following error since the saveScrollWidth call was made from renderRow which is called inside the render method of the table component:

Long error stack:
Warning: Cannot update a component (`TransactionTableInner`) while rendering a different component (`FixedSizeList`). To locate the bad setState() call inside `FixedSizeList`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at FixedSizeList (packages/desktop-client/src/components/FixedSizeList.js:32:5)
    at AvoidRefocusScrollProvider (packages/desktop-client/src/hooks/useProperFocus.js:39:46)
    at packages/desktop-client/src/setupTests.js:13:8
    at div
    at View (packages/desktop-client/src/components/common/View.tsx:19:11)
    at div
    at View (packages/desktop-client/src/components/common/View.tsx:19:11)
    at packages/desktop-client/src/components/table.tsx:963:7
    at div
    at View (packages/desktop-client/src/components/common/View.tsx:19:11)
    at div
    at View (packages/desktop-client/src/components/common/View.tsx:19:11)
    at TransactionTableInner (packages/desktop-client/src/components/transactions/TransactionsTable.js:1469:3)
    at packages/desktop-client/src/components/transactions/TransactionsTable.js:1700:55
    at SplitsExpandedProvider (packages/desktop-client/src/components/transactions/TransactionsTable.js:164:42)
    at SelectedProvider (packages/desktop-client/src/hooks/useSelected.js:217:36)
    at SelectedProviderWithItems (packages/desktop-client/src/hooks/useSelected.js:263:3)
    at ResponsiveProvider (packages/desktop-client/src/ResponsiveProvider.tsx:27:18)
    at Provider (node_modules/react-redux/lib/components/Provider.js:19:20)
    at TestProvider (packages/loot-core/src/mocks/redux.tsx:18:32)
    at LiveTransactionTable (packages/desktop-client/src/components/transactions/TransactionsTable.test.js:82:58)

  1484 |     let width = parent > 0 && child > 0 && parent - child;
  1485 |
> 1486 |     setScrollWidth(!width ? 0 : width);
       |     ^
  1487 |   }
  1488 |
  1489 |   let onNavigateToTransferAccount = useCallback(

  at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
  at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
  at warnAboutRenderPhaseUpdatesInDEV (node_modules/react-dom/cjs/react-dom.development.js:27492:15)
  at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25498:5)
  at setScrollWidth (node_modules/react-dom/cjs/react-dom.development.js:17527:7)
  at saveScrollWidth (src/components/transactions/TransactionsTable.js:1486:5)
  at renderRow (src/components/table.tsx:1072:9)
  at FixedSizeList.render (src/components/FixedSizeList.js:179:11)
  at finishClassComponent (node_modules/react-dom/cjs/react-dom.development.js:19752:31)
  at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:19698:24)
  at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21611:16)
  at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14)
  at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12)
  at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5)
  at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7)
  at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:26085:20)
  at flushSyncCallbacks (node_modules/react-dom/cjs/react-dom.development.js:12042:22)
  at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
  at act (node_modules/react/cjs/react.development.js:2582:11)
  at node_modules/@testing-library/react/dist/act-compat.js:46:25
  at Object.eventWrapper (node_modules/@testing-library/react/dist/pure.js:92:28)
  at Object.wrapEvent (node_modules/@testing-library/user-event/dist/cjs/event/wrapEvent.js:8:28)
  at Object.dispatchEvent (node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:47:22)
  at Object.dispatchUIEvent (node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:24:26)
  at Mouse.up (node_modules/@testing-library/user-event/dist/cjs/system/pointer/mouse.js:91:30)
  at PointerHost.release (node_modules/@testing-library/user-event/dist/cjs/system/pointer/index.js:74:28)
  at pointerAction (node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:62:47)
  at Object.pointer (node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:35:9)
  at Object.asyncWrapper (node_modules/@testing-library/react/dist/pure.js:73:22)
  at _editField (src/components/transactions/TransactionsTable.test.js:254:5)
  at Object.<anonymous> (src/components/transactions/TransactionsTable.test.js:329:17)

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/1366 **Author:** [@j-f1](https://github.com/j-f1) **Created:** 7/19/2023 **Status:** ✅ Merged **Merged:** 7/21/2023 **Merged by:** [@j-f1](https://github.com/j-f1) **Base:** `master` ← **Head:** `jed/update-in-render` --- ### 📝 Commits (2) - [`de0d442`](https://github.com/actualbudget/actual/commit/de0d4421fe6c98ef394aea5787ed8a2a077210b7) Move saveScrollWidth call to layout effect - [`99e98ff`](https://github.com/actualbudget/actual/commit/99e98ff5a7114376c3fe1a9364f3a1c89984c58f) Add release note ### 📊 Changes **2 files changed** (+12 additions, -6 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/src/components/table.tsx` (+6 -6) ➕ `upcoming-release-notes/1366.md` (+6 -0) </details> ### 📄 Description FYI @carkom. This was triggering the following error since the `saveScrollWidth` call was made from `renderRow` which is called inside the `render` method of the table component: <details><summary>Long error stack:</summary> ``` Warning: Cannot update a component (`TransactionTableInner`) while rendering a different component (`FixedSizeList`). To locate the bad setState() call inside `FixedSizeList`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render at FixedSizeList (packages/desktop-client/src/components/FixedSizeList.js:32:5) at AvoidRefocusScrollProvider (packages/desktop-client/src/hooks/useProperFocus.js:39:46) at packages/desktop-client/src/setupTests.js:13:8 at div at View (packages/desktop-client/src/components/common/View.tsx:19:11) at div at View (packages/desktop-client/src/components/common/View.tsx:19:11) at packages/desktop-client/src/components/table.tsx:963:7 at div at View (packages/desktop-client/src/components/common/View.tsx:19:11) at div at View (packages/desktop-client/src/components/common/View.tsx:19:11) at TransactionTableInner (packages/desktop-client/src/components/transactions/TransactionsTable.js:1469:3) at packages/desktop-client/src/components/transactions/TransactionsTable.js:1700:55 at SplitsExpandedProvider (packages/desktop-client/src/components/transactions/TransactionsTable.js:164:42) at SelectedProvider (packages/desktop-client/src/hooks/useSelected.js:217:36) at SelectedProviderWithItems (packages/desktop-client/src/hooks/useSelected.js:263:3) at ResponsiveProvider (packages/desktop-client/src/ResponsiveProvider.tsx:27:18) at Provider (node_modules/react-redux/lib/components/Provider.js:19:20) at TestProvider (packages/loot-core/src/mocks/redux.tsx:18:32) at LiveTransactionTable (packages/desktop-client/src/components/transactions/TransactionsTable.test.js:82:58) 1484 | let width = parent > 0 && child > 0 && parent - child; 1485 | > 1486 | setScrollWidth(!width ? 0 : width); | ^ 1487 | } 1488 | 1489 | let onNavigateToTransferAccount = useCallback( at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30) at error (node_modules/react-dom/cjs/react-dom.development.js:60:7) at warnAboutRenderPhaseUpdatesInDEV (node_modules/react-dom/cjs/react-dom.development.js:27492:15) at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25498:5) at setScrollWidth (node_modules/react-dom/cjs/react-dom.development.js:17527:7) at saveScrollWidth (src/components/transactions/TransactionsTable.js:1486:5) at renderRow (src/components/table.tsx:1072:9) at FixedSizeList.render (src/components/FixedSizeList.js:179:11) at finishClassComponent (node_modules/react-dom/cjs/react-dom.development.js:19752:31) at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:19698:24) at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21611:16) at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14) at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12) at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5) at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7) at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:26085:20) at flushSyncCallbacks (node_modules/react-dom/cjs/react-dom.development.js:12042:22) at flushActQueue (node_modules/react/cjs/react.development.js:2667:24) at act (node_modules/react/cjs/react.development.js:2582:11) at node_modules/@testing-library/react/dist/act-compat.js:46:25 at Object.eventWrapper (node_modules/@testing-library/react/dist/pure.js:92:28) at Object.wrapEvent (node_modules/@testing-library/user-event/dist/cjs/event/wrapEvent.js:8:28) at Object.dispatchEvent (node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:47:22) at Object.dispatchUIEvent (node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:24:26) at Mouse.up (node_modules/@testing-library/user-event/dist/cjs/system/pointer/mouse.js:91:30) at PointerHost.release (node_modules/@testing-library/user-event/dist/cjs/system/pointer/index.js:74:28) at pointerAction (node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:62:47) at Object.pointer (node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:35:9) at Object.asyncWrapper (node_modules/@testing-library/react/dist/pure.js:73:22) at _editField (src/components/transactions/TransactionsTable.test.js:254:5) at Object.<anonymous> (src/components/transactions/TransactionsTable.test.js:329:17) ``` --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-02-28 20:45:19 -06:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#3691