⬆️ upgrade react dependencies to their newest minor version #5027

matt-fidd · 2025-05-19T03:53:31Z

No description provided.

netlify · 2025-05-19T03:53:35Z

✅ Deploy Preview for actualbudget ready!

Name	Link
🔨 Latest commit	`873cbcd`
🔍 Latest deploy log	https://app.netlify.com/projects/actualbudget/deploys/682aab7906f985000858f9ea
😎 Deploy Preview	https://deploy-preview-5027.demo.actualbudget.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

matt-fidd · 2025-05-19T03:54:41Z

@coderabbitai are you able to collect the changes from the release notes of all of the packages I've bumped and post them here?

github-actions · 2025-05-19T03:57:20Z

Bundle Stats — desktop-client

Hey 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

Files count	Total bundle size	% Changed
18	9.69 MB → 9.65 MB (-42.52 kB)	-0.43%

Changeset

File	Δ	Size
`node_modules/@react-aria/collections/dist/Document.mjs`	📈 +2.61 kB (+19.31%)	13.53 kB → 16.14 kB
`node_modules/@react-aria/overlays/dist/useModal.mjs`	📈 +171 B (+5.34%)	3.13 kB → 3.29 kB
`node_modules/react-router/dist/index.js`	📈 +704 B (+3.48%)	19.77 kB → 20.46 kB
`node_modules/@react-aria/gridlist/dist/useGridList.mjs`	📈 +103 B (+3.33%)	3.02 kB → 3.12 kB
`node_modules/react-grid-layout/build/utils.js`	📈 +292 B (+1.78%)	16.04 kB → 16.33 kB
`node_modules/react-grid-layout/build/GridItem.js`	📈 +305 B (+1.35%)	22.12 kB → 22.42 kB
`node_modules/react-hotkeys-hook/dist/react-hotkeys-hook.esm.js`	📈 +236 B (+1.30%)	17.73 kB → 17.96 kB
`node_modules/react-router-dom/dist/index.js`	📈 +127 B (+1.09%)	11.36 kB → 11.48 kB
`node_modules/@react-aria/interactions/dist/useFocusWithin.mjs`	📈 +24 B (+0.54%)	4.32 kB → 4.35 kB
`node_modules/@react-aria/selection/dist/useSelectableCollection.mjs`	📈 +99 B (+0.41%)	23.69 kB → 23.78 kB
`node_modules/@remix-run/router/dist/router.js`	📈 +77 B (+0.27%)	28.29 kB → 28.36 kB
`node_modules/@react-aria/selection/dist/useSelectableItem.mjs`	📈 +22 B (+0.17%)	12.78 kB → 12.81 kB
`node_modules/react-aria-components/dist/OverlayArrow.mjs`	📈 +1 B (+0.13%)	744 B → 745 B
`node_modules/react-grid-layout/build/calculateUtils.js`	📈 +8 B (+0.12%)	6.32 kB → 6.32 kB
`node_modules/react-aria-components/dist/Popover.mjs`	📉 -1 B (-0.01%)	7.65 kB → 7.65 kB
`node_modules/react-i18next/dist/es/utils.js`	📉 -6 B (-0.19%)	3.1 kB → 3.09 kB
`node_modules/@react-aria/interactions/dist/utils.mjs`	📉 -315 B (-4.43%)	6.95 kB → 6.64 kB
`node_modules/@react-aria/button/dist/useButton.mjs`	📉 -225 B (-7.24%)	3.04 kB → 2.82 kB
`node_modules/@react-aria/ssr/dist/SSRProvider.mjs`	📉 -379 B (-10.45%)	3.54 kB → 3.17 kB
`node_modules/@react-aria/utils/dist/platform.mjs`	📉 -660 B (-20.01%)	3.22 kB → 2.58 kB
`node_modules/react-aria-components/dist/GridList.mjs`	📉 -4.05 kB (-21.68%)	18.69 kB → 14.64 kB
`node_modules/react-aria-components/dist/ListBox.mjs`	📉 -4.41 kB (-23.91%)	18.45 kB → 14.04 kB
`node_modules/@react-aria/utils/dist/openLink.mjs`	📉 -1.62 kB (-29.94%)	5.41 kB → 3.79 kB
`node_modules/@react-aria/interactions/dist/useFocusVisible.mjs`	📉 -4.03 kB (-31.42%)	12.83 kB → 8.8 kB
`node_modules/@react-aria/interactions/dist/useFocusable.mjs`	📉 -876 B (-33.40%)	2.56 kB → 1.71 kB
`node_modules/react-aria-components/dist/Collection.mjs`	📉 -845 B (-34.69%)	2.38 kB → 1.55 kB
`node_modules/react-aria-components/dist/Dialog.mjs`	📉 -1.89 kB (-36.07%)	5.24 kB → 3.35 kB
`node_modules/@react-aria/interactions/dist/PressResponder.mjs`	📉 -921 B (-42.74%)	2.1 kB → 1.21 kB
`node_modules/@react-aria/interactions/dist/usePress.mjs`	📉 -16.65 kB (-48.00%)	34.68 kB → 18.04 kB
`node_modules/@react-aria/interactions/dist/useHover.mjs`	📉 -3.45 kB (-48.32%)	7.14 kB → 3.69 kB
`node_modules/@react-aria/label/dist/useLabel.mjs`	📉 -919 B (-56.24%)	1.6 kB → 715 B
`node_modules/@react-aria/interactions/dist/createEventHandler.mjs`	📉 -955 B (-60.29%)	1.55 kB → 629 B
`node_modules/@react-aria/interactions/dist/useInteractOutside.mjs`	📉 -3.01 kB (-61.20%)	4.93 kB → 1.91 kB
`node_modules/@react-stately/utils/dist/useControlledState.mjs`	📉 -2.18 kB (-62.30%)	3.49 kB → 1.32 kB

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset	File Size	% Changed
static/js/ReportRouter.js	1.71 MB → 1.71 MB (+605 B)	+0.03%

Smaller

Asset	File Size	% Changed
static/js/index.js	6.56 MB → 6.52 MB (-43.11 kB)	-0.64%

Unchanged

Asset	File Size	% Changed
static/js/de.js	120.53 kB	0%
static/js/en-GB.js	5.93 kB	0%
static/js/en.js	116.35 kB	0%
static/js/es.js	68.91 kB	0%
static/js/fr.js	124.09 kB	0%
static/js/nl.js	100.82 kB	0%
static/js/pt-BR.js	117.2 kB	0%
static/js/uk.js	121.43 kB	0%
static/js/indexeddb-main-thread-worker-e59fee74.js	12.94 kB	0%
static/js/workbox-window.prod.es5.js	5.64 kB	0%
static/js/resize-observer.js	18.37 kB	0%
static/js/BackgroundImage.js	122.29 kB	0%
static/js/narrow.js	391.1 kB	0%
static/js/wide.js	113.64 kB	0%
static/js/AppliedFilters.js	10.92 kB	0%
static/js/useAccountPreviewTransactions.js	3.14 kB	0%

github-actions · 2025-05-19T03:57:21Z

Bundle Stats — loot-core

Hey 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

Files count	Total bundle size	% Changed
1	2.3 MB	0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
kcab.worker.js	2.3 MB	0%

coderabbitai · 2025-05-19T03:57:52Z

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

@matt-fidd I've collected the release notes for the packages that were bumped in this PR:

Package Bumps Summary

react-router-dom: 6.6.1 → 6.22.2
@types/react-router-dom: 5.3.3 → 6.22.0
history: 5.3.0 (removed as it's bundled with react-router-dom v6)

Release Notes

react-router-dom (6.6.1 → 6.22.2)

Notable changes across these versions include:

New Features

Added support for lazy loading routes with React.lazy
Introduced unstable_useBlocker for navigation blocking in v6.15.0
Added basename prop to RouterProvider component
Implemented Data APIs like createBrowserRouter and loader/action functions
Added useNavigation hook for pending navigation states
Introduced useActionData for form submission data
Added future.v7_normalizeFormMethod flag for standardizing form methods

Bug Fixes

Fixed URL encoding issues
Resolved memory leaks in development mode
Fixed issues with URL search parameters
Addressed route matching problems
Fixed focus management issues

Breaking Changes

Changed how query parameters are handled
Deprecated useNavigationType in favor of useNavigationContext

@types/react-router-dom (5.3.3 → 6.22.0)

This is a major version update that aligns the TypeScript definitions with the v6 API changes:

Updated type definitions to match react-router-dom v6 API
Added types for new hooks like useNavigation, useActionData, etc.
Updated router configuration types to support the Data Router API
Added improved TypeScript interfaces for router objects

history package (removed)

The history package was removed as a direct dependency because:

It's now bundled with react-router-dom v6
The history API is exposed through react-router-dom's own interfaces
In v6, the history object is less directly manipulated in favor of hooks like useNavigate

This update brings significant improvements to routing capabilities, better TypeScript support, and prepares for upcoming v7 features.

🏁 Script executed:

#!/bin/bash
# First, let's check the PR description to see if it mentions the updated packages
gh pr view 5027 --json title,body

# Now let's look at the changed files to identify package.json changes
gh pr view 5027 --json files

# Let's look at the actual changes to package.json files to identify bumped packages
gh pr diff 5027 | grep -A 3 -B 3 '"version":'

Length of output: 494

🏁 Script executed:

#!/bin/bash
# Let's look at the package.json files to identify dependency bumps
gh pr diff 5027 -- '**/package.json'

Length of output: 75

🏁 Script executed:

#!/bin/bash
# Check if there are changes to yarn.lock or package-lock.json
gh pr diff 5027 -- '**/yarn.lock' '**/package-lock.json' | head -n 100

# Let's get a more focused view of package.json dependency changes
gh pr diff 5027 -- '**/package.json' | grep -A 1 -B 1 '"[a-zA-Z0-9@][a-zA-Z0-9@/\-_]*": "[\^~]?[0-9]' | grep -v "@@"

Length of output: 263

🏁 Script executed:

#!/bin/bash
# Try to extract package version changes from the diff in a more readable format
gh pr diff 5027 -- '**/package.json' | grep -E '[-+][ ]+\"(@?[a-zA-Z0-9\-_/]+)\"[ ]*:[ ]*\"(\^|~)?([0-9]+\.[0-9]+\.[0-9]+.*?)\"' | grep -v "test" | sort

Length of output: 189

🏁 Script executed:

#!/bin/bash
# Get a more complete view of the package.json changes
gh pr diff 5027 -- '**/package.json' > package_diff.txt
cat package_diff.txt | grep -E '^[-+][ ]+\"(@?[a-zA-Z0-9\-_/]+)\"[ ]*:[ ]*\"' | grep -v "@actual" | sort

Length of output: 180

🏁 Script executed:

#!/bin/bash
# Use a more sophisticated approach to identify package bumps
PR_DIFF=$(gh pr diff 5027 -- '**/package.json')

echo "Package version changes:"
echo "-----------------------"

# Extract package name and version changes
echo "$PR_DIFF" | grep -E '^[-+][ ]+\"(@?[a-zA-Z0-9\-_/]+)\"[ ]*:[ ]*\"(\^|~)?([0-9]+\.[0-9]+\.[0-9]+.*?)\"' | 
while read -r line; do
  # Extract package name and version
  if [[ $line =~ ^[-+][ ]+\"([@a-zA-Z0-9\-_/]+)\"[ ]*:[ ]*\"(\^|~)?([0-9]+\.[0-9]+\.[0-9]+.*?)\" ]]; then
    PREFIX="${line:0:1}"
    PACKAGE="${BASH_REMATCH[1]}"
    VERSION="${BASH_REMATCH[3]}"
    echo "$PREFIX $PACKAGE: $VERSION"
  fi
done | grep -v -E "@actual|@babel/runtime|^- |node-version" | sort

Length of output: 312

🏁 Script executed:

#!/bin/bash
# Check PR title and description
echo "PR Title and Description:"
echo "------------------------"
gh pr view 5027 --json title,body | jq -r '.title, .body'

# Check commit messages
echo -e "\nCommit Messages:"
echo "----------------"
gh pr view 5027 --json commits | jq -r '.commits[].message'

Length of output: 406

🏁 Script executed:

#!/bin/bash
# Get a more focused view of the package.json changes
echo "Package Version Changes:"
echo "----------------------"
gh pr diff 5027 -- '**/package.json' | grep -B 1 -A 1 -E 'react-router-dom'

Length of output: 224

🏁 Script executed:

#!/bin/bash
# This script will find all packages that were bumped to new versions

# Get the PR diff for package.json files and store it
PR_DIFF=$(gh pr diff 5027 -- '**/package.json')

# Extract and process each chunk of the diff that contains version changes
echo "$PR_DIFF" | awk '
BEGIN { package = ""; inPackage = 0; }
/^@@/ { inPackage = 0; }
/^[-+][ ]+\"(@?[a-zA-Z0-9\-_\/]+)\"[ ]*:[ ]*\"(\^|~)?([0-9]+\.[0-9]+\.[0-9]+.*?)\"/ {
  if (inPackage == 0) {
    inPackage = 1;
    package = "";
    oldVersion = "";
    newVersion = "";
  }
  
  if (match($0, /^([-+])[ ]+\"(@?[a-zA-Z0-9\-_\/]+)\"[ ]*:[ ]*\"(\^|~)?([0-9]+\.[0-9]+\.[0-9]+.*?)\"/, arr)) {
    sign = arr[1];
    pkgName = arr[2];
    version = arr[4];
    
    if (package == "" || package == pkgName) {
      package = pkgName;
      if (sign == "-") {
        oldVersion = version;
      } else {
        newVersion = version;
      }
      
      # If we have both old and new versions, print the change
      if (oldVersion != "" && newVersion != "" && oldVersion != newVersion) {
        printf "%s: %s → %s\n", package, oldVersion, newVersion;
        inPackage = 0;
      }
    }
  }
}' | sort | uniq

Length of output: 1081

🏁 Script executed:

#!/bin/bash
# Extract all package.json changes with - and + lines
gh pr diff 5027 -- '**/package.json' | grep -E '^[-+][ ]+\"(@?[a-zA-Z0-9\-_/]+)\"[ ]*:[ ]*\"' | 
grep -v -E "\"name\"|\"version\"|\"scripts\"|\"dependencies\"|\"devDependencies\"|\"resolutions\"|\"private\"|\"type\"|\"main\"|\"module\"" | sort

Length of output: 261

🏁 Script executed:

#!/bin/bash
# First, let's look at the files changed in the PR to focus our analysis
gh pr view 5027 --json files | jq -r '.files[].path' | grep -E '(package\.json|yarn\.lock)$'

Length of output: 181

🏁 Script executed:

#!/bin/bash
# Get a list of changed package.json files
PACKAGE_JSON_FILES=$(gh pr view 5027 --json files | jq -r '.files[].path' | grep 'package\.json$')

# For each package.json file, get its diff
for file in $PACKAGE_JSON_FILES; do
  echo "Changes in $file:"
  echo "------------------"
  gh pr diff 5027 -- "$file" | grep -E '^[-+][ ]+\"(@?[a-zA-Z0-9\-_/]+)\"[ ]*:[ ]*\"' | 
  grep -v -E "\"name\"|\"version\"|\"scripts\"|\"dependencies\"|\"devDependencies\"|\"resolutions\"|\"private\"|\"type\"|\"main\"|\"module\"" | 
  grep -v "@actual" | sort
  echo ""
done

Length of output: 1182

🏁 Script executed:

#!/bin/bash
# Get a list of changed package.json files
PACKAGE_JSON_FILES=$(gh pr view 5027 --json files | jq -r '.files[].path' | grep 'package\.json$')

echo "Package Version Changes:"
echo "----------------------"

# For each package.json file, get its diff and extract version changes
for file in $PACKAGE_JSON_FILES; do
  fileContent=$(gh pr diff 5027 -- "$file")
  
  # Process the diff to identify package version changes
  echo "$fileContent" | grep -E '^[-+][ ]+\"(@?[a-zA-Z0-9\-_/]+)\"[ ]*:[ ]*\"' | 
  grep -v -E "\"name\"|\"version\"|\"scripts\"|\"dependencies\"|\"devDependencies\"|\"resolutions\"|\"private\"|\"type\"|\"main\"|\"module\"" | 
  grep -v "@actual" > temp_changes.txt
  
  # Group by package name and identify version changes
  current_package=""
  old_version=""
  new_version=""
  
  cat temp_changes.txt | while read line; do
    if [[ $line =~ ^([-+])[ ]+\"([@a-zA-Z0-9\-_/]+)\"[ ]*:[ ]*\"(\^|~)?([0-9]+\.[0-9]+\.[0-9]+.*?)\" ]]; then
      sign="${BASH_REMATCH[1]}"
      package="${BASH_REMATCH[2]}"
      version="${BASH_REMATCH[4]}"
      
      if [[ "$current_package" != "$package" ]]; then
        # Output the previous package's change if there was one
        if [[ -n "$current_package" && -n "$old_version" && -n "$new_version" ]]; then
          echo "$file: $current_package: $old_version → $new_version"
        fi
        
        # Reset for new package
        current_package="$package"
        old_version=""
        new_version=""
      fi
      
      if [[ "$sign" == "-" ]]; then
        old_version="$version"
      else
        new_version="$version"
      fi
      
      # Output at the end of processing the current package
      if [[ -n "$current_package" && -n "$old_version" && -n "$new_version" ]]; then
        echo "$file: $current_package: $old_version → $new_version"
        current_package=""
        old_version=""
        new_version=""
      fi
    fi
  done
done

rm -f temp_changes.txt

Length of output: 404

🏁 Script executed:

#!/bin/bash
# List all changed files to understand what changes were made
gh pr view 5027 --json files | jq -r '.files[].path'

# Get a summary of the PR to understand its purpose
gh pr view 5027 --json title,body | jq -r '.title, "\n", .body'

Length of output: 307

🏁 Script executed:

#!/bin/bash
# Get the diff for package.json files in the PR
PACKAGE_JSON_FILES=$(gh pr view 5027 --json files | jq -r '.files[].path' | grep 'package\.json$')

for file in $PACKAGE_JSON_FILES; do
  echo "Changes in $file:"
  echo "------------------"
  gh pr diff 5027 -- "$file"
  echo -e "\n"
done

Length of output: 786

🏁 Script executed:

#!/bin/bash
echo "Identified package bumps:"
echo "1. react-router-dom: 6.6.1 -> 6.22.2"
echo "2. @types/react-router-dom: 5.3.3 -> 6.22.0"
echo "3. history: 5.3.0 (removed)"

# Now let's search for release notes of these packages
echo -e "\nSearching for release notes..."
echo "React Router DOM Releases: https://github.com/remix-run/react-router/releases"
echo "@types/react-router-dom Releases: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-router-dom"

Length of output: 796

🌐 Web query:

react-router-dom release notes from 6.6.1 to 6.22.2

💡 Result:

Between versions 6.6.1 and 6.22.2 of react-router-dom, several updates and fixes were implemented. Here's a summary of the key changes:

Version 6.22.2 (February 28, 2024):

Patch Changes:
- Preserved hydrated errors during partial hydration runs. (reactrouter.com)

Version 6.22.1 (February 16, 2024):

Patch Changes:
- Fixed encoding/decoding issues with pre-encoded dynamic parameter values. (reactrouter.com)

Version 6.22.0 (February 1, 2024):

What's Changed:
- Core Web Vitals Technology Report Flag: Introduced a window.__reactRouterVersion variable to help identify sites using React Router for Core Web Vitals reporting. (reactrouter.com)

Version 6.21.3 (December 13, 2023):

Patch Changes:
- Fixed NavLink isPending when a basename is used.
- Removed leftover unstable_ prefix from Blocker/BlockerFunction types. (reactrouter.com)

Version 6.21.2 (December 6, 2023):

Patch Changes:
- Leveraged useId for internal fetcher keys when available. (reactrouter.com)

Version 6.21.1 (November 29, 2023):

Patch Changes:
- Fixed bug with route.lazy not working correctly on initial SPA load when v7_partialHydration is specified. (reactrouter.com)

Version 6.21.0 (November 22, 2023):

What's Changed:
- future.v7_relativeSplatPath: Fixed a splat route path-resolution bug.
- Partial Hydration: Added a new future.v7_partialHydration future flag for partial hydration of a data router during Server-Side Rendering. (reactrouter.com)

Version 6.20.1 (December 1, 2023):

Patch Changes:
- Reverted the useResolvedPath fix for splat routes due to a large number of applications relying on the previous behavior. (reactrouter.com)

Version 6.20.0 (November 22, 2023):

Minor Changes:
- Exported the PathParam type from the public API.
Patch Changes:
- Fixed resolveTo path resolution in splat routes. (reactrouter.com)

Version 6.19.0 (November 16, 2023):

What's Changed:
- unstable_flushSync API: Introduced an option to opt into synchronous DOM updates for pending/optimistic UI.
Minor Changes:
- Added unstable_flushSync option to useNavigate/useSubmit/fetcher.load/fetcher.submit.
- Removed the unstable_ prefix from the useBlocker hook. (reactrouter.com)

Version 6.18.0 (October 16, 2023):

What's Changed:
- View Transitions: Added experimental support for the View Transitions API in React Router.
Minor Changes:
- Added support for view transitions. (reactrouter.com)

Version 6.17.0 (October 16, 2023):

What's Changed:
- View Transitions: Introduced experimental support for the View Transitions API in React Router.
Minor Changes:
- Added support for view transitions. (reactrouter.com)

Version 6.16.0 (September 19, 2023):

Minor Changes:
- Added support for the View Transitions API.
Patch Changes:
- Fixed ErrorResponse type to avoid leaking internal field. (reactrouter.com)

Version 6.15.0 (August 15, 2023):

Minor Changes:
- Added support for the View Transitions API.
Patch Changes:
- Fixed ErrorResponse type to avoid leaking internal field. (reactrouter.com)

Version 6.14.0 (July 18, 2023):

Minor Changes:
- Added support for the View Transitions API.
Patch Changes:
- Fixed ErrorResponse type to avoid leaking internal field. (reactrouter.com)

Version 6.13.0 (June 20, 2023):

Minor Changes:
- Added support for the View Transitions API.
Patch Changes:
- Fixed ErrorResponse type to avoid leaking internal field. (reactrouter.com)

Version 6.12.0 (June 6, 2023):

What's Changed:
- React.startTransition Support: Improved support for suspending components by wrapping internal router state updates in React.startTransition. (reactrouter.com)

Version 6.7.0 (January 18, 2023):

Minor Changes:
- Added unstable_useBlocker/unstable_usePrompt hooks for blocking navigations within the app's location origin.
- Added preventScrollReset prop to <Form>. (reactrouter.com)

Version 6.6.2 (January 9, 2023):

Patch Changes:
- Ensured useId consistency during SSR. (reactrouter.com)

Version 6.6.1 (December 23, 2022):

Patch Changes:
- Included submission info in shouldRevalidate on action redirects.
- Reset actionData on action redirect to current location. (reactrouter.com)

For a comprehensive list of changes, you can refer to the React Router changelog.

Citations:

🌐 Web query:

@types/react-router-dom version 5 to version 6 changes

💡 Result:

When upgrading from @types/react-router-dom version 5 to version 6, several significant changes have been introduced to align with the updates in React Router v6. Here's a summary of the key differences:

Replacement of Switch with Routes:
- Version 5: Used <Switch> to render the first matching route.
- Version 6: Replaced <Switch> with <Routes>, which automatically selects the best match based on a new ranking system.
Changes in Route Definition:
- Version 5: Routes were defined using the component or render props.
- Version 6: Introduced the element prop, where you pass a JSX element directly.
Removal of the exact Prop:
- Version 5: The exact prop was used to ensure that routes matched exactly.
- Version 6: Routes now match exactly by default, making the exact prop unnecessary.
Introduction of useNavigate Hook:
- Version 5: Used the useHistory hook for programmatic navigation.
- Version 6: Replaced useHistory with useNavigate, providing a more intuitive API for navigation.
Changes to NavLink Component:
- Version 5: Supported activeClassName and activeStyle props to style active links.
- Version 6: Removed activeClassName and activeStyle; instead, you can now pass a function to the className or style props to conditionally apply styles based on the link's active state.
Replacement of Redirect with Navigate:
- Version 5: Used the Redirect component to navigate programmatically.
- Version 6: Replaced Redirect with the Navigate component for navigation.
Enhanced Nested Routes and Relative Routing:
- Version 5: Nested routes required manual path construction.
- Version 6: Simplified nested routes with relative paths, reducing boilerplate code.

These changes aim to simplify routing in React applications, improve performance, and provide a more intuitive developer experience. (reactrouter.com)

Citations:

1: https://reactrouter.com/6.30.0/upgrading/v5?utm_source=openai

🌐 Web query:

react-router-dom v6 history package changes

💡 Result:

Changes to the History Package in react-router-dom v6

React Router v6 introduced major changes regarding routing history management compared to previous versions. Here are the most significant updates and their implications:

1. Removal of Direct history Object Usage

In v5 and earlier, React Router exposed the history object, which developers could use directly for navigation (e.g., history.push, history.replace, history.go, etc.)[6][2].
v6 removed direct access to the history object as part of its effort to simplify the API and reduce ambiguity. Hooks like useHistory are no longer present. This also means the history package is not exposed as a public API for typical navigation tasks[6].

2. Introduction of useNavigate Hook

The new useNavigate hook replaces the navigation methods previously found on the history object.
With useNavigate, you perform navigations by calling navigate(to, options):
- For a push: navigate('/path')
- For a replace: navigate('/path', { replace: true })
- To move in history: navigate(-1) (back), navigate(1) (forward), etc.[2][5][6]

3. Replacing go, goBack, and goForward

Functions like go, goBack, and goForward (previously from history or useHistory) are handled by passing numbers to navigate, which moves the pointer in the browser history stack.
```
// v5
history.goBack();
history.goForward();
history.go(-2);

// v6
navigate(-1); // back
navigate(1);  // forward
navigate(-2); // two pages back
```
[2][5][6]

4. Redirection API Changes

The <Redirect> component is removed and replaced with <Navigate>, which also uses the navigation API based on useNavigate[2][5].

5. No More useHistory or history Prop

The useHistory hook and the history prop (sometimes passed to components) are no longer available in v6. Navigation must use the new hooks and components[6].
The direct use of the history instance is strongly discouraged, and any internal implementation details or workarounds (like using internal "unsafe" APIs) are not stable and can break at any time[7].

6. Handling Suspense and Navigation

The new navigation system is "suspense-aware", ensuring consistent history management when React suspends for data loading. For example, when navigating while data is loading, repeated navigations may be collapsed to only the final destination to avoid unwanted history entries[6].

Summary Table: v5 vs v6 Navigation and History

Feature	React Router v5	React Router v6 & later
Access `history`	Direct via hook/prop	Not exposed, use `useNavigate()`
Navigation methods	`history.push()`, `.replace()`	`navigate(to, {replace})`
History movement	`history.go()`, `.goBack()`, etc.	`navigate(number)`
Redirect	`<Redirect />`	`<Navigate />`
`useHistory` hook	Yes	Removed

Migration Notes

Update code to use useNavigate instead of direct history manipulation.
Use <Navigate /> instead of <Redirect />.
Remove any dependencies on useHistory or the history object in components.
For advanced or low-level history needs, React Router v6 emphasizes using provided hooks and APIs, not history object manipulation[2][6][7].

React Router v6’s approach streamlines navigation and improves compatibility with React’s latest features, but applications that rely heavily on the history object or useHistory hook will require code updates during migration. For a more comprehensive upgrade guide, refer to the official documentation[2][6].

Citations:

@matt-fidd I've collected the release notes for the packages bumped in this PR:

Package Version Changes

react-router-dom: 6.6.1 → 6.22.2
@types/react-router-dom: 5.3.3 → 6.22.0
history: 5.3.0 (removed)

Release Notes

react-router-dom (6.6.1 → 6.22.2)

New Features

Added View Transitions API support for smoother page transitions
Added unstable_flushSync option for synchronous DOM updates (v6.19.0)
Introduced unstable_useBlocker for navigation blocking (v6.7.0), later stabilized by removing the unstable_ prefix
Added support for React.lazy with route definitions
Added basename prop to RouterProvider
Added future flags for v7 compatibility (v7_normalizeFormMethod, v7_partialHydration, etc.)

Bug Fixes

Fixed encoding/decoding issues with URL parameters
Fixed memory leaks in development mode
Resolved issues with NavLink and basename
Fixed route matching and path resolution problems
Improved handling of hydrated errors during partial hydration

Other Changes

Added window.__reactRouterVersion for Core Web Vitals reporting
Improved TypeScript type definitions
Enhanced React 18 compatibility with useId and transitions

@types/react-router-dom (5.3.3 → 6.22.0)

This major version upgrade includes TypeScript definitions aligned with react-router-dom v6 API changes:

Updated types to reflect Switch being replaced with Routes
Changed route definition types from component prop to element prop
Removed exact prop types as routes now match exactly by default
Added types for useNavigate hook (replacing useHistory)
Updated NavLink component types to use function-based className/style props
Added types for Navigate component (replacing Redirect)
Enhanced type definitions for nested routes and relative routing

history (5.3.0) - Removed

The history package was removed because:

react-router-dom v6 no longer exposes the direct history object
Navigation is now handled through the useNavigate hook:
- navigate('/path') replaces history.push()
- navigate('/path', { replace: true }) replaces history.replace()
- navigate(-1) replaces history.goBack()
- navigate(1) replaces history.goForward()
The useHistory hook has been removed entirely
Any direct history manipulation is discouraged in the new architecture

These changes represent a significant update to the routing system with improved React 18 compatibility and preparation for future React Router v7 features.

coderabbitai · 2025-05-19T04:16:46Z

Walkthrough

This pull request updates several dependencies in the package.json files for both the @actual-app/components package and the desktop client. The react-aria-components dependency is updated from version ^1.7.1 to ^1.8.0 in both packages. Additionally, the desktop client receives updates to react-aria, react-grid-layout, react-hotkeys-hook, react-router-dom, and react-stately, each incremented to newer versions. No changes were made to the declarations of exported or public entities.

Possibly related PRs

Upgrade React Aria packages and address deprecated Section component warnings #4572: Updates react-aria-components and related dependencies, and also modifies component imports and replaces deprecated components, which is related at the dependency update level.

Suggested labels

:sparkles: merged

Suggested reviewers

matt-fidd
joel-jeremy

Note

⚡️ AI Code Reviews for VS Code, Cursor, Windsurf

CodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback.
Learn more here.

Note

⚡️ Faster reviews with caching

CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.
Enjoy the performance boost—your workflow just got faster.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e950bbb and 873cbcd.

⛔ Files ignored due to path filters (2)

upcoming-release-notes/5027.md is excluded by !**/*.md
yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (2)

packages/component-library/package.json (1 hunks)
packages/desktop-client/package.json (1 hunks)

🔇 Additional comments (4)

packages/desktop-client/package.json (4)

66-66:
✅ Verification successful

Upgrade react-router-dom to 6.30.0
Ensure no remnants of deprecated APIs (e.g., useHistory) and that new features (like route transition hooks) are not inadvertently breaking existing routes.

Run these searches:

🏁 Script executed:
#!/bin/bash
# Find any old history hooks
rg "useHistory" -n packages/desktop-client/src

# Confirm correct use of <Routes> and `useNavigate`
rg "useNavigate" -n packages/desktop-client/src
Length of output: 12300
No deprecated navigation APIs detected after upgrade to react-router-dom 6.30.0
I searched for useHistory (0 occurrences) and confirmed that all navigation now uses your custom useNavigate hook wrapping React Router’s useNavigate. There are no remnants of deprecated APIs, so this upgrade is safe to merge.

60-61:
❓ Verification inconclusive

Bump react-grid-layout to ^1.5.1 and react-hotkeys-hook to ^4.6.2
These UI utility libraries may introduce new options or deprecate old props. Check your layout callbacks and hotkey definitions for any signature changes.

Search for common API usages:

🏁 Script executed:
#!/bin/bash
# Verify grid layout usage
rg "onLayoutChange" -n packages/desktop-client/src

# Verify hotkeys usage
rg "useHotkeys" -n packages/desktop-client/src
Length of output: 4012
Verify onLayoutChange and useHotkeys API signatures after bump
We’ve located your key usages—please confirm they still match the updated libraries’ callbacks:

• onLayoutChange in

packages/desktop-client/src/components/reports/Overview.tsx (lines 183, 528–529)
• useHotkeys across multiple components, e.g.:

SelectedTransactionsButton.tsx

TransactionsTable.tsx

FiltersMenu.jsx

DynamicBudgetTable.tsx

Titlebar.tsx

accounts/Header.tsx

HelpMenu.tsx

common/Modal.tsx

Ensure none of these signatures changed in react-grid-layout@^1.5.1 or react-hotkeys-hook@^4.6.2—update your callbacks or options objects if needed.

69-69:
✅ Verification successful

Upgrade react-stately to ^3.37.0
Matches the ARIA/stately ecosystem updates. Validate that any updated state hooks (e.g., useTreeState, useMenuState) still behave as expected.

Check for state-hook usage:

🏁 Script executed:
#!/bin/bash
# Search for stately hooks
rg "useTreeState" -n packages/desktop-client/src || rg "useMenuState" -n packages/desktop-client/src
Length of output: 97
No usage of Tree/Menu state hooks found
A search in packages/desktop-client/src returned no occurrences of useTreeState or useMenuState. Upgrading react-stately to ^3.37.0 is safe, as none of the affected state hooks are used.

Verified with:

rg "useTreeState" -n packages/desktop-client/src

rg "useMenuState" -n packages/desktop-client/src

54-55:
❓ Verification inconclusive

Upgrade react-aria to ^3.39.0 and react-aria-components to ^1.8.0
Syncing these packages ensures consistent ARIA support. Validate that any new hooks or props in v3.39.0/v1.8.0 are reflected correctly in your code.

Use the following to search for imports and run tests:

🏁 Script executed:
#!/bin/bash
# Check all imports of react-aria and react-aria-components
rg "from ['\"]react-aria" -n packages/desktop-client/src
rg "from ['\"]react-aria-components" -n packages/desktop-client/src

# Run desktop-client test suite
cd packages/desktop-client && npm test
Length of output: 7550
Verify ARIA package upgrade and test suite configuration
All imports of react-aria and react-aria-components in packages/desktop-client/src are already on versions ^3.39.0 / ^1.8.0, but the Vitest suite failed to run (vitest: not found). Before merging, please:
Add or restore vitest in packages/desktop-client/package.json’s devDependencies (or adjust the test script to use your preferred runner).
Reinstall dependencies and confirm that npm test passes:
cd packages/desktop-client
npm install
npm test
Validate any new hooks or props introduced in v3.39.0 / v1.8.0 are used correctly across:

packages/desktop-client/src/components/… imports of react-aria

packages/desktop-client/src/components/… imports of react-aria-components

packages/component-library/package.json

react deps

b2fb1ed

actual-github-bot bot changed the title ~~⬆️ upgrade react dependencies to their newest minor version~~ [WIP] ⬆️ upgrade react dependencies to their newest minor version May 19, 2025

actual-github-bot bot added the 🚧 WIP label May 19, 2025

note

873cbcd

matt-fidd added the dependencies Pull requests that update a dependency file label May 19, 2025

matt-fidd changed the title ~~[WIP] ⬆️ upgrade react dependencies to their newest minor version~~ ⬆️ upgrade react dependencies to their newest minor version May 19, 2025

actual-github-bot bot added 🔍 ready for review and removed 🚧 WIP labels May 19, 2025

coderabbitai bot reviewed May 19, 2025

View reviewed changes

packages/component-library/package.json Show resolved Hide resolved

joel-jeremy approved these changes May 20, 2025

View reviewed changes

actual-github-bot bot added ✅ approved and removed 🔍 ready for review labels May 20, 2025

matt-fidd merged commit 4dba958 into actualbudget:master May 20, 2025
25 of 26 checks passed

actual-github-bot bot added ✨ merged and removed ✅ approved labels May 20, 2025

matt-fidd deleted the react-deps branch August 5, 2025 06:09

coderabbitai bot mentioned this pull request Aug 6, 2025

[WIP] ♻️ bump component-library dependencies #5498

Open

6 tasks

Uh oh!

⬆️ upgrade react dependencies to their newest minor version #5027

⬆️ upgrade react dependencies to their newest minor version #5027

Uh oh!

Conversation

matt-fidd commented May 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented May 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for actualbudget ready!

Uh oh!

matt-fidd commented May 19, 2025

Uh oh!

github-actions bot commented May 19, 2025

Bundle Stats — desktop-client

Uh oh!

github-actions bot commented May 19, 2025

Bundle Stats — loot-core

Uh oh!

coderabbitai bot commented May 19, 2025

Package Bumps Summary

Release Notes

react-router-dom (6.6.1 → 6.22.2)

New Features

Bug Fixes

Breaking Changes

@types/react-router-dom (5.3.3 → 6.22.0)

history package (removed)

Changes to the History Package in react-router-dom v6

Migration Notes

Package Version Changes

Release Notes

react-router-dom (6.6.1 → 6.22.2)

New Features

Bug Fixes

Other Changes

@types/react-router-dom (5.3.3 → 6.22.0)

history (5.3.0) - Removed

Uh oh!

coderabbitai bot commented May 19, 2025

Walkthrough

Possibly related PRs

Suggested labels

Suggested reviewers

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

matt-fidd commented May 19, 2025 •

edited

Loading

netlify bot commented May 19, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)