DEV Community

Cover image for Introducing crossmemo: A Powerful Cross-Environment Caching & Memoization Utility
alok5953
alok5953

Posted on

Introducing crossmemo: A Powerful Cross-Environment Caching & Memoization Utility

#node #typescript #caching #webperf

Image description

Why Caching & Memoization Matter

Caching and memoization are essential for optimizing performance in web applications, reducing redundant computations, and improving response times. However, managing caching across different environments—Node.js and browsers—can be a challenge.

That’s why I built crossmemo, a lightweight yet powerful caching and memoization utility designed for seamless cross-environment use. Whether you're optimizing API calls in a Node.js backend or caching UI data in a React app, crossmemo has got you covered.

🚀 What is crossmemo?

crossmemo is a flexible and easy-to-use caching solution with built-in TTL (Time-To-Live) support, multiple storage adapters, and LRU (Least Recently Used) eviction strategy. It allows developers to cache function results or store frequently accessed data across different environments.

🔹 Key Features

✅ Cross-Environment Support – Works in Node.js & browsers

✅ Multiple Storage Adapters – Supports Memory, LocalStorage, and FileSystem

✅ TTL Support – Set expiration time for cached items

✅ LRU Cache – Automatically evicts least recently used items

✅ TypeScript Support – Fully typed API for type safety

✅ Custom Key Resolution – Flexible cache key generation

✅ Robust Error Handling – Graceful fallbacks on storage failures

📦 Installation & Quick Start

Getting started with crossmemo is simple:

npm install crossmemo
Enter fullscreen mode Exit fullscreen mode

Memoization Example 

import { memoize } from 'crossmemo';

const expensiveFunction = async (x: number) => {
  await new Promise(resolve => setTimeout(resolve, 1000));
  return x * 2;
};

const memoizedFn = memoize(expensiveFunction, { ttl: 5000 });

await memoizedFn(5); // Takes 1 sec
await memoizedFn(5); // Instant (cached result)
Enter fullscreen mode Exit fullscreen mode

🔥 Advanced Usage

Direct Cache Usage 

import { Cache } from 'crossmemo';

const cache = new Cache();
await cache.set('key', { data: 'value' }, { ttl: 60000 });
const value = await cache.get('key');
Enter fullscreen mode Exit fullscreen mode

Custom Storage Adapter 

import { LocalStorageAdapter } from 'crossmemo';

const cache = new Cache({
  adapter: new LocalStorageAdapter({ prefix: 'myapp:', maxSize: 100 })
});
Enter fullscreen mode Exit fullscreen mode

Custom Key Resolution 

const memoizedFn = memoize(async (user: { id: number }) => {
  return fetchUserData(user.id);
}, {
  keyResolver: (user) => `user-${user.id}`
});
Enter fullscreen mode Exit fullscreen mode

🎯 Why Use crossmemo?

  • Boost Performance – Reduce redundant function executions
  • Save Resources – Optimize API calls and expensive computations
  • Flexible Storage – Choose the best storage for your environment
  • Lightweight & Easy-to-Use – Simple API with powerful capabilities

📌 Get Started Today

crossmemo is open-source and available on NPM. Try it out and let me know your feedback!

🔗 NPM Package: crossmemo on NPM

🔗 GitHub Repository: GitHub Repo

I’d love to hear your thoughts and contributions. Let’s build better caching solutions together! 🚀

NodeJS #ReactJS #TypeScript #Caching #Memoization #WebPerformance #SoftwareDevelopment

Top comments (1)

Collapse
 
juanperez profile image
Juan Perez prueba •

It's a super interesting post.