DEV Community: Victor Ajadi

Smart Query-Aware Cache Invalidation: Solving Mongoose Performance at Scale

Victor Ajadi — Sun, 14 Jun 2026 04:19:56 +0000

The Mongoose Caching Problem (And How We Solved It)

From 300 RPS to 700+ RPS: A 2.2x Performance Breakthrough

When you're building a Node.js application with MongoDB, you quickly hit a wall: your database can't handle the query volume. You add caching. But caching is fraught with pitfalls-cache stampedes, stale data, invalidation nightmares.

We built @mongoose-performance-cache to solve this once and for all. Here's what we learned.

The Problem: Why Your Mongoose App Feels Slow

Let me paint a scenario. You have a typical SaaS API:

// User authentication - runs thousands of times
app.get('/api/user/:id', async (req, res) => {
  const user = await User.findById(req.params.id);
  res.json(user);
});

// Popular reports - same query, different users
app.get('/api/reports/active', async (req, res) => {
  const reports = await Report.find({ status: 'active' });
  res.json(reports);
});

Each request hits MongoDB. At 100 concurrent users:

500+ database queries per second
MongoDB CPU at 85%+
P99 latency: 500ms+
Users complaining: "Why is this so slow?"

You need caching. But here's where it gets tricky.

Caching is Hard (For Good Reason)

Traditional caching with Redis is deceptively simple:

// Naive caching approach
async function getActiveReports(req, res) {
  const cached = await redis.get('active_reports');
  if (cached) return res.json(JSON.parse(cached));

  const reports = await Report.find({ status: 'active' });
  await redis.set('active_reports', JSON.stringify(reports), 'EX', 300);
  res.json(reports);
}

Looks clean. But in production, it breaks in three catastrophic ways:

Problem 1: The Cache Stampede

It's 2:59:55 PM. Your cache expires in 5 seconds.

2:59:55 - 100 concurrent requests arrive
2:59:59 - Cache expires
3:00:00 - All 100 requests query MongoDB
         (not 100 queries in sequence, but 100 in parallel)
         ↓
         MongoDB CPU: 95%+, P99 Latency: 2000ms+

This is called a cache stampede or thundering herd. Your database crashes right when it matters most.

Problem 2: Invalidation Hell

You need to update a report:

// Update the report
await Report.findByIdAndUpdate(reportId, { status: 'completed' });

// Now what? The cache says it's still 'active'
// Do you clear the entire 'active_reports' cache?
// Do you clear all report caches?
// Do you manually track which queries are affected?

Most teams pick option 2: clear everything. Your hit rate plummets.

Problem 3: Concurrent Writes

Multiple requests update the same document:

Request A: Update report status → Queue update → Cache in 50ms
Request B: Update report name  → Queue update → Cache in 100ms

What gets cached? The result of B (name change), but A's status change is lost.

The Solution: Intelligent Caching

We built @mongoose-performance-cache to solve all three problems automatically.

1. Cache Stampede Protection

When multiple concurrent requests hit the same uncached query, only one database query executes. The rest share the result.

import { initCache } from '@mongoose-performance-cache';

const cache = initCache({ ttl: 600 });
cache.applyCacheToQueries(ReportSchema);

// 100 concurrent requests
const reports = await Report.find({ status: 'active' });

// Result: 1 MongoDB query, 100 shared responses
// Not 100 queries. Not throttled. Just smart.

Impact: Eliminated cache stampedes entirely. No more thundering herd.

2. Smart Query-Aware Invalidation

Here's where it gets clever:

// This query is cached
const activeReports = await Report.find({ status: 'active' });

// Update report - change the name
await Report.findByIdAndUpdate(reportId, { name: 'Q4 Report' });

// What happens to the cache?
// The system automatically determines:
// "Does 'name' appear in the query filter?"
// "No. So don't invalidate."
// ✅ Cache remains valid

// Now update the status
await Report.findByIdAndUpdate(reportId, { status: 'completed' });

// The system determines:
// "Does 'status' appear in the query filter?"
// "Yes. Invalidate this specific query."
// ✅ Only relevant queries cleared

This isn't guessing. It's pattern matching on your actual query filters.

Impact: 70% higher hit rates in write-heavy workloads. The cache stays valid longer.

3. Batch Write Optimization

Instead of flushing each cache write individually:

Traditional: 1000 writes → 1000 Redis operations → Network overhead
v1.2:        1000 writes → Batch queue → 40 Redis operations (deduped)

The library groups cache writes into 50ms batches, automatically deduplicating them. If the same key is written twice, only the latest write persists.

Impact: 60% fewer Redis operations. Smoother latency.

The Results: Benchmarks That Matter

We stress-tested this on real hardware (Lenovo 14 Ada: 2-core @ 1.2GHz, 5.88GB RAM) with a realistic workload:

v1.1 Performance (Before)
├─ Throughput: 300-350 RPS
├─ P50 Latency: ~120ms
├─ P95 Latency: ~250ms
└─ P99 Latency: ~500ms

v1.2 Performance (After)
├─ Throughput: 705-708 RPS ⬆️ 2.2x
├─ P50 Latency: ~70ms ⬆️ 42% faster
├─ P95 Latency: ~95ms ⬆️ 62% faster
└─ P99 Latency: ~150ms ⬆️ 70% faster

Test details: 50 concurrent clients, 60-second duration, 70% read / 15% write / 15% aggregate operations.

Production Grade: The Audit Story

Before shipping this, we ran a comprehensive audit across 45,534 real-world operations:

What we verified:

✅ Zero data corruption (100% success rate)
✅ Proper invalidation semantics (every edge case tested)
✅ Memory safety under load (no OOM crashes)
✅ Serialization accuracy (BSON types handled correctly)
✅ Distributed cache consistency (Redis pub/sub working)

Data Integrity Score: 9.6/10

We found (and fixed) three minor issues:

Size estimation was ±80% off (now ±20%)
$pull operator missing type safety (now validated)
Geospatial queries weren't cache-safe (now rejected)

All fixes were straightforward. No architectural flaws. No data corruption vectors.

How It Works: Just Three Lines

import { initCache } from '@mongoose-performance-cache';

// 1. Initialize once
const cache = initCache({ 
  ttl: 600,                    // 10 minutes
  enableSmartInvalidation: true // Smart invalidation
});

// 2. Apply to your schemas
cache.applyCacheToQueries(UserSchema);
cache.applyCacheToQueries(ReportSchema);
cache.applyCacheToQueries(ProjectSchema);

// 3. Use Mongoose normally
const users = await User.find({ status: 'active' });
const reports = await Report.find({ published: true });

// That's it. Caching works automatically.
// Invalidation happens automatically.
// No manual cache busting.

The Architecture: Why It's Different

Traditional caching treats the cache as a simple key-value store. We treat it as an extension of Mongoose itself.

Standard Caching:
User Logic → Cache Layer → Database
            (dumb, knows nothing about queries)

Our Approach:
User Logic → Mongoose Hooks → Smart Cache → Database
                              (knows query structure)
                              (understands invalidation)
                              (prevents stampedes)

Key innovations:

Query-aware invalidation: Matches update operations against cached query filters
Inflight coalescing: Shares database results across concurrent requests
Batch deduplication: Groups cache writes, eliminates duplicates
Memory circuit breakers: Prevents OOM by monitoring heap pressure
Event loop protection: Prevents background operations from starving requests

When to Use This

Perfect for:

High-traffic APIs (100+ req/s)
Read-heavy workloads (70%+ reads)
Applications with repeating queries
Teams that want caching without the complexity

Not needed for:

Strongly consistent requirements (financial transactions)
Very low traffic (<10 req/s)
Queries that are always unique (no repeating patterns)

The Numbers: What You Actually Save

On a typical SaaS backend (100 concurrent users, 70% cache hit rate):

Without caching:
├─ Database queries: 3000/sec
├─ MongoDB CPU: 85%+
├─ P99 latency: 500ms
└─ Database cost: $2000/month

With @mongoose-performance-cache:
├─ Database queries: 900/sec (-70%)
├─ MongoDB CPU: 25%
├─ P99 latency: 150ms (-70%)
└─ Database cost: $400/month (-80%)

That's $19,200/year in saved database costs. Plus your users get 70% faster responses.

Why We Open Sourced This

We built this for production use. It's battle-tested on real traffic. We open sourced it because:

Caching shouldn't be hard. Teams shouldn't have to solve this themselves.
The problem is universal. If you use Mongoose at scale, you need this.
Collaboration improves everything. We want the community to find edge cases we missed.

Getting Started

Install:

npm install @mongoose-performance-cache

Or on Bun:

bun add @mongoose-performance-cache

Full documentation: https://github.com/VictorAjadi/mongoose-cache

The Questions We Know You Have

Q: What about cache invalidation consistency across multiple servers?
A: We use Redis pub/sub for distributed invalidation. All instances sync automatically.

Q: Can I use this with existing caching middleware?
A: Yes. Our cache layer is independent. Works alongside other caching strategies.

Q: What happens if Redis goes down?
A: Automatic fallback to in-memory cache. No errors. Service continues working.

Q: Will this work with my existing MongoDB queries?
A: Yes. Zero code changes needed. Just call applyCacheToQueries(schema) once.

Q: How do I monitor cache performance?
A: Built-in stats: cache.getStats() returns hits, misses, hit rate, memory usage, etc.

What's Next

We're planning:

Cache analytics: Deep insights into query patterns and hit rates
Custom invalidation strategies: Plugin system for complex invalidation logic
GraphQL support: Automatic caching for GraphQL queries
Geospatial query support: Currently geo queries ($near, $geoIntersects) are rejected because exact coordinates make caching hard. We're exploring geohash-based caching (round coordinates to varying precision levels) and TTL stratification (shorter TTLs for precise queries).
Multi-database adaptation: The same patterns (stampede protection, smart invalidation, batch optimization) work for any database. Coming next:
1. PostgreSQL (Beta Q1 2025)
2. MySQL (Q2 2025)
3. DynamoDB, Cassandra, SQLite (Community-driven)

Join Us

This library is open source and actively maintained. Contributions welcome:

Report bugs or edge cases
Submit feature requests
Share your performance results
Help with documentation

The Takeaway

Caching is hard. But it doesn't have to be.

With @mongoose-performance-cache, you get:

2.2x faster responses
70% fewer database queries
Zero cache invalidation complexity
Production-grade reliability

All with three lines of code.

Try it on your next project. Or your existing one. Let us know what you think.

Ready to make your Mongoose app faster?

npm install @mongoose-performance-cache

Happy caching! 🚀

Questions? Found a bug? Have a feature idea?
Open an issue on GitHub or reach out to us on LinkedIn.

Performance numbers based on stress testing with 50 concurrent clients on Lenovo 14 Ada (2-core @ 1.2GHz, 5.88GB RAM). Results may vary based on hardware, query complexity, and data size.

Enhance Your React Applications with cards-slider-react-lib : A Feature-Rich Card Slider Library

Victor Ajadi — Sun, 23 Jun 2024 22:26:08 +0000

cards-slider-react-lib: A Customizable and Responsive React Slider Component

The card-slider-react-lib library provides a powerful and versatile React component for creating interactive and visually appealing card sliders in your web applications. This article delves into the features, usage, and customization options offered by card-slider-react-lib.

Key Features:

Responsive Design: card-slider-react-lib automatically adapts the layout to display an optimal number of cards per view based on the user's screen size. This ensures a seamless experience across various devices.
Highly Customizable: The library allows you to define the content of your cards, customize the number of cards displayed per view, and configure various other properties to match your specific requirements. You can even create custom card components for a truly unique look and feel.
Effortless Card Management: card-slider-react-lib efficiently arranges your cards dynamically based on the current index, creating a smooth and continuous sliding effect.
Interactive Navigation: The component comes with built-in navigation buttons that enable users to easily navigate through the cards, either forward or backward. You can also customize the color of these buttons for better integration with your application's design.

Properties (Props) for Customization:

array (Required): This is a mandatory property that takes an array of objects. Each object represents the content of a single card in your slider. The properties within these objects will be available as props in your custom card component.

cardNumPerView (Optional): This prop allows you to control the number of cards displayed per view. It provides manual control over the layout.

autoArrange (Optional, default: false): When enabled, this prop automatically adjusts the number of cards displayed based on the screen size, ensuring responsiveness. It overrides cardNumPerView when set to true.

buttonColor (Optional, default: '#000000'): This prop lets you customize the color of the navigation buttons to match your application's color scheme.

buttonWidth (Optional, default: '54px'): Set the width of the navigation buttons using CSS measurements (e.g., 'px', 'em').

buttonHeight (Optional, default: '54px'): Set the height of the navigation buttons using CSS measurements.

CustomCard: This is where you define your custom card component. It receives any props you pass within the <CardSlider>tag. Refer to the implementation of your CustomCard component for specific prop usage.

LeftSvgIcon (Optional): This prop allows you to override the default left navigation button with your custom SVG icon component.

RightSvgIcon (Optional): Similarly, you can override the default right navigation button with your custom SVG icon component.

slideTimeInterval (Optional, default: 3240): This prop sets the interval (in milliseconds) at which the slider auto-slides in an infinite loop.

allowSlidePerInterval (Optional): When enabled (true), this prop allows the slider to auto-slide without requiring users to click the navigation buttons. It also pauses auto-sliding when the user hovers over the slider, improving performance.

New Update

cardSpacing: this is use to give space to each card or image-card for customized display "gap"

buttonPosition: used to position the button around the slider, middle or middle-bottom or middle-top , default positioned at the right and left end of the slider container.

buttonPositionGap: when a value is passed here, it gives space to the navigation button relative to the buttonPosition

Custom Card Example

The provided example demonstrates the structure of a custom card component (CustomCard) that you can use with cards-slider-react-lib. This component renders the card content based on the props received from the CardSlidercomponent.

Basic Usage:

The usage section showcases how to integrate the CardSlider component into your React application. It demonstrates how to define card data, customize props, and create a custom card component.

Installation:

To install cards-slider-react-lib, use npm or yarn:

Bash npm install cards-slider-react-lib

Bash yarn add cards-slider-react-lib

Basic Usage:

Here's an example of integrating CardSlider into your React application:

import React from 'react';
import { CardSlider } from 'cards-slider-react-lib';
import CustomCard from './CustomCard'; // Your custom card component

const cardData = [
  { id: 1, title: 'Card 1', content: 'Content 1' },
  { id: 2, title: 'Card 2', content: 'Content 2' },
  { id: 3, title: 'Card 3', content: 'Content 3' },
  // ... more card data
];

function App() {
  return (
    <div className="App">
      <CardSlider
        `array={cardData}`
        `cardNumPerView={3}` // Or use autoArrange={true} for auto- 
        adjustment
        `buttonColor="#ff5733"`
        `buttonWidth="50px"`
        `buttonHeight="50px"`
        `CardComponent={(props) => <CustomCard {...props}
        additionalProp="1" />}`
        `cardSpacing={'30px'}` //this is use to give space to each card or 
        image-card for customized display "gap"
        `buttonPosition={'middle'}` or middle-bottom or middle-top, default 
        positioned at the end of the slider container 
        `buttonPositionGap={'10px'}` //when a value is passed here, it 
        gives space to the navigation button relative to the 
        buttonPosition
        // Other customization options...
      />
    </div>
  );
}

Comparison to Other Card Slider Libraries:

Several React libraries offer card slider functionalities. Here's a brief comparison of cards-slider-react-lib with two popular alternatives:

cs = cards-slider-react-lib rsp=React Swiper rs=React Slick

Feature             cs              rsp           rs
Responsiveness          Yes         Yes       Yes
Customization           High            High          High
Navigation Btn          Built-in    Optional      Optional
Autoplay            Optional    Yes       Yes
Touch Support           Yes         Yes       Yes
Documentation           Moderate    Good          Good
Ease of Use         Moderate    Moderate      Moderate

Additional Details:

Dynamic Screen Size Handling: As mentioned earlier, card-slider-react-lib employs breakpoints to automatically adjust the number of cards displayed per view based on screen size. Here's a breakdown of the default breakpoints:

Extra Small: 1 card
Small: 2 cards
Medium: 3 cards
Large: 4 cards

By leveraging card-slider-react-lib , you can create visually appealing and interactive card sliders that enhance the user experience in your React applications. Its flexibility and customization options allow you to tailor the component to your specific design needs and data structures.

React Video Playback Made Easy: Unleash the Power of the New MVP VideoPlayer Component

Victor Ajadi — Sun, 23 Jun 2024 00:45:28 +0000

Introducing the VideoPlayer Component: A Powerful and Customizable Video Playback Solution for React with Keyboard Navigation

Empowering Your React Applications with Enhanced Video Playback

This project introduces the VideoPlayer component, a robust and configurable video playback solution designed specifically for React applications. It goes beyond basic video display, offering a rich set of features that elevate the user experience and cater to diverse project needs, including built-in keyboard navigation for accessibility.

Key Features and Benefits:

Seamless Integration: Leverages the power of React for effortless incorporation into your application's UI.
Interactive Controls: Provides a wide range of built-in controls, including play/pause, speed adjustment (if supported by the video format), full screen, theater mode, picture-in-picture, caption support, and keyboard navigation.
Customization Flexibility: Empowers developers to tailor the player's functionality by enabling or disabling specific controls as needed.
Streamlined Configuration: Simplifies player setup through intuitive props that control various behaviors.
Subtitle Support: Enhances accessibility and caters to multilingual audiences by allowing subtitle file upload in popular formats like .srt and .vtt.
Customizable Icons: Offers the ability to inject custom SVG icons for backward and forward seek buttons for a cohesive visual experience.
Optional Features: Provides flexibility with optional props like allowFrame for specifying iframe embedding and video preview on timeline hover.
Keyboard Navigation: Supports essential keyboard shortcuts for play/pause, full screen, theater mode, mute, and seeking backward/forward using arrow keys or specific letters (e.g., "j", "l").

Comparison with Other React Video Players:

Several React video player libraries exist, each with its strengths and weaknesses. Here's a brief comparison with a few popular options:

React Player: Offers a wide range of features, including quality selection, autoplay, and custom controls, but might have a steeper learning curve.
Video-React: A lightweight and customizable library with good documentation, but may lack some advanced features like picture-in-picture.
VideoPlayer (This Library): Provides a good balance of features and ease of use, with built-in navigation, subtitle support, and optional iframe embedding. However, it currently doesn't offer functionalities like quality selection or auto-generated captions.

The best choice for your project depends on your specific requirements and priorities. Consider factors like feature set, ease of use, and community support when making your decision.

Installation and Usage:

To install the VideoPlayer library in your React project, use npm:

npm install lib-react-youtube-player

Basic Usage Example:

The following code snippet showcases a basic implementation of the VideoPlayer component within a React application:

// Import VideoPlayer from the library

import { VideoPlayer } from 'lib-react-youtube-player';

// Import the video file

import videoFile from './assets/video/Learn useRef in 11 Minutes.mp4';

function App() {

  return (

    <div className="App">

      {/* Render the VideoPlayer component */}

      <VideoPlayer
        speedbtnProp={true} // Enable speed control button

        fullscreenProp={true} // Enable full screen button

        theaterProp={true} // Enable theater mode button

        pipProp={true} // Enable picture-in-picture button

        captionbtnProp // Enable caption/subtitle button

        backwardBtn={false} // Disable backward seek button

        forwardBtn={false} // Disable forward seek button

        videoFile={videoFile} // Specify the video file path

        allowFrame={true} // Enable iframe embedding (optional)

        LeftBackwardSvgIcon={() => { // Provide custom backward seek SVG here }}

        RightForwardSvgIcon={() => { // Provide custom forward seek SVG here }}

        subtitleFile={'./assets/srt/Learn useRef in 11 Minutes.srt'} // Default subtitle file (optional)

      />

    </div>

  );

}

export default App;

Explanation:

Import Statements: We import the VideoPlayer component from the 'lib-react-youtube-player' library and the video file (Learn useRef in 11 Minutes.mp4) using import statements.

App Component: The App function is the main component of our React application.

Rendering the VideoPlayer: Inside the App component's JSX, we render the VideoPlayer component.

Configuring Props: We configure the VideoPlayer component using various props to enable or disable specific controls, specify the video file, and activate optional features like iframe embedding.

We encourage you to explore the VideoPlayer component further and consider incorporating it into your React projects. If you have any questions or feedback, feel free to reach out to us via email at victorajadi2004@gmail.com or connect with us on LinkedIn www.https://www.linkedin.com/in/zemon-dev/.

Mimicking YouTube Functionality:

The VideoPlayer component aims to offer a similar user experience to YouTube in several aspects, including:

Play/Pause functionality with keyboard shortcuts (spacebar or "k").
Full screen mode toggle with keyboard shortcut ("f").
Theater mode toggle with keyboard shortcut ("t").
Mute toggle with keyboard shortcut ("m").
Seeking backward and forward using arrow keys or specific letters ("j" for 5 seconds backward, "l" for 5 seconds forward).
Subtitle support through user-uploaded .srt and .vtt files, activated by the caption button.

Iframe Preview (Optional):

The VideoPlayer offers the optional allowFrame prop, which enables you to embed the video within an iframe. This can be useful for providing a preview image on the timeline when hovering, similar to YouTube's functionality.

Limitations:

Currently, the library doesn't support video quality selection, unlike YouTube.
It relies on user-uploaded subtitle files and doesn't offer auto-generated captions like YouTube.

We're continuously improving the VideoPlayer component, and these features might be added in future updates.

The VideoPlayer component provides a versatile and user-friendly solution for video playback in your React applications. Its intuitive design, keyboard navigation accessibility, and customizable features make it a valuable asset in your development toolkit. Explore the component further to personalize video experiences and enhance your React projects.