feat: upgrade to react 19 and add document metadata support#1993
feat: upgrade to react 19 and add document metadata support#1993zmjohnso wants to merge 2 commits intogetAlby:masterfrom
Conversation
|
@zmjohnso thanks for the PR, and thanks for keeping it simple. The other React 19 features and refactoring are not a priority for us right now, but thanks for the offering to work on it. |
📝 WalkthroughWalkthroughThis pull request upgrades React and React DOM to version 19 with corresponding type definitions, updates documentation, and implements page title functionality across the frontend by adding a new optional Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
frontend/src/screens/ConnectAlbyAccount.tsx (1)
136-142: Consider extractingAlbyProIconoutside the component.Defining a component function inside another component causes it to be recreated on every render, preventing React from optimizing reconciliation. Since
AlbyProIconhas no dependencies on the parent's scope, it can be moved outside.♻️ Proposed refactor
+function AlbyProIcon() { + return ( + <div className="absolute right-2 top-2" title="Pro"> + <SparklesIcon className="size-4" /> + </div> + ); +} + export function ConnectAlbyAccount({ connectUrl }: ConnectAlbyAccountProps) { return ( <> ... </> ); - - function AlbyProIcon() { - return ( - <div className="absolute right-2 top-2" title="Pro"> - <SparklesIcon className="size-4" /> - </div> - ); - } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/screens/ConnectAlbyAccount.tsx` around lines 136 - 142, AlbyProIcon is defined inside the parent component which causes it to be re-created on every render; move the function AlbyProIcon out of the parent ConnectAlbyAccount component (or file scope) as a top-level pure component, keep its JSX unchanged (the div with className "absolute right-2 top-2" and SparklesIcon), and update the parent to reference the top-level AlbyProIcon so React can reuse the component between renders.frontend/src/screens/Intro.tsx (1)
65-67: Consider a more specific title for the carousel route.Line 66 is pretty generic for the intro flow. A label like
Getting StartedorIntrowould make tabs/history easier to scan next to the later onboarding screens.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/screens/Intro.tsx` around lines 65 - 67, Update the page title used in the Intro component to be specific to the carousel/onboarding flow: replace the generic <title>Welcome - Alby Hub</title> with a more descriptive label such as <title>Getting Started - Alby Hub</title> (or "Intro - Alby Hub") so browser tabs and history entries referencing this component (Intro.tsx) and the Carousel element (Carousel, setApi) are easier to scan during onboarding.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/package.json`:
- Line 56: Remove the unmaintained "react-lottie" dependency from package.json
and add "lottie-react"@2.4.1 instead; then update the Lottie component import in
frontend/src/components/LottieLoading.tsx to use the lottie-react API (replace
any imports referencing "react-lottie" and its <Lottie> usage with the
corresponding export from "lottie-react"), adapt prop names and event/callback
usage to lottie-react's API, run install and exercise the animations to confirm
behavior.
In `@frontend/src/screens/subwallets/SubwalletList.tsx`:
- Around line 81-84: The route title is set after the component's data-dependent
early return so the tab can show the old title while Sub-wallets loads; move the
AppHeader (the JSX using <AppHeader title="Sub-wallets" pageTitle="Sub-wallets"
...>) above the loading guard in the SubwalletList component so the title is
rendered immediately (i.e., hoist the AppHeader render before the
early-return/loading check used to short-circuit rendering).
---
Nitpick comments:
In `@frontend/src/screens/ConnectAlbyAccount.tsx`:
- Around line 136-142: AlbyProIcon is defined inside the parent component which
causes it to be re-created on every render; move the function AlbyProIcon out of
the parent ConnectAlbyAccount component (or file scope) as a top-level pure
component, keep its JSX unchanged (the div with className "absolute right-2
top-2" and SparklesIcon), and update the parent to reference the top-level
AlbyProIcon so React can reuse the component between renders.
In `@frontend/src/screens/Intro.tsx`:
- Around line 65-67: Update the page title used in the Intro component to be
specific to the carousel/onboarding flow: replace the generic <title>Welcome -
Alby Hub</title> with a more descriptive label such as <title>Getting Started -
Alby Hub</title> (or "Intro - Alby Hub") so browser tabs and history entries
referencing this component (Intro.tsx) and the Carousel element (Carousel,
setApi) are easier to scan during onboarding.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 9d735ce6-2bf4-4edf-bd3d-0fe145b38b74
⛔ Files ignored due to path filters (1)
frontend/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (22)
README.mdfrontend/package.jsonfrontend/src/components/AppHeader.tsxfrontend/src/components/SettingsHeader.tsxfrontend/src/screens/ConnectAlbyAccount.tsxfrontend/src/screens/CreateNodeMigrationFileSuccess.tsxfrontend/src/screens/Home.tsxfrontend/src/screens/Intro.tsxfrontend/src/screens/NotFound.tsxfrontend/src/screens/Start.tsxfrontend/src/screens/Unlock.tsxfrontend/src/screens/Welcome.tsxfrontend/src/screens/alby/AlbyEarn.tsxfrontend/src/screens/alby/SupportAlby.tsxfrontend/src/screens/apps/Connections.tsxfrontend/src/screens/channels/Channels.tsxfrontend/src/screens/peers/Peers.tsxfrontend/src/screens/settings/Settings.tsxfrontend/src/screens/setup/SetupPassword.tsxfrontend/src/screens/subwallets/SubwalletIntro.tsxfrontend/src/screens/subwallets/SubwalletList.tsxfrontend/src/screens/wallet/index.tsx
| "react-day-picker": "^9.11.0", | ||
| "react-dom": "18.3.1", | ||
| "react-dom": "^19.0.0", | ||
| "react-lottie": "^1.2.4", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check react-lottie usage and look for potential alternatives
# Find all usages of react-lottie in the codebase
echo "=== react-lottie usage in codebase ==="
rg -n "react-lottie|from ['\"]react-lottie['\"]" --type ts --type tsx || rg -n "react-lottie" -g "*.tsx" -g "*.ts"
# Check the react-lottie package for deprecated lifecycle methods
echo -e "\n=== Checking react-lottie source for deprecated APIs ==="
if [ -d "frontend/node_modules/react-lottie" ]; then
rg -n "componentWillMount|componentWillReceiveProps|componentWillUpdate|findDOMNode" frontend/node_modules/react-lottie/
fiRepository: getAlby/hub
Length of output: 275
🌐 Web query:
Is react-lottie compatible with React 19?
💡 Result:
No, react-lottie (the package from chenqingspring/react-lottie, npm react-lottie v1.2.10) is not compatible with React 19. Its peer dependency is react >=15.0.0 with dev deps on react ^15.6.2, and the repo shows no updates for React 19 support. Open issues like autoplay bugs remain unresolved since 2018. It may install with overrides but lacks official support and testing.
Citations:
- 1: https://www.npmjs.com/package/react-lottie
- 2: https://www.npmjs.com/package/react-lottie?activeTab=versions
- 3: https://github.com/chenqingspring/react-lottie
- 4: Animation plays itself when a state changes chenqingspring/react-lottie#32
- 5: https://github.com/chenqingspring/react-lottie/issues
- 6: Upgrade to support react v19 Gamote/lottie-react#122
- 7: feat: update
peerDependenciesto support React 19 Gamote/lottie-react#121 - 8: Support for React 19 mifi/react-lottie-player#128
- 9: https://www.npmjs.com/package/lottie-react
- 10: https://npm-compare.com/lottie-react,react-lottie
🏁 Script executed:
# Check React version in frontend/package.json
head -60 frontend/package.json | tail -20Repository: getAlby/hub
Length of output: 681
🌐 Web query:
Is lottie-react actively maintained and compatible with React 19?
💡 Result:
Yes, lottie-react (the most popular package from Gamote/lottie-react on npm with 1.7M weekly downloads) is actively maintained and compatible with React 19. It had recent commits as late as 2026-03-03, latest release v2.4.1 on 2025-01-22. Peer dependencies explicitly include React ^19.0.0 (updated via merged PR #121). Users report successful installation with React 19 after v2.4.1, though some SSR issues in Next.js can be fixed with dynamic imports (issue #122 remains open for ongoing reports but core compatibility resolved).
Citations:
- 1: https://github.com/Gamote/lottie-react
- 2: https://lottiereact.com/
- 3: https://www.npmjs.com/package/lottie-react
- 4: Upgrade to support react v19 Gamote/lottie-react#122
- 5: feat: update
peerDependenciesto support React 19 Gamote/lottie-react#121
Remove react-lottie — it is incompatible with React 19 and no longer maintained.
The project uses React 19.0.0, but react-lottie (^1.2.4) has no support for React 19 and hasn't been updated since 2018. Using it with React 19 will likely cause runtime errors or unexpected behavior.
Replace it with lottie-react (v2.4.1), which is actively maintained, explicitly supports React 19, and has significantly higher adoption (1.7M weekly downloads). Update the import in frontend/src/components/LottieLoading.tsx and test animations thoroughly.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/package.json` at line 56, Remove the unmaintained "react-lottie"
dependency from package.json and add "lottie-react"@2.4.1 instead; then update
the Lottie component import in frontend/src/components/LottieLoading.tsx to use
the lottie-react API (replace any imports referencing "react-lottie" and its
<Lottie> usage with the corresponding export from "lottie-react"), adapt prop
names and event/callback usage to lottie-react's API, run install and exercise
the animations to confirm behavior.
| <AppHeader | ||
| title="Sub-wallets" | ||
| pageTitle="Sub-wallets" | ||
| description="Create sub-wallets for yourself, friends, family or coworkers" |
There was a problem hiding this comment.
Set the route title before the loading branch.
Line 83 only takes effect after the data-dependent early return above is bypassed, so the tab can keep the previous page title while Sub-wallets is loading. Hoist the route title above the loading guard so navigation updates immediately.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/screens/subwallets/SubwalletList.tsx` around lines 81 - 84, The
route title is set after the component's data-dependent early return so the tab
can show the old title while Sub-wallets loads; move the AppHeader (the JSX
using <AppHeader title="Sub-wallets" pageTitle="Sub-wallets" ...>) above the
loading guard in the SubwalletList component so the title is rendered
immediately (i.e., hoist the AppHeader render before the early-return/loading
check used to short-circuit rendering).
3 participants
This PR updates to React 19. See #1851
It also tests utilizes React 19's support for document metadata tags to add titles to top level routes, as suggested in #1851. This addresses #1837.
Tab title:
History:
These titles are mostly examples. Might want to update to something that makes more sense; I also might have missed pages. But if it is okay to go ahead with the React 19 upgrade, this should be easy to update in the future.
Additionally, if this looks good, I will work on additional follow-up PRs to take advantage of other React 19 features, such as form actions and
useTransition, as mentioned in #1851. But this would be a substantially larger refactor.Summary by CodeRabbit
New Features
Chores