spent the last week going deep into React to understand how rendering actually works under the hood. turned it into a video , tracing what happens between writing JSX and seeing pixels on screen. every step, from createElement to fiber nodes to the one appendChild call that makes the page appear. this is part 1 covering the initial render. part 2 on re-renders and reconciliation is coming next. link : https://lnkd.in/dycpqavw if you've ever wondered what the "virtual DOM" actually is (spoiler: it's just plain objects that get thrown away every render), this one's for you. #react #javascript #frontend #webdev

Scroll events giving you headaches? 😩 There's a better way. The Intersection Observer API lets you detect when elements enter the viewport — no scroll listeners, no layout thrashing, just clean and efficient JS. ⚡ I just published a full breakdown with real code examples, tips, and common mistakes to avoid. 🔧 Read it now 👉 hamidrazadev.com #javascript #webdev #frontend #learntocode #100daysofcode

🚀 💡 JavaScript Tricky Question Explanation const arr = [4, 10, 2, 8]; const result = arr.find(num => num > 5) + arr.findIndex(num => num > 5); console.log(result); 👉 Output: 11 👉 Explanation: * find() returns the first value > 5 → `10` * findIndex() returns its index → `1` * Final result → `10 + 1 = 11` ⚡ Both stop at the **first match** #JavaScript #WebDevelopment #Frontend #CodingInterview #JSConcepts

Hey network! 👋 I’ve been diving into learning JavaScript recently and wanted to share my latest practice project: a classic Simon Says Game! 🎮 Building this was a fantastic way to get hands-on experience with Vanilla JS, specifically focusing on DOM manipulation, event handling, and sequence logic. It was a fun challenge keeping track of the memory arrays and user inputs! 💻 Check out the code here: https://lnkd.in/gwGmr_37 🔗 Let's connect: https://lnkd.in/gtzKeBxq Thoughts and feedback are always welcome! #JavaScript #WebDevelopment #Frontend #CodingJourney #LearningToCode #Projects

Why does React say: "Don't call hooks conditionally"? 🤔 Let’s break it down simply. React doesn’t track hooks by name. It tracks them by order. Every render, React just walks through hooks like this: 1st hook → 2nd hook → 3rd hook That’s it. No labels. No IDs. Just position. Now imagine this 👇 if (condition) { useEffect(() => { // do something }); } 👉 First render: Hook1 → Hook2 → Hook3 👉 Next render (condition = false): Hook1 → Hook3 Now React gets confused 😵 It expects Hook2… but suddenly sees Hook3. This breaks the internal hook mapping — and boom 💥 unexpected bugs or crashes. 👉 The rule exists because hooks must run in the same order on every render. That’s why: ❌ No hooks inside conditions ❌ No hooks inside loops ❌ No hooks inside nested functions 👉 Always call hooks at the top level. Once you understand this, React hooks feel much less “magical” and more predictable. #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #LearnInPublic

💡 Mastering Closures in JavaScript! Today I explored one of the most powerful concepts in JavaScript — Closures 🔥 Built a small utility function makeTextSizer() that dynamically changes font size using closures. The inner function remembers the size even after the outer function has executed — and that’s the magic! ✨ 🧠 Key Learnings: 🛠️ Example use case:Click a button → dynamically update UI → clean & efficient code This is why JavaScript feels so powerful once you understand what’s happening behind the scenes. 🚀 On to deeper concepts next! #JavaScript #WebDevelopment #Frontend #Closures #CodingJourney #LearnInPublic #100DaysOfCode

Understanding the React Component Lifecycle 🌿⚛️ Every React component goes through three key phases: 🟢 Mount – when the component is created and added to the DOM 🔵 Update – when state or props change, triggering re-renders 🟣 Unmount – when the component is removed from the DOM With modern React, the useEffect hook ties it all together: Runs after mount (initial render) Runs after updates (when dependencies change) Can clean up on unmount (return function) useEffect(() => { // side effect here return () => { // cleanup on unmount }; }, []); Mastering this flow helps you manage side effects like API calls, subscriptions, and timers cleanly and predictably. #React #WebDevelopment #Frontend #JavaScript #ReactJS #Coding

🎨 I got tired of recoloring SVGs one at a time. You know that thing where you need 30 icons in a new brand color and you're sitting there doing find-and-replace on hex codes file by file? I kept doing that for way too long before I thought, okay, I should just automate this. So I built SVG Batch Recolor Tool. Here's how it works: 📋 Paste a bunch of SVG URLs 🎯 Pick a hex color ⚡ Hit recolor — all fills, strokes, and inline styles update instantly 👀 Live preview grid so you see what you're getting 📦 Download individually or grab everything as a ZIP It fetches the SVGs server-side (because CORS will ruin your afternoon otherwise), does the recoloring client-side with regex, and bundles the output with jszip. 🛠 Built with: Next.js 15 · React 19 · Tailwind v4 Honestly it's a simple tool. I just couldn't find one that worked the way I wanted, so here we are. The whole thing is open source 👇 🔗 Link: https://lnkd.in/gK-QQwi7 ♻️ Repost if this could save someone's afternoon. #webdev #nextjs #react #opensource #svg #developertools #frontend #javascript #typescript

🚀 JavaScript Output Challenge #5 (Hoisting Trap) Looks simple… but is it really? 👀 🧠 Question: 👉 What will be printed in the console? ⚠️ Don’t run the code. Try to think about: Hoisting Function declaration vs variable declaration Execution context 🤔 Bonus: Why does JavaScript behave this way internally? 💬 Drop your output + reasoning in comments Let’s see who understands JavaScript deeply 🔥 📌 Detailed explanation coming soon... #javascript #webdevelopment #frontend #codingchallenge #reactjs #nodejs

useEffect — The Hook That Confused Me (Until I Got This) useEffect was confusing until I understood one thing: dependencies control everything. The Rule: javascript // Runs ONCE after mount useEffect(() => { fetchData(); }, []); // Runs when userId changes useEffect(() => { fetchUser(userId); }, [userId]); // Runs on EVERY render (avoid!) useEffect(() => { console.log('render'); }); What I Learned the Hard Way: Missing dependencies = stale data Adding everything = infinite loops Cleanup functions matter (especially for subscriptions) My Checklist: What should trigger this effect? Do I need to clean up? Can this cause unnecessary renders? What's your React Hook survival tip? #ReactJS #JavaScript #FrontendDeveloper #WebDev #CodingTi