DEV Community: Mayank Kumar Chaudhari

🔥 Blazing Fast Markdown Rendering for React – Benchmarked & Battle-Tested

Mayank Kumar Chaudhari — Sat, 12 Jul 2025 03:29:52 +0000

We just benchmarked @m2d/react-markdown against the popular react-markdown — and the results are in:

✅ Competitive speed,
✅ Cleaner architecture,
✅ Purpose-built for MDAST-first workflows like mdast2docx

🚀 Why Another Markdown Renderer?

Most renderers are great at one thing: rendering. But if you’re working on docx/pdf export, hybrid output (MDX/HTML/JSX), or unified pipelines, you need something:

Fast 🏎
Extensible 💡
MDAST-respecting 🧠
SSR/Streaming/Edge-ready 💪

That's exactly what @m2d/react-markdown is for.

📊 Real Benchmarks — No Hype

We ran thorough benchmarks with various markdown types: simple notes, complex nested GFM, large tutorials, and even full-site markdown dumps.

Key Takeaways:

🟢 @m2d/react-markdown outperformed or matched react-markdown in several medium/complex files
🔁 Bulk rendering (all files in one go) saw better JSX tree handling
📉 Slightly slower in very short/simple cases (which don't matter much in real apps)

Check out the full results here:
👉 benchmark.md

Includes tables, deltas, and even visual charts!

🔌 Perfect Companion for `mdast2docx` & Export Tooling

If you're building tools like:

mdast2docx (Markdown → Word)
Hybrid export systems (PDF/HTML from a single source)
Local-first writing tools with output control

Then @m2d/react-markdown is your new best friend.
It retains the full MDAST, supports plugin injection, and gives you full control over rendering + export paths.

💬 Join the Discussion – Shape the Future

We’re actively planning support for:

Inline JSX support in markdown
Better handling of reusable ASTs
Declarative hydration markers for SSR/Edge use

💬 Engage, vote, or suggest improvements here:
👉 https://github.com/md2docx/react-markdown/discussions/3

🛠 Build Your Own Library Like This

This library was scaffolded using react18-tools/turborepo-template — a production-grade template for building and publishing modern React libraries.

If you want to:

Build & test across Next.js/Vite
Auto-generate docs & examples
Publish fast and right

💡 Use this template to create your own library in minutes.

🤝 Call for Contributors

If you:

Love performance and clean architecture
Use React with Markdown in any serious way
Care about maintainable DX and OSS karma

…then jump in!

Star, fork, or file issues here → https://github.com/md2docx/react-markdown

Or explore mdast2docx to see how this library integrates into real export workflows.

🧘‍♂️ Built with Care

This isn’t just a library — it’s a piece in a larger mission to simplify dev workflows and bridge content with output in meaningful ways.

🧠 Shadow AI: The Invisible Power (or Threat) Inside Your Organization

Mayank Kumar Chaudhari — Tue, 01 Jul 2025 16:56:29 +0000

“If you don’t manage Shadow AI, it will manage you.”

⚡ TL;DR

Shadow AI refers to the use of AI tools (like ChatGPT, Copilot, Notion AI) without official approval from an organization’s IT or governance teams.

It’s fast. It’s helpful.
But it’s also risky. And potentially lethal.

Let’s unpack why this is happening, what it means for your team, and what you can do about it — today.

🤖 What is Shadow AI?

Shadow AI = Unofficial AI.
Tools used by employees without IT's knowledge.

Think: ChatGPT in a browser tab, GitHub Copilot in VSCode, or Notion AI drafting reports — all outside org policies.

It’s like Shadow IT, but more powerful, less visible, and harder to regulate.

💡 Why It’s Happening

AI tools are easy to access, free or freemium.
Employees want to work faster, smarter, and skip the red tape.
Organizations are slow to adopt or govern AI use.

In short: the people are ready, the process is not.

🚀 The Good

Shadow AI can be incredibly productive:

Faster content creation
Smarter code generation
Rapid brainstorming and analysis
Reduced grunt work

📸 Suggested image:
Illustration of a developer using Copilot, a marketer using ChatGPT, and a student using Notion AI — side by side.

⚠️ The Bad (and Dangerous)

But the risks are very real:

❌ Sensitive data leaks (e.g., uploading internal reports to ChatGPT)
⚖️ Compliance violations (GDPR, HIPAA, etc.)
🧠 Unvetted outputs: hallucinations, bias, misinformation
🕳️ Lack of accountability for decisions made by AI

📸 Suggested image/GIF:
A file labeled "Confidential.pdf" being dragged into a chatbot — with a red alert popping up.

🔍 Real-World Examples

A fintech employee uses ChatGPT to summarize client reports → GDPR breach
Dev team relies on Copilot → accidentally ships AI-generated insecure code
Marketing team drafts email with AI → brand voice misaligned

These aren’t what ifs — they’ve already happened.

🧩 The Shadow AI Dilemma

⚡ Speed	🔒 Risk
Rapid innovation	Data leakage
Personal productivity boost	Compliance violations
Automation of routine tasks	Brand or legal liabilities

You can’t ignore Shadow AI.
You can’t block it completely.
You have to manage it.

✅ What You Can Do (Right Now)

Acknowledge it’s happening — Shadow AI is already in your org.
Audit usage: who is using what, how, and where?
Educate teams on safe and unsafe practices.
Adopt a lightweight AI Use Policy.
Provide sanctioned alternatives where possible (e.g., secure AI endpoints).

📎 Bonus:
Check out this free 🧠 Shadow AI Risk & Readiness Checklist to get started.

🧠 Final Thought

Shadow AI isn’t evil.
It’s simply ahead of your processes.

Leaders who embrace it strategically will unlock the next wave of productivity.
Those who ignore it risk being blindsided — by their own teams.

Written by Mayank Chaudhari

Should You Use position: absolute for Chat UI Timestamps? A Front-End Architect's Guide

Mayank Kumar Chaudhari — Thu, 26 Jun 2025 02:32:57 +0000

Learn when to use position: absolute in chat UIs — and when it breaks. Explore layout best practices, real-world examples, and performance tips from a front-end architect's perspective.

When building modern chat UIs, we often obsess over message bubbles, delivery ticks, avatars—but one tiny UI detail keeps sparking debate: where and how should timestamps be placed?

As a front-end architect, this tiny decision is a microcosm of a bigger question:

✨ When should we use position: absolute, and when should we let layout engines do the work?

Let’s break it down.

🔍 Absolute Positioning: A Quick Primer

position: absolute removes an element from the document flow and lets you place it precisely relative to its nearest position: relative ancestor.

This can be extremely useful… or dangerously brittle.

✅ Pros of Using `position: absolute`

Precise control: Place elements exactly where you want, pixel-perfect.
Clean layout: Timestamps don’t affect the wrapping of text or sibling layout.
UI isolation: Keeps metadata (timestamps) visually detached from message content.

💡 Ideal Use Cases:

Tooltips
Dropdowns
Floating badges
Timestamps in message bubbles

❌ Cons of Using `position: absolute`

Non-responsive: Doesn’t naturally scale with content.
Hard to maintain: Prone to breaking if DOM structure changes.
Stacking context issues: Requires careful z-index and containment.

💬 The Chat Bubble Use Case

Say you have a message bubble like this:

<div class="message">
  <span class="message-text">Hello! How are you?</span>
  <span class="timestamp">10:42 PM</span>
</div>

.message {
  position: relative;
  padding: 12px 40px 20px 12px;
  background: #f1f1f1;
  border-radius: 12px;
  max-width: 75%;
}

.timestamp {
  position: absolute;
  bottom: 4px;
  right: 8px;
  font-size: 10px;
  color: #888;
}

This works beautifully. The timestamp is always anchored in the bottom-right of the bubble, no matter how short or long the message is.

👎 When to Avoid It

Avoid position: absolute if:

Your layout is fluid, or
Messages contain media, links, or multiple lines, or
You’re dealing with RTL, dynamic content, or multiline interactions

In these cases, it’s often better to use Flexbox or CSS Grid for layout control.

🎓 Best Practices

✅ DO:

Use absolute within a positioned container (relative).
Use it for visual elements that shouldn’t impact layout flow (timestamps, icons).
Combine with z-index strategy to prevent overlap issues.

❌ DON'T:

Don’t build full layouts with absolute.
Don’t mix with Flex/Grid without clear intent.
Don’t forget responsiveness!

🧠 Final Verdict: Use `absolute`... Carefully

✅ If your chat bubble is tightly scoped, controlled, and visually simple — use position: absolute for your timestamp.

❌ If you're designing for scale, multiple content types, or edge cases — lean into Flex/Grid and let the browser do the heavy lifting.

Introducing Kosha – A Minimal, Modern State Manager for React

Mayank Kumar Chaudhari — Wed, 11 Jun 2025 04:57:40 +0000

⚡ Kosha – A Minimal, Modern State Manager for React

Looking for a fast, ergonomic, and lightweight state management solution tailored for modern React?

Meet Kosha – a ~450 byte, production-ready global state manager built with React 18+ in mind. It gives you the performance of useSyncExternalStore and the elegance of Immer – all in one tiny package.

🚀 Why Kosha?

Kosha was built to simplify state management for real-world apps — small enough to fit in your head, but powerful enough to scale.

✨ Highlights

Ultra-lightweight (~450 bytes minzipped)
Zero re-renders by default – powered by useSyncExternalStore
Modular slice architecture – supports Zustand-style slices
Built-in middleware support
- persist: syncs state across tabs
- immer: ergonomically mutate nested state
TypeScript-first DX – store creation, selection, and updates are fully typed
Test-ready – includes testing utilities to reset stores between test cases

📦 Installation

npm i kosha
# or
yarn add kosha
# or
pnpm add kosha

🧩 Slice Composition (Modular Store Setup)

`ts
type Store = CounterSlice & ThemeSlice;

const createCounterSlice: SliceCreator = set => ({
count: 0,
setCount: count => set({ count }),
});

const createThemeSlice: SliceCreator = set => ({
theme: 'light',
setTheme: theme => set({ theme }),
});

const useStore = create((...a) => ({
...createCounterSlice(...a),
...createThemeSlice(...a),
}));
`

🧪 Testing Made Simple

`ts
import { create } from 'kosha/utils/test';

const useTestStore = create(set => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
}));

// Automatically resets between tests
`

🌐 See it Live

🔗 Live Demo
📦 GitHub
📘 Docs

❤️ Built with love by Mayank Chaudhari

Give Kosha a try — and say goodbye to bloated state libraries ✌️
Let me know what you build with it! 🚀

🧠 Kosha – A 450-byte Global State Manager for React (Highly Optimized and with Middleware Support)

Mayank Kumar Chaudhari — Wed, 11 Jun 2025 04:51:22 +0000

React developers often juggle between performance, bundle size, and developer ergonomics when choosing a state management library.

Introducing Kosha – a production-ready, ~450 byte global state manager with:

✅ Full React 18+ and concurrent rendering support

✅ Optimized selectors using useSyncExternalStore

✅ Partial updates out-of-the-box

✅ Built-in middleware architecture

✅ Working persist middleware

✅ No unnecessary re-renders

🧪 How it Works

Create a store with a minimal API:

import { create } from "kosha";

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
}));

Use selector-based consumption for optimization:

ts const count = useStore(state => state.count);

Update state from anywhere, even outside React:

ts useStore.getState().increment();

⚖️ Kosha vs Zustand

Feature	Kosha	Zustand
Size (minzipped)	~450 bytes	~0.6–2.5kB
Optimized Selectors	✅ Built-in	⚠️ Manual
Middleware	✅ (custom)	✅ Rich plugins
Devtools	❌	✅

🔧 Middleware Support Example

Check out the working persist middleware.

📦 Try It Now

Live demo: kosha-six.vercel.app
Source: github.com/react18-tools/kosha

Let me know what middleware you'd love to see added next!

Post the long-form blog above with tags: react, javascript, webdev, opensource, state-management
Publish during weekday morning IST/EST (e.g., Tue/Wed ~9–10am IST or EST)

Answer: Architecture patterns for extendable MVC applications

Mayank Kumar Chaudhari — Tue, 10 Dec 2024 12:56:13 +0000

Dec 10 '24

I am sure you have already thought through SOLID principles. The way you have described your code seems very similar to VS Code extensions framework.

splitting views and controllers into atomic chunks (e.g. methods)

This seems a very good starting point.

The customization must be possible in the runtime

I…

Open Full Answer

Answer: Typing a dynamic tag in React with TypeScript?

Mayank Kumar Chaudhari — Sun, 08 Dec 2024 10:58:23 +0000

Dec 8 '24

JSX.IntrinsicElements no longer works with the new TypeScript version. It throws namespace JSX not found.

The solution is to use either ReactHTML from React or HTMLElementTagNameMap from lib.dom.d.ts (No need to import, works out of box).

So the full solution for allowing the HTML tags as well as React…

Open Full Answer

Answer: Handling pending state for server components during revalidatePath in Next.js

Mayank Kumar Chaudhari — Wed, 07 Feb 2024 11:56:39 +0000

Feb 7 '24

Please check out the official docs - https://nextjs.org/docs/app/api-reference/functions/revalidatePath

revalidatePath only invalidates the cache when the included path is next visited. This means calling revalidatePath with a dynamic route segment will not immediately trigger many revalidations at once. The invalidation only happens when the path is next visited.

Thus, your…

Open Full Answer

Answer: srcSet in Image component is not working and it is not displaying right image in next js

Mayank Kumar Chaudhari — Tue, 07 Nov 2023 05:37:49 +0000

Nov 6 '23

Checkout this API reference - https://nextjs.org/docs/pages/api-reference/components/image

Next.js Image component does not support passing srcSet like how you are trying to do. You can handle this using JavaScript, e.g., using a custom loader function or storing the image URL in a state variable.

Open Full Answer

Answer: Fetching related data via an API and rendering it in components via Next.js

Mayank Kumar Chaudhari — Sun, 05 Nov 2023 02:57:47 +0000

Nov 4 '23

Rendering html in API doesn't make much sense. Best way is to include that render information in your API response.

If you have deeply nested components, you should use global state management or context API (useContext and Provider) to make the props available.

But since you are using Next.js, you…

Open Full Answer

Answer: Next.js 13: Data Fetching Issue with Prisma ORM - Old Data Displayed During Navigation Instead of Updated Data

Mayank Kumar Chaudhari — Tue, 10 Oct 2023 19:45:56 +0000

Jul 21 '23

You need to export a constant from the page.tsx to revalidate.

export const revalidate = 1; //revalidates every one second -- requires page reload

Open Full Answer

How to mock next/router for unit testing with vitest?

Mayank Kumar Chaudhari — Wed, 26 Jul 2023 04:48:32 +0000

Mar 24 '23 Comments: 1 Answers: 1

When trying to write simple tests for out Next.js app that uses useRouter() hook, vitest starts throwing errors.

Looking for ways to mock next/router for unit testing with vitest.

Open Full Question

DEV Community: Mayank Kumar Chaudhari

🔥 Blazing Fast Markdown Rendering for React – Benchmarked & Battle-Tested

🚀 Why Another Markdown Renderer?

📊 Real Benchmarks — No Hype

Key Takeaways:

🔌 Perfect Companion for mdast2docx & Export Tooling

💬 Join the Discussion – Shape the Future

🛠 Build Your Own Library Like This

🤝 Call for Contributors

🧘‍♂️ Built with Care

🧠 Shadow AI: The Invisible Power (or Threat) Inside Your Organization

⚡ TL;DR

🤖 What is Shadow AI?

💡 Why It’s Happening

🚀 The Good

⚠️ The Bad (and Dangerous)

🔍 Real-World Examples

🧩 The Shadow AI Dilemma

✅ What You Can Do (Right Now)

🧠 Final Thought

Should You Use position: absolute for Chat UI Timestamps? A Front-End Architect's Guide

🔍 Absolute Positioning: A Quick Primer

✅ Pros of Using position: absolute

💡 Ideal Use Cases:

❌ Cons of Using position: absolute

💬 The Chat Bubble Use Case

👎 When to Avoid It

🎓 Best Practices

✅ DO:

❌ DON'T:

🧠 Final Verdict: Use absolute... Carefully

Introducing Kosha – A Minimal, Modern State Manager for React

⚡ Kosha – A Minimal, Modern State Manager for React

🚀 Why Kosha?

✨ Highlights

📦 Installation

🧩 Slice Composition (Modular Store Setup)

🧪 Testing Made Simple

🌐 See it Live

❤️ Built with love by Mayank Chaudhari

🧠 Kosha – A 450-byte Global State Manager for React (Highly Optimized and with Middleware Support)

🧪 How it Works

⚖️ Kosha vs Zustand

🔧 Middleware Support Example

📦 Try It Now

Answer: Architecture patterns for extendable MVC applications

Answer: Typing a dynamic tag in React with TypeScript?

Answer: Handling pending state for server components during revalidatePath in Next.js

Answer: srcSet in Image component is not working and it is not displaying right image in next js

Answer: Fetching related data via an API and rendering it in components via Next.js

Answer: Next.js 13: Data Fetching Issue with Prisma ORM - Old Data Displayed During Navigation Instead of Updated Data

How to mock next/router for unit testing with vitest?

🔌 Perfect Companion for `mdast2docx` & Export Tooling

✅ Pros of Using `position: absolute`

❌ Cons of Using `position: absolute`

🧠 Final Verdict: Use `absolute`... Carefully