Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Update internal caching #2085

Merged
merged 10 commits into from
Mar 6, 2025
Merged

fix: Update internal caching #2085

merged 10 commits into from
Mar 6, 2025

Conversation

cpcramer
Copy link
Contributor

@cpcramer cpcramer commented Mar 5, 2025

What changed? Why?

Fixed excessive network requests by properly implementing React Query caching across multiple hooks:

Adding caching for Avatar, ENS, Basenames, and Socials (twitter, farcaster, github, etc.).

Performance benefits impacting multiple different hooks and components such as: Identity, Swap, Wallet, and NFT components!

  • Added proper staleTime configuration to prevent redundant fetches on component re-renders
  • Simplified query functions for better maintainability
  • Ensured consistent cache configuration across all hooks
  • This resolves an issue where opening the WalletDropdown triggered ~7 network requests each time (~200ms for each call), potentially causing API throttling. Data is now properly cached between interactions, significantly reducing API calls and improving performance.

Every time the WalletDropdown was clicked and re-rendered, it would trigger new network requests. This happened because:

Default staleTime is 0: React Query considers data "stale" immediately after it's fetched when no staleTime is specified. This means:
By default, every time a component re-renders, React Query will trigger a background refetch
Even though the data is cached, it's marked as "needs refreshing" right away
Before After

Clipboard-20250305-233243-134

Clipboard-20250305-233414-397

Significant performance improvements: Reduced Network Overhead: Eliminating redundant API calls (from ~7 requests down to 1 per interaction) is a substantial optimization, especially for components that are frequently re-rendered. Improved User Experience: The ~200ms saved per interaction creates a noticeably smoother experience, particularly for wallet interactions which should feel instantaneous. API Efficiency: Preventing potential API throttling ensures reliable service for users and reduces backend load.

Notes to reviewers

How has it been tested?

Copy link

vercel bot commented Mar 5, 2025

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

Name Status Preview Comments Updated (UTC)
onchainkit-coverage ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 6, 2025 0:08am
onchainkit-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 6, 2025 0:08am
onchainkit-routes ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 6, 2025 0:08am

@cpcramer cpcramer changed the title Paul/identity optimizations fix: Update Caching for Identity components Mar 5, 2025
@cpcramer cpcramer changed the title fix: Update Caching for Identity components fix: Update Caching for Identity hooks Mar 5, 2025
@cpcramer cpcramer merged commit 5156cdd into main Mar 6, 2025
16 checks passed
@cpcramer cpcramer deleted the paul/identity-optimizations branch March 6, 2025 00:10
@cpcramer cpcramer changed the title fix: Update caching for Identity hooks fix: Update internal caching Mar 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

3 participants