Optimize Your Code with .find() Over .filter()

useEffect is one of the most misunderstood hooks in React. It’s not for: • calculating derived values • syncing state with state • fixing re-render issues It is for: • data fetching • subscriptions • timers • syncing with browser or external systems If something can be calculated from existing state or props, it doesn’t belong in useEffect. The less effects you write, the more predictable your React code becomes. #react #frontend #javascript #webdev #cleanCode

💡 𝐑𝐞𝐚𝐜𝐭 𝐂𝐨𝐧𝐜𝐞𝐩𝐭 – 𝐏𝐫𝐨𝐩𝐬 ❓ Ever wondered how 𝐝𝐚𝐭𝐚 𝐟𝐥𝐨𝐰𝐬 between components in React? Today I learned about 𝐏𝐫𝐨𝐩𝐬, a core concept that makes React components reusable 🚀 🔹 Props are used to 𝐩𝐚𝐬𝐬 𝐝𝐚𝐭𝐚 𝐟𝐫𝐨𝐦 𝐩𝐚𝐫𝐞𝐧𝐭 𝐭𝐨 𝐜𝐡𝐢𝐥𝐝 𝐜𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬 🔹 They help build 𝐝𝐲𝐧𝐚𝐦𝐢𝐜 & 𝐫𝐞𝐮𝐬𝐚𝐛𝐥𝐞 𝐔𝐈 🔹 Props are 𝐫𝐞𝐚𝐝-𝐨𝐧𝐥𝐲  (cannot be modified by child component) In the attached example, name is passed as a 𝐩𝐫𝐨𝐩 from parent to child component 👇 What should I share next — useEffect with API call or custom hooks? 🤔 #ReactJS #JavaScript #Props #FrontendDevelopment #LearningInPublic #ReactDeveloper

🚀 𝗧𝗿𝗲𝗲 𝗦𝗵𝗮𝗸𝗶𝗻𝗴 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 / 𝗝𝗦 🌳✨ Tree Shaking is a bundling technique that removes unused code from your final build. ✅ Smaller bundle size ✅ Faster load time ✅ Better performance 💡 Works best with 𝗘𝗦𝟲 𝗶𝗺𝗽𝗼𝗿𝘁𝘀/𝗲𝘅𝗽𝗼𝗿𝘁𝘀. Example: 𝘪𝘮𝘱𝘰𝘳𝘵 { 𝘥𝘦𝘣𝘰𝘶𝘯𝘤𝘦 } 𝘧𝘳𝘰𝘮 "𝘭𝘰𝘥𝘢𝘴𝘩"; #ReactJS #JavaScript #Frontend #Performance #WebDevelopment

𝗦𝗰𝗮𝗹𝗮𝗯𝗹𝗲 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗙𝗼𝗹𝗱𝗲𝗿 𝗦𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲 𝗳𝗼𝗿 𝗠𝗼𝗱𝗲𝗿𝗻 𝗥𝗲𝗮𝗰𝘁 𝗔𝗽𝗽𝘀 A well-structured frontend codebase is the foundation of scalable and maintainable applications. Here’s the React (Vite-based) folder structure I follow, focused on: ✅ Clear separation of concerns ✅ Reusable and modular components ✅ Clean routing & services layer ✅ Better scalability for growing applications This approach helps teams collaborate efficiently and keeps the codebase easy to understand and evolve as the project grows. 📚 𝗧𝗼𝗽 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀 𝗳𝗼𝗿 𝗖𝗼𝗱𝗶𝗻𝗴 𝗘𝗻𝘁𝗵𝘂𝘀𝗶𝗮𝘀𝘁𝘀 🌐 w3schools.com 💡JavaScript Mastery #ReactJS #FrontendDevelopment #CleanCode #WebDevelopment #MERN #JavaScript #Vite #SoftwareArchitecture #coding

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 10/30 I increased state twice… but it only updated once 😐 setCount(count + 1) setCount(count + 1) I expected +2 I got +1 Because React batches state updates. Both lines used the same OLD value of `count`. Fix 👇 setCount(prev => prev + 1) Functional updates always receive the latest state. This is very important in: counters, carts, likes, and real-time UI. Day 11 tomorrow 👀 #30DaysOfCode #reactjs #javascript #frontend #webdevelopment #codeinuse

Most “architecture debates” I’ve seen are really just naming debates. If the name is vague, people implement different things. If the name is too specific, you can’t evolve it. If the name is honest, the codebase gets calmer. Small trick: name things by the *decision they hide*, not by the *tech they use*. What’s the hardest thing you’ve had to name lately? #javascript #nodejs #reactjs #softwareengineering #cleancode

null vs undefined in JavaScript — Same but Different One of the most confusing topics in JavaScript is the difference between null and undefined. Here’s the simple breakdown: • undefined → A variable is declared but not assigned. • null → An intentional empty value assigned by the developer. Key difference: null == undefined // true null === undefined // false Best Practice: ✔ Use null when you intentionally want no value ✔ Let undefined be the default state ✔ Prefer strict equality (===) Understanding this small difference can prevent many hidden bugs in real-world projects. #JavaScript #WebDevelopment #Coding #Frontend #Developers

Tiny JS functions, huge code clarity wins! Complex JavaScript? Break it down. Small, single-responsibility functions are your best friends. They're easier to test, debug, and reuse across your React components or Node.js modules. 🚀 Think of them as tiny, dependable machines. Each does one job perfectly. This approach builds confidence in your system, making future refactors a breeze. ✨ Consistent, descriptive naming for variables and functions also pays dividends. It clarifies intent and drastically improves readability for anyone (including future you!) touching the codebase. 💡 Follow me for more insights on simplifying complex dev work and building robust systems. 🌱 #JavaScript #WebDevelopment #CodeQuality #JuniorDeveloper #JrToSr

🚨 𝐇𝐨𝐰 𝐭𝐨 𝐅𝐢𝐱 𝐓𝐲𝐩𝐞𝐒𝐜𝐫𝐢𝐩𝐭 𝐢𝐬𝐨𝐥𝐚𝐭𝐞𝐝𝐌𝐨𝐝𝐮𝐥𝐞𝐬 𝐄𝐫𝐫𝐨𝐫 𝐢𝐧 𝐍𝐞𝐱𝐭.𝐣𝐬? 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

Most JavaScript bugs don’t come from logic. They come from misunderstanding null vs undefined. In TypeScript, these two are not interchangeable 👇 ◾undefined → value was never assigned ◾null → value was intentionally set to “nothing” Why this matters: strict mode will block unsafe assumptions APIs become more predictable state management gets cleaner fewer “works on my machine” moments If you’re serious about writing scalable TypeScript, this difference is a must-know. 💾 Save this 💬 Share with a dev who still mixes them up #TypeScript #JavaScript #WebDev #CleanCode #Frontend #Backend #LearningInPublic #DevCommunity