10 cool habits that helps frontend developer to code faster (React + TS Edition)

Hey folks,

I've been working with React, Redux, and TypeScript for years now, and if you're anything like me, you've probably hit that point where it's less about learning what to do — and more about how to do it faster and better.

So here are 10 habits/tools/processes I’ve picked up over the years that have genuinely helped me code faster and more confidently as a frontend dev.

Let’s dive in.

1. Set up proper snippet shortcuts (and actually use them)

VSCode snippets are like second brains. I have shortcuts for common stuff like:

rfce → React Functional Component with export  
rtsx → React.FC with TS and props  
dux → Redux slice boilerplate  

Using these religiously saves hours every week.
Use Popular Extensions
ES7+ React/Redux/React-Native snippets
👉 Extension ID: dsznajder.es7-react-js-snippets
🔗 Install from Marketplace

2. Use a component library (your own or one like shadcn/ui)

As a senior, you’re either:

• Building components again and again 😩
• Or reusing tested ones 🙌

Pick the second one. Personally, I love shadcn/ui for React/TS projects. If you’re working in a team, push for a design system + Storybook combo early.

3. Automate imports with @ paths and aliases

This tiny tsconfig.json tweak avoids spaghetti imports:

"paths": {
  "@components/*": ["src/components/*"],
  "@hooks/*": ["src/hooks/*"]
}

Now you import with:

import { Button } from '@components/ui'

Cleaner. Faster. Less hunting in folders.

4. Have your “starter repo” ready

Have a private GitHub template with:

• Vite + React + TS
• Prettier + ESLint + Husky
• Tailwind (optional)
• Zod + Zustand / Redux Toolkit setup

One click, and I’m 30 mins ahead in any new project. Big time-saver.

5. Use AI coding tools — but don’t outsource your brain

Yes, I use GitHub Copilot. Yes, it sometimes guesses better prop names than I would 😅.
But I never accept a block without reading it.

It’s a speed assist, not an auto-pilot.

6. Master your debugger, not just console.log

Seriously — put breakpoints, inspect call stacks, step through logic.

It took me way too long to realize debuggers are made for humans like us, not backend-only devs.

7. TypeScript is your best friend. Make types strict early.

I used to avoid as const and Record<string, string> like the plague. Now I use them to lock in assumptions early, so bugs don’t creep in later.

Start strict, not lazy.

8. Get fast at Git (CLI + GUI hybrid)

I use the CLI for speed but also love a good GUI like GitHub Desktop or LazyGit when resolving conflicts.

Pro tip: git commit -S -m "feat: add payment button" with commit signing = 🔒 + ✅

9. Use Chrome DevTools like a pro

• cmd + shift + p → Power commands
• $$("selector") → Run jQuery-style selection in console
• Device emulation, network throttling, performance profiling = gold for frontend polish.

10. Write TODOs like a breadcrumb trail

Instead of just:

// TODO: refactor this later

I now write:

// TODO [Auth Refactor Q3]: This login check should move to middleware

It’s so much easier for Future Me (and teammates) to understand what's going on.

That’s it! These aren’t magic tricks — just small changes with big impact over time. I hope a few of these resonate with you.

Got a tip I should add to my workflow? Drop it in the comments — I’m always tweaking my setup.

Happy coding! 👨‍💻⚡