DEV Community: Mahesh Galange

[Boost]

Mahesh Galange — Thu, 26 Mar 2026 07:26:41 +0000

Mahesh Galange

Mar 26

🚀 DevScope — Understanding Your Codebase Dependencies Like Never Before

#npm #cli #programming #productivity

Comments

2 min read

🚀 DevScope — Understanding Your Codebase Dependencies Like Never Before

Mahesh Galange — Thu, 26 Mar 2026 07:14:21 +0000

In large projects, dependencies grow quickly.

Because of reusable components, shared utilities, and modular architecture, it becomes hard to answer a simple question:

👉 “If I change this file, what else will it affect?”

I faced this problem multiple times while working on real projects.
So I decided to build something to solve it.

That’s how DevScope was born.

🧩 The Problem

As projects scale:

Files become interconnected
Imports grow complex
Refactoring becomes risky

Even a small change can break multiple parts of the application—and you may not even realize it.

💡 The Solution

DevScope is a lightweight CLI tool that:

Builds a dependency graph of your project
Tracks relationships between files
Identifies impacted files instantly
⚡ Getting Started

Install globally:

npm install -g @maheshdev/dev-scope

Run inside your project:

dev-scope analyze

This generates a clean dependency tree:

src/index.ts
  ├── src/commands/overview.ts
  ├── src/commands/impact.ts
  └── src/commands/analyze.ts

🔍 Impact Analysis

Want to know what breaks if you change a file?
dev-scope impact <file_name>

dev-scope impact src/graph/buildGraph.ts

Output:

Affected:
  ├── src/commands/analyze.ts
  ├── src/index.ts
  ├── src/commands/impact.ts
  └── src/commands/overview.ts

This is extremely useful before refactoring.

📊 Project Insights

You can also run:

dev-scope overview

This gives insights like:

Total files & dependencies
Leaf files (no dependencies)
Most used files
Unused files

🧠 How It Works (Simplified)

At its core, DevScope uses two main ideas:

Dependency Graph

Each file is treated as a node.
Imports between files create edges.

Example:

A → B → C

This means:

A depends on B
B depends on C

Reverse Traversal (DFS)

To find impacted files:

Start from the changed file
Traverse backwards through dependencies
Collect all files that depend on it

This is done using Depth First Search (DFS).

🎯 Why I Built This

While working on projects, I often struggled with:

Understanding large codebases quickly
Safe refactoring
Identifying unused files

I wanted something:

Simple
Fast
No UI overhead
Just works in terminal
⚙️ Tech Stack
TypeScript
Node.js
Commander (CLI)
🚀 Try It Yourself
npm install -g @maheshdev/dev-scope

Start exploring your codebase:

dev-scope analyze
dev-scope impact
🔮 What’s Next

I’m planning to improve:

More language support
Better visualization
Performance optimizations
🤝 Feedback

This is just the beginning.
If you try it, I’d love to hear your thoughts!

[Boost]

Mahesh Galange — Fri, 02 May 2025 05:21:58 +0000

Mahesh Galange

Apr 6 '25

Mastering Custom Hooks in React – A Beginner’s Guide 🪝

#react #javascript #frontend #customhooks

Comments

1 min read

Mastering Custom Hooks in React – A Beginner’s Guide 🪝

Mahesh Galange — Sun, 06 Apr 2025 15:03:55 +0000

📌 Table of Contents

What Are Custom Hooks?
Why Use Custom Hooks?
How to Create One – Example
Best Practices & Common Mistakes

🧠 What Are Custom Hooks?

Custom Hooks are JavaScript functions that start with the word use and allow you to extract component logic into reusable functions. They use React’s built-in hooks (like useState, useEffect) under the hood and follow the same rules.

🔍 Why Use Custom Hooks?
Here’s what you gain:

♻️ Reusability: Share logic across multiple components
🧼 Cleaner Code: Keep your components focused on UI
🧩 Composability: Combine multiple hooks into one

💡 How to Create One – Example

Let’s create a custom hook called useLocalStorage.

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

✅ Usage:

function ThemeToggle() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Switch to {theme === 'light' ? 'dark' : 'light'} mode
    </button>
  );
}

✨ Final Thoughts

That’s a wrap on custom hooks! They’re powerful, reusable, and help keep your code clean and modular. I hope this guide helps you create your own and apply them confidently in your React projects.

This was my first blog—if you liked it or found it helpful, feel free to connect or share your feedback!