Scaling React Codebases: 5 Patterns for Clean Code

📌 Must-have resources for React devs Save this — you’ll thank yourself later 👇 DevHints – React Cheat Sheet A quick reference for core syntax and patterns. Perfect when you don’t want to dig through the docs. Official React Hooks Who, what, and when. A complete list of hooks with clear, no-fluff explanations. use(resource) in React 18 A new API for working with promises directly inside components. Good to know if you want to stay up to date with the latest changes. 🧠 TypeScript + React React TypeScript Cheatsheets Basics + advanced use cases for working with TypeScript in React projects. 🪝 Hooks in practice useHooks (ui.dev) Ready-to-use hooks: debounce, media query, hover, and more. Short, practical, with code examples. React Hooks cheat sheet with examples Best practices + common real-world scenarios for using React hooks. 🆕 Ultimate React Hooks Cheat Sheet (2025) An up-to-date overview of both core and new hooks. 💡 How to use these 👉 Pick 2–3 resources for daily work 👉 Docs = foundation, cheat sheets = quick hints 👉 If you work with TS, definitely save the TS cheatsheets 🔖 Save it if this was useful! #it #programming #reactdeveloper

Full Article & Code Samples: https://lnkd.in/gYBchTs8 Stop awaiting your performance away. 🛑 Are you still running independent API calls sequentially? const user = await fetchUser(); (1s) const posts = await fetchPosts(); (1s) Total: 2 seconds. By mastering Promise.all() and Promise.allSettled(), you can drop that time to 1 second. My latest blog breaks down the Async Essentials: ✅ The 3 Eras: Callbacks ➡️ Promises ➡️ Async/Await. ✅ Resilience: How to handle timeouts with Promise.race(). ✅ The for...of Trap: Why forEach fails with async code. ✅ Best Practices: My checklist for shipping reliable async logic. Level up your JavaScript internals today. #NodeJS #CodingTips #FullStack #JavaScript #CleanCode

A small React realization that reminded me why fundamentals matter 👇 Today I ran into a bug that looked like a TypeScript issue at first: orders.map is not a function I was passing an array to a React component, but inside the component it was suddenly… an object. At first glance, it felt like: 👉 “TypeScript is being annoying again.” But the reality was simpler. React components always receive props as an object — in JavaScript and TypeScript alike. TypeScript didn’t cause the bug; it just caught a flawed mental model earlier. A good reminder that many “TS problems” are really React fundamentals resurfacing. Learning isn’t always about new tools — sometimes it’s about refining how we think. #React #TypeScript #Frontend #LearningInPublic #SoftwareEngineering

When you first come across 'Conditional Types' in TypeScript, there’s one keyword that suddenly starts appearing everywhere - 'infer'. And when people first see it, the reaction is usually - 'Wait… TypeScript can extract types now?' Yes. And that’s exactly what infer is about. In simple terms, 'infer' allows TypeScript to capture a type from inside another type and give it a name, so you can reuse it. It only works inside conditional types, and that’s important. Using this keyword, you are asking TypeScript - 'If this type matches a certain shape, can you pull out a part of it for me?' This is really powerful because in real code, we often work with wrapped types. Promises wrap values, Arrays wrap elements. Functions wrap return types, APIs wrap responses etc. And without 'infer', you’d have to manually describe every possible variation. With 'infer', you can extract the interesting part automatically. This is the reason TypeScript can unwrap Promise values, extract function return types, pull parameter types from functions, and power utility types like 'ReturnType', 'Awaited', and 'Parameters'. All of those are built on 'infer'. Another important thing to understand is that 'infer' doesn’t 'guess'. It only works when the surrounding conditional type matches. If the structure doesn’t match, the conditional type falls back to its alternative branch. Remember - 1. Conditional types decide which branch to take. 2. 'infer' lets you name a piece of the type inside that branch. #TypeScript #JavaScript #Programming #WebDevelopment #Coding

🚨 𝐇𝐨𝐰 𝐭𝐨 𝐅𝐢𝐱 𝐓𝐲𝐩𝐞𝐒𝐜𝐫𝐢𝐩𝐭 𝐢𝐬𝐨𝐥𝐚𝐭𝐞𝐝𝐌𝐨𝐝𝐮𝐥𝐞𝐬 𝐄𝐫𝐫𝐨𝐫 𝐢𝐧 𝐍𝐞𝐱𝐭.𝐣𝐬? If your Next.js build fails with this message: Re-exporting a type when isolatedModules is enabled requires using export type Don’t worry, it’s not a complex bug. It’s just about being clear with TypeScript. 𝐖𝐡𝐚𝐭’𝐬 𝐀𝐜𝐭𝐮𝐚𝐥𝐥𝐲 𝐇𝐚𝐩𝐩𝐞𝐧𝐢𝐧𝐠? When `isolatedModules` is enabled, each file is compiled independently. So TypeScript must know exactly: - what is real JavaScript code that needed at runtime. - what is only for type checking. If you export a type like a normal value, the compiler expects it to exist in JavaScript but it doesn’t. That’s why the build fails. ❌ 𝐖𝐫𝐨𝐧𝐠 𝐖𝐚𝐲 export { Profile, saveProfile } from './helpers'; If `Profile` is a type and `saveProfile` is a function, this causes errors in isolated builds. ✅ 𝐂𝐨𝐫𝐫𝐞𝐜𝐭 𝐖𝐚𝐲 // runtime exports export { saveProfile } from './helpers'; // type-only exports export type { Profile } from './helpers'; Easy Rule to Remember: - Use `export {}` for functions, components, constants - Use `export type {}` for types and interfaces Have you encountered this issue? 😀 #creowis #TypeScript #NextJS #FrontendDev #EngineeringTips #WebDevelopment

Recently, I started exploring Bun.js, a modern JavaScript runtime built for performance and developer experience. What is Bun? Bun is a JavaScript runtime (like Node.js) that allows us to run JavaScript and TypeScript outside the browser — mainly for backend servers, APIs, and tooling. Why Bun is interesting: ⚡ Extremely fast startup and execution 📦 Built-in package manager (no npm/yarn needed) 🧠 Native TypeScript support (no extra setup) 🌐 Follows Web Standards (fetch, Request, Response) 🧰 Runtime + bundler + test runner in one tool What I like most is that Bun reduces complexity: fewer tools, less configuration, and faster development. Node.js is still dominant in production, but Bun is a strong step forward for modern backend development — especially for startups and performance-focused projects. Currently learning Bun by focusing on fundamentals first: servers, fetch lifecycle, async handling, and clean architecture. Learning in public, one step at a time 💪 #BunJS #JavaScript #BackendDevelopment #WebStandards #LearningInPublic #SoftwareEngineering#google#FAANG#Openai#viratkohli

🚀 Day 10 of Learning React – JSX with Curly Braces {} Today I learned one of the most important concepts in React: using JavaScript inside JSX with curly braces {}. 🔹 In JSX, curly braces allow us to embed JavaScript expressions directly inside HTML-like code. 🔹 We can perform: Mathematical operations Variable rendering Function calls 📌 Example: 2 * 2 = {2 * 2} Hi, {name.toUpperCase()} This makes JSX powerful and dynamic, allowing UI to update based on logic and data. 💡 Key takeaway: JSX is not HTML — it’s JavaScript with superpowers ✨ Excited to keep building and learning React step by step! 💪⚛️ #Day10 #ReactJS #JSX #WebDevelopment #FrontendDeveloper #LearningInPublic #JavaScript #ReactJourney

Is Node.js's event loop behavior causing you sleepless nights? 🌜 A few days ago, I wrestled with a vexing bug triggered by the notorious "zombie promises." Imagine this: your async function is clean and straightforward, yet somewhere in production, chaos ensues. Here's what happened: I had a function that nested several promises. Each promise theoretically resolved, but under load, some got abandoned, leaving a queue of unresolved promises. The pesky part? The event loop didn't even notice or care! The root cause was buried in promise chaining without proper error handling. When a promise rejects and you haven't explicitly caught it, the rejection can go unnoticed, clogging your event loop with zombie promises. This isn't just hard to spot on a good day but a nightmare when it only surfaces under load. The fix? Embrace a rigorous promise error handling approach. Catch and handle all rejections, and consider using `.finally()` to clean up resources or log unhandled rejections. It’s a one-liner but saves hours of debugging! Have you dealt with similar quirks? Share your story or solution in the comments! #Nodejs #JavaScript #AsyncChallenges #CodingLife #Nodejs #JavaScript #AsyncChallenges #CodingLife

Stop Chasing the “Latest Framework” I see a lot of beginners hopping from one framework to another — React today, Vue tomorrow, Svelte next week — thinking that’s the shortcut to being a good developer. Here’s the truth: tools are only as good as your fundamentals. Spend time really mastering: JavaScript fundamentals HTML & CSS deeply Debugging skills Once your foundation is solid, learning any framework becomes easy. Until then, chasing trends is just noise. Focus on building strong skills first. The frameworks will follow. #WebDevelopment #JavaScript #FrontendDevelopment #CodingTips #DeveloperMindset

Every JS project starts small. Then it installs its personality. 𝗻𝗼𝗱𝗲_𝗺𝗼𝗱𝘂𝗹𝗲𝘀 What’s happening behind the scenes is simple: 𝗻𝗽𝗺 𝗶𝗻𝘀𝘁𝗮𝗹𝗹 doesn’t just invite your dependency… It invites 𝗶𝘁𝘀 𝗳𝗿𝗶𝗲𝗻𝗱𝘀, 𝘁𝗵𝗲𝗶𝗿 𝗳𝗿𝗶𝗲𝗻𝗱𝘀, 𝗮𝗻𝗱 𝗮 𝗳𝗲𝘄 𝗽𝗲𝗼𝗽𝗹𝗲 no one remembers adding to the group chat 📦📦📦 🧠 Quick reminder: a massive node_modules folder doesn’t mean your final build is massive. Dev dependencies just tend to be a little… emotionally expressive. 🧰 And when your disk space starts filing complaints, tools like pnpm help by sharing packages across projects instead of copying them like it’s 2012. JavaScript Mastery #JavaScript #NodeJS #npm #DevTools #DeveloperHumor