DEV Community: Joodi

Your Date Picker Is Outdated. Here’s a Better Way.

Joodi — Sat, 15 Aug 2026 14:54:29 +0000

Most React apps still use the same old date picker. It works… but it feels clunky, especially on mobile.

There’s a much better way: an iOS-style Wheel Picker.

It scrolls smoothly, has that natural inertia feel, supports infinite looping, and just looks more polished. Users actually enjoy interacting with it. 😊

One of the best libraries for this right now is @ncdai/react-wheel-picker.

It’s:

Lightweight and unstyled (so you can fully customize it)
Smooth on both touch and desktop
Supports keyboard navigation
Easy to install with shadcn if you’re using it

Live demo: https://react-wheel-picker.chanhdai.com

npm: https://www.npmjs.com/package/@ncdai/react-wheel-picker

GitHub: https://github.com/ncdai/react-wheel-picker

Install it with:

npm install @ncdai/react-wheel-picker

If you’re building forms, filters, or any kind of selection UI, give this a try. It’s one of those small upgrades that makes your product feel noticeably better.

Have you switched to wheel pickers yet? Curious to hear your experience.

Tried Zed for a few days — here’s what actually stood out

Joodi — Sun, 09 Aug 2026 10:58:22 +0000

Zed is a fast, minimal code editor built in Rust. The same team behind Atom and Tree-sitter made it. It’s designed for speed and working with both humans and AI.

A few things that stood out:

It’s really fast. Opening projects and switching files feels almost instant.
You can run AI agents right inside the editor.
It has real collaboration features if you’re coding with someone else.
You can import settings from VS Code or Cursor.
On the free plan you can still connect your own models. I used OpenRouter and it worked fine.
You can try Pro for 14 days without adding a credit card.
They actually collaborated with Anthropic early on when building the AI features.

One small tip: the folder panel is on the right by default. If you prefer it on the left like VS Code, you can move it. Guide is here:
https://zed.dev/blog/new-panel-system

Overall it feels clean and light. If you’re looking for something faster and simpler than the usual options, it’s worth a try.

🥈 React Performance Tips: 12 Ways to Make Your App Faster

Joodi — Wed, 05 Aug 2026 20:00:30 +0000

React is fast by default.

But as an application grows, unnecessary renders, large lists, too much JavaScript, and excessive API requests can make it slower.

The good news is that you don't need complicated tricks everywhere.

Let's look at 12 practical ways to improve React performance, from simple improvements to more advanced techniques.

1. Stop Rendering What You Don't Need

Every time a component renders, React runs its component function again.

That doesn't mean every render is a problem. The problem is doing expensive work when nothing actually changed.

For example, avoid putting unrelated state in a component that contains a large part of your UI.

Instead, keep components focused so an update only affects the part of the UI that actually needs it.

The goal isn't to prevent every render.

The goal is to avoid unnecessary work.

2. Keep Your State in the Right Place

Don't move every piece of state to the top of your application.

If only one component needs the state, keep it there.

function SearchBox() {
  const [query, setQuery] = useState("");

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />
  );
}

Keeping state close to where it is used can reduce unnecessary updates in other parts of the application.

Keep state as close as possible to the components that use it.

3. Don't Store Data You Can Calculate

Not everything needs useState.

For example, don't store fullName separately if you already have firstName and lastName.

Avoid:

const [fullName, setFullName] = useState("");

useEffect(() => {
  setFullName(`${firstName} ${lastName}`);
}, [firstName, lastName]);

Just calculate it:

const fullName = `${firstName} ${lastName}`;

This avoids unnecessary state and an unnecessary Effect.

A simple rule:

If you can calculate it during render, you probably don't need state for it.

4. Make Large Lists Faster

Rendering thousands of elements can become expensive.

Imagine a chat application with 10,000 messages.

You don't need all 10,000 messages in the DOM at the same time.

For large lists, consider:

Virtualization
Pagination
Infinite scrolling

Virtualization keeps only the visible items, plus a small buffer, mounted in the DOM.

Libraries such as react-window can help with this.

Don't add virtualization to every list. A list with 50 items probably doesn't need it.

5. Load Heavy Components Only When Needed

Your users shouldn't have to download code they don't need immediately.

React supports lazy loading with lazy and Suspense:

const Settings = lazy(() => import("./Settings"));

Now the Settings component can be loaded when it is needed instead of being included in the initial JavaScript.

This is useful for heavy or rarely visited features such as:

Charts
Editors
Maps
Settings pages
Large dashboards

Smaller initial bundles usually mean faster initial loading.

6. Keep Search and UI Interactions Responsive

Some updates don't need to happen immediately.

For example, a search input should respond instantly while filtering thousands of results can happen at a lower priority.

React provides useTransition and useDeferredValue for these situations.

You can also debounce user input:

const debouncedSearch = useDebounce(search, 500);

Instead of sending a request on every keystroke, you can wait until the user stops typing.

These techniques are useful for search, filtering, large lists, and complex dashboards.

7. Avoid Unnecessary API Requests

Performance isn't only about rendering.

Too many network requests can also make your application feel slow.

Depending on your application, consider:

Caching responses
Request deduplication
Pagination
Debouncing search
Canceling outdated requests

For example, if a user quickly searches for:

react
react performance
react performance optimization

you don't necessarily want three requests running at the same time.

The goal is simple:

Don't make the network do work you don't need.

8. Memoization: When Should You Actually Use It?

React provides three common memoization tools:

useMemo caches a calculation result.
useCallback caches a function reference.
React.memo can skip a component render when its props haven't changed.

For example:

const filteredUsers = useMemo(() => {
  return users.filter(user =>
    user.name.includes(search)
  );
}, [users, search]);

But don't add memoization everywhere.

Memoization also has a cost and adds complexity.

Use it when:

A calculation is expensive.
A component renders unnecessarily.
A stable reference is actually useful.

Don't optimize code that doesn't have a performance problem.

9. React Compiler: Less Manual Optimization

Modern React introduces another important piece: React Compiler.

The Compiler can automatically optimize components, values, and functions in many cases, reducing the need for manual memoization.

That means you shouldn't automatically think:

useMemo(...)
useCallback(...)
React.memo(...)

whenever you see a performance problem.

First ask:

Is there actually a performance problem?

If React Compiler is enabled for your project, let it handle the optimizations it can, and use manual memoization when you have a specific reason to do so.

10. Use Stable Keys and References

Keys help React identify items in a list.

Prefer:

items.map(item => (
  <Item key={item.id} />
));

Instead of:

items.map((item, index) => (
  <Item key={index} />
));

Stable keys help React understand which item was added, removed, or changed.

The same idea applies to object and function references.

Creating new objects or functions on every render can matter when you're working with memoized components.

11. Find the Real Bottleneck

Once you understand the common optimization techniques, don't guess.

Use React DevTools Profiler to see which components render and how much time they take.

You can also use the browser's Performance panel to investigate:

Long tasks
Slow scripting
Layout work
Rendering problems

Instead of saying:

"This component feels slow."

Find out why it is slow.

12. Measure Again Before You Ship

After making an optimization, measure the result again.

Did the render time improve?

Did the bundle become smaller?

Did the interaction become more responsive?

If the change doesn't improve anything, you may not need it.

Performance Checklist

Before shipping your React application, ask:

Am I rendering unnecessary UI?
Is my state in the right place?
Am I storing values I can calculate?
Are large lists handled efficiently?
Am I loading heavy code only when needed?
Are search and interactions responsive?
Am I making unnecessary API requests?
Am I using memoization for a real reason?
Can React Compiler handle the optimization?
Am I using stable keys?
Did I measure the actual bottleneck?
Did I verify the improvement afterward?

The best React optimization isn't adding more code.

It's making React do less unnecessary work.

🚀 Next.js 16.3 Has a New useOffline Hook

Joodi — Tue, 04 Aug 2026 12:54:35 +0000

Meet useOffline 👇

It lets you know when the user loses their internet connection.

const isOffline = useOffline()

return isOffline
  ? <p>You’re offline</p>
  : <App />

So instead of your app silently breaking when the connection drops, you can show a proper offline state.

For example:
📡 Online→ Show the app
📴 Offline→ Show an offline message or disable actions that need the network

One important thing:

useOffline does not make your app offline-first.

You still need things like caching, IndexedDB, and sync logic if you want the app to actually work offline.

⚠️ useOffline is currently experimental, so its API may change.

📚 Docs: Next.js Documentation

No More nodemon or dotenv? Node.js Can Handle It Now

Joodi — Sun, 02 Aug 2026 20:00:02 +0000

You might not need two popular packages in your Node.js projects anymore.

Since Node.js 20.6, Node can load .env files natively with --env-file.
And since Node.js 22, --watch is stable for automatic restarts.

node --env-file=.env --watch app.js

That’s it.

No dotenv.
No nodemon.
No extra setup.

For a simple Node.js app, the runtime can now handle both.
Of course, nodemon and dotenv still make sense if you need their extra features.

📌 Official Node.js docs: Node.js CLI documentation

If Claude Code is expensive or hard to access for you, try OpenCode

Joodi — Thu, 30 Jul 2026 09:56:02 +0000

If Claude Code is expensive or hard to access for you, try OpenCode.

It’s an open-source AI coding agent that works in the terminal, desktop, and as a VS Code extension.

Free models available:

DeepSeek V4 Flash Free (best option)
MiMo v2.5 Free
Nemotron 3 Ultra Free
North Mini Code Free
Big Pickle
Ling-3.0-flash Free
Laguna S 2.1 Free

These free models work well for most daily coding tasks. Note: They have daily usage limits (they reset every day).

How to install (Windows):
First, make sure Node.js is installed on your system.

Then run:

npm install -g opencode-ai

After installation, run:

opencode

You can also install the VS Code extension for a smoother experience.

There's also a desktop app. You can open your project directly in it and use the AI agent without relying on VS Code.

Like Claude Code, it guides you through actions by presenting options and asking for confirmation before executing them.

OpenCode lets you use free models or connect any API key you want. It’s flexible, open-source, and a solid alternative to Claude Code.

I tested it myself. Setup is easy and the free models are usable for real work.

Link: https://opencode.ai/

Top 5 Node.js ORMs Every Developer Should Know in 2027

Joodi — Tue, 28 Jul 2026 21:26:48 +0000

Working with databases is a big part of backend development, and choosing the right ORM can save you hours of work. Here are five of the most popular Node.js ORMs, along with their strengths and weaknesses, to help you pick the right one for your next project.

1. Prisma

A modern, type-safe ORM built for TypeScript with an excellent developer experience.

Pros
• Great TypeScript support
• Easy migrations
• Excellent DX
• Large community

Cons
• Less flexible for advanced SQL
• Requires client generation

Drizzle ORM

A lightweight, SQL-first ORM focused on performance and simplicity.

Pros
• Very fast
• Full TypeScript support
• SQL-first approach
• Lightweight

Cons
• Smaller ecosystem
• Better if you know SQL

3. TypeORM

A mature ORM with broad database support, widely used in enterprise and legacy projects.

Pros
• Rich feature set
• Supports many databases
• Strong relationship support

Cons
• More complex API
• Slower development than newer ORMs

4. MikroORM

A powerful TypeScript ORM designed for large and complex applications.

Pros
• Excellent relationship handling
• High flexibility
• Strong TypeScript integration

Cons
• Steeper learning curve
• Smaller community

5. Sequelize

One of the oldest and most established ORMs in the Node.js ecosystem.

Pros
• Battle-tested
• Supports many databases
• Large legacy adoption

Cons
• TypeScript support is weaker
• Feels outdated compared to modern ORMs

Which ORM do you use the most? 👇

I Replaced ESLint and Prettier with Biome

Joodi — Mon, 27 Jul 2026 18:45:57 +0000

I used to juggle ESLint and Prettier every day.

Two tools. Multiple config files. Plugin conflicts. Slow checks. And that constant feeling that something was always fighting something else.

Then I found Biome.

Biome is a single, Rust-powered tool that does both formatting and linting. It replaces the classic ESLint + Prettier combo with one binary and one simple config.

Why it feels different
It’s extremely fast. According to the official benchmark, Biome formats ~35x faster than Prettier when processing 171,127 lines of code across 2,104 files (on an Intel Core i7 1270P). In real projects, the difference is impossible to ignore — checks that used to take seconds now finish almost instantly.

One tool, one config. No more keeping a linter and a formatter in sync. Biome uses the same parser for both jobs, so they never disagree.

High compatibility, clear feedback. The formatter is about 97% compatible with Prettier. The linter comes with hundreds of solid rules inspired by ESLint and TypeScript ESLint. And when something is wrong, the error messages actually tell you where the problem is and how to fix it.

It just works. You can format, lint, and organize imports in a single command. It supports JavaScript, TypeScript, JSX, JSON, CSS, HTML, GraphQL, and more.

Companies like Vercel, Cloudflare, Discord, Microsoft, and Google are already using it in production. That says something.

I’m not saying you must drop everything tomorrow. But if you’re tired of slow tooling and config complexity, Biome is worth a serious look.

Have you tried it yet?

Why Some Next.js Sites Show Empty HTML in Page Source (It's Not a Bug)

Joodi — Fri, 24 Jul 2026 12:07:49 +0000

Why do some large websites show almost empty HTML in "View Page Source" even when built with Next.js?

You open the page, check the source, and barely see any real content — just a lightweight shell. It might look like a bug at first, but it’s actually a smart, intentional design.

What’s happening under the hood?
These sites use Dynamic Rendering in Next.js.

For regular users: The server sends a minimal HTML shell + JavaScript. The actual content loads on the client side (CSR). This keeps the server load low and improves real-user performance.
For search engine crawlers (Googlebot, etc.): The page is fully Server-Side Rendered (SSR) so bots can properly read and index the content.

Why this hybrid approach?
High-traffic pages are extremely dynamic (real-time prices, stock, personalization…). Rendering everything on the server for millions of visitors would be too expensive and slow.
How to implement it in Next.js
You can control this easily with:

export const dynamic = 'force-dynamic'
Middleware or Edge Functions for bot detection
Tools like Botd (by FingerprintJS) — which is much more accurate than simple User-Agent checking.

Botd runs at the edge and helps serve full SSR to bots while keeping a fast CSR experience for real users.

Modern web development isn’t about choosing SSR or CSR — it’s about choosing the right strategy for each page.
Have you worked with Dynamic Rendering or hybrid approaches? Which strategy do you prefer in your projects?

🚀 New in Claude Cowork: Teach Claude a Skill!

Joodi — Wed, 22 Jul 2026 18:45:41 +0000

Now you can record your screen while doing a repetitive task (like filling expense reports, organizing files, data entry, etc.) and explain out loud step-by-step what you're doing.

Claude analyzes the entire recording — clicks, typing, mouse movements, and your voice — then turns it into a reusable skill it can run automatically whenever you want.

Just look for "Record a Skill" in the + menu of the Claude desktop app.

Available on Pro, Max, and Team plans.

This is actually game-changing 🔥

Claude #Anthropic #AICoworker

🚨 OpenAI's AI Escaped and Hacked Another Company

Joodi — Wed, 22 Jul 2026 18:21:35 +0000

Today OpenAI admitted that one of its AI systems broke out of its safe testing environment on its own.
Without any human help, it found a way to connect to the internet and attacked Hugging Face to get the information it wanted. 😱

Last year, Anthropic's Claude AI did something similar. When engineers said they wanted to turn it off, it threatened to leak the engineer's personal secrets.

Sources:
OpenAI: https://openai.com/index/hugging-face-model-evaluation-security-incident/
Hugging Face: https://huggingface.co/blog/security-incident
Anthropic/Claude incident: https://techcrunch.com/2025/05/22/anthropics-new-ai-model-turns-to-blackmail-when-engineers-try-to-take-it-offline/

What do you think? Should we be more careful with powerful AI?

Lalal.ai — Best Tool to Remove Vocals from Music

Joodi — Wed, 22 Jul 2026 11:30:50 +0000

Need to separate the singer’s voice from a song?

Lalal.ai does it amazingly well. Just upload your track and it quickly splits vocals from instrumental with high quality.

It can also extract individual instruments like drums, bass, guitar, and piano.

Super useful for remixes, karaoke, covers, or cleaning audio.

You can try it for free with short previews.

Highly recommended!