MemoMate

MemoMate is a VS Code extension that helps you find memoized React functions and variables in your code. It automatically detects and highlights memoized values created with useMemo, useCallback, and memo, making it easier to track optimization patterns throughout your React codebase.

Features

✨ Visual Memo Indicators

MemoMate automatically displays a "Memo ✨" badge next to all memoized variables and functions in your code, making it easy to identify React optimization patterns at a glance.

🔍 Smart Detection

The extension intelligently detects:

• Direct memoization: Variables and functions wrapped with useMemo, useCallback, or memo

  const expensiveValue = useMemo(() => compute(), [deps]); // Memo ✨
  const callback = useCallback(() => handleClick(), []); // Memo ✨
  const MemoizedComponent = memo(Component); // Memo ✨
  

• Derived memoized values: Variables assigned from memoized values

  const memoizedData = useMemo(() => data, [data]);
  const derived = memoizedData; // Memo ✨
  const { value } = memoizedData; // Memo ✨
  

• Imported memoized components: Components and values imported from other files that are memoized

  import { MemoizedComponent } from "./components"; // Memo ✨
  <MemoizedComponent />; // Memo ✨
  

• React.memo components: Components wrapped with React.memo() or the memo helper from React

🎯 Real-time Updates

• Automatically updates decorations as you edit your code
• Works across multiple files and imports
• Supports TypeScript path mappings and module resolution

📁 Multi-file Support

MemoMate tracks memoized values across your entire codebase:

• Follows imports to detect memoized exports
• Handles circular import dependencies gracefully
• Resolves path aliases and TypeScript path mappings

Requirements

• Visual Studio Code version 1.96.4 or higher
• React projects using TypeScript or JavaScript

Extension Settings

This extension contributes the following command:

• memomate.toggleMemoTag: Toggle MemoMate decorations on or off

You can access this command via:

• Command Palette (Cmd+Shift+P / Ctrl+Shift+P) → "MemoMate: Memoized check"
• Or it can be assigned to a keyboard shortcut in VS Code settings

Supported File Types

• .js - JavaScript files
• .ts - TypeScript files
• .jsx - JavaScript React files
• .tsx - TypeScript React files

Usage

1. Automatic Activation: MemoMate automatically activates when you open JavaScript or TypeScript files in VS Code.

2. View Memo Indicators: Open any React component file and you'll see the "Memo ✨" badges appear next to memoized variables and functions.

3. Toggle On/Off:

   • Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux)
   • Type "MemoMate: Memoized check"
   • Toggle the extension on or off as needed

4. Hover Information: Hover over any memoized variable to see a tooltip indicating it's memoized.

How It Works

MemoMate uses Babel to parse and analyze your code, identifying:

1. Direct Memoization: Looks for calls to useMemo(), useCallback(), and memo() from React
2. Variable Tracking: Tracks variables that are assigned from memoized values, including destructured assignments
3. Import Resolution: Follows import statements to detect memoized exports from other files
4. Scope Analysis: Understands function and component scopes to correctly identify memoized values

Known Issues

• Complex memoization patterns with deeply nested function calls may not always be detected
• Some edge cases with dynamic imports may require manual checking
• Circular import dependencies are detected and skipped to prevent infinite loops

Release Notes

0.0.1

Initial release of MemoMate:

• ✅ Automatic detection of useMemo, useCallback, and memo usage
• ✅ Visual decorations with "Memo ✨" badges
• ✅ Support for imported memoized components and values
• ✅ Detection of derived memoized variables
• ✅ Real-time updates as you edit code
• ✅ Support for TypeScript path mappings
• ✅ Toggle command to enable/disable decorations
• ✅ Hover tooltips for memoized values

Following Extension Guidelines

This extension follows VS Code's extension guidelines and best practices. For more information:

• Extension Guidelines

Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

License

[Your License Here]

Enjoy tracking your React memoization patterns! 🚀