🐛 Fix performance when navigating between budget/accounts #3882
Conversation
✅ Deploy Preview for actualbudget ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Bundle Stats — desktop-clientHey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
Changeset
View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger
Smaller No assets were smaller Unchanged
|
Bundle Stats — loot-coreHey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
Changeset No files were changed View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger No assets were bigger Smaller No assets were smaller Unchanged
|
WalkthroughThe pull request modifies the Possibly related PRs
Suggested labels
Suggested reviewers
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint (1.23.1)
packages/desktop-client/src/components/spreadsheet/useSheetValue.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-eslint-plugin". (The package "eslint-plugin-eslint-plugin" was not found when loaded as a Node module from the directory "/packages/eslint-plugin-actual".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-eslint-plugin" was referenced from the config file in "packages/eslint-plugin-actual/.eslintrc.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
packages/desktop-client/src/components/spreadsheet/useSheetValue.ts (2)
69-69: The solution effectively prevents unnecessary effect re-runs, but consider performance implicationsThe change from
bindingObj.querytoJSON.stringify(bindingObj.query)in the dependency array ensures that the effect only re-runs when the query content changes, not just its reference. This is a valid approach to fix the navigation performance issue.However, be aware of these considerations:
- JSON.stringify runs on every render
- Deep query objects might impact stringify performance
- Circular references in query objects would break stringify
Consider these alternative approaches if the current solution proves costly:
- Implement a shallow comparison utility
- Use a memoization strategy for the query object
- Consider implementing a custom equality check specific to your query structure
Line range hint
41-51: Consider memoizing the bindingObj transformationThe binding object transformation could be memoized to prevent unnecessary recalculations on every render.
+const useMemoizedBinding = (binding: Binding<SheetName, FieldName>) => { + return useMemo( + () => + typeof binding === 'string' + ? { name: binding, value: null, query: undefined } + : binding, + [binding] + ); +}; - const bindingObj = - typeof binding === 'string' - ? { name: binding, value: null, query: undefined } - : binding; + const bindingObj = useMemoizedBinding(binding);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
upcoming-release-notes/3882.mdis excluded by!**/*.md
📒 Files selected for processing (1)
packages/desktop-client/src/components/spreadsheet/useSheetValue.ts(1 hunks)
🔇 Additional comments (1)
packages/desktop-client/src/components/spreadsheet/useSheetValue.ts (1)
Line range hint 52-68: Verify cleanup behavior during rapid navigation
The effect's cleanup function returns the result of spreadsheet.bind(). During rapid navigation between budgets/accounts, we should ensure proper cleanup occurs.
✅ Verification successful
Cleanup behavior during navigation is properly implemented
The implementation shows correct cleanup handling:
- The
useLayoutEffecthook returns the cleanup function fromspreadsheet.bind(), which React will automatically call during component unmount or when dependencies change - The effect's dependencies array properly includes all relevant values (
sheetName,bindingObj.name, and stringifiedbindingObj.query) - The use of
useRefforlatestOnChangeandlatestValueprevents stale closure issues during cleanup
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for other uses of spreadsheet.bind to verify consistent cleanup patterns
ast-grep --pattern 'spreadsheet.bind($$$)'
# Look for any reported issues about memory leaks during navigation
rg -i "memory.*leak.*navigation|navigation.*memory.*leak" .github/issues/
Length of output: 1513
Script:
#!/bin/bash
# Let's analyze the cleanup behavior in useSheetValue.ts
cat packages/desktop-client/src/components/spreadsheet/useSheetValue.ts
# Let's also check for any cleanup patterns in effect hooks
rg -A 5 -B 5 "useEffect.*return" packages/desktop-client/src/components/spreadsheet/
Length of output: 2147
|
@joel-jeremy I've verified it fixes the perf issue. I know you were looking at it as well so looping you in in case you have other ideas. |
There was a problem hiding this comment.
LGTM! Can confirm that value is still updating whenever a spreadsheet binding's query changes.
Steps to reproduce:
- Create a new spreadsheet binding object e.g.
{ name: '...', query: q(...) } - Pass binding to
useSheetValue - Update the binding object's query property from step 1 (for example add a filter)
- The
useSheetValue's result does not update with the new filter
#3881
This is a bit heavy handed but it works - open to other ideas. We must be passing in a new object ref with the same contents for query, so even if it's the same data it thought it was different.
This is the only solution I can think of that doesn't involve lots of refactoring