Albert Em’s Post

React is just not about useState👀 My App.jsx had become a mess — multiple useEffects, auth checks, socket connections, loading states… everything in one place. It worked, but reading it felt like debugging a jungle 😅 That’s when it hit me — this is exactly where custom hooks shine. Instead of stuffing all logic inside components, we can extract it into reusable hooks like: useAuth() → handles user + login state useSocket() → manages connection & events useLoading() → controls loaders Basically turning this 👇 👉 one giant useEffect into this 👇 👉 clean, readable, modular logic What I love about custom hooks is: They clean up components They remove duplication And they make your code feel more like building blocks than chaos Also an underrated point: 👉 Custom hooks don’t share state, they just share logic. (React) That means every component still stays independent, which is exactly what we want. Still learning, but this small shift already made my code 10x better. If you’re writing long useEffects… that’s probably your signal to create a hook ⚡ #ReactJS #FrontendDevelopment #WebDevelopment #CodingJourney #JavaScript

Why does useEffect run twice in React 18? 🤔 - If you’re seeing your API calls execute twice in development, don’t panic. - In React 18, when using StrictMode, React intentionally mounts, unmounts, and re-mounts components to detect side effects and missing cleanup logic. - This happens only in development — not in production builds. - React is stress-testing your components to ensure they are future-ready for concurrent rendering. Key takeaway: - If your useEffect runs twice, your app isn’t broken — React is helping you catch potential bugs early. Development Mode (StrictMode ON) 1️⃣ Mount Component    ↓ 2️⃣ Run useEffect    ↓ 3️⃣ Cleanup useEffect    ↓ 4️⃣ Re-Mount Component    ↓ 5️⃣ Run useEffect Again Coding: useEffect(() => {  console.log("Effect ran");  return () => {   console.log("Cleanup ran");  }; }, []); output Effect ran Cleanup ran Effect ran #ReactJS #Hooks #FrontendDevelopment #JavaScript #WebDevelopment

React has a LOT of moving parts. So I built a complete visual mindmap to make sense of it all. 🧠 Not just components and hooks — this covers the full picture: ⚡ Data Flow | 📁 File Structure | 🌍 .env Setup | ⚙️ Vite Config | 🔄 Change Scenarios From index.html all the way through to your UI layer — every layer explained, every connection mapped. Whether you're just starting out or need a refresher on how a production React app is actually structured, I hope this helps you see the big picture. Check it out 🔗https://lnkd.in/gX-7Eg4y #React #Vite #FrontendDeveloper #WebDev #ReactArchitecture #JavaScript #VibeCoder

5 things every Next.js beginner must know 👇 I’m going to save you weeks of confusion right now. When I started Next.js, nobody told me these 5 things. I had to figure them out the hard way. You won’t. 01 🗂️ Your folder IS your route Create app/about/page.tsx and /about just exists. No router config. No setup. Just make a folder. 02 ⚙️ Components are Server by default Forget useEffect for data fetching. Make your component async and fetch directly inside it. The data is there before the page even loads. 03 🖱️ “use client” is for interactivity ONLY Buttons, forms, hover effects — that’s when you add "use client". Never add it to a layout or you’ll tank your performance. 04 ⚡ layout.tsx wraps every page automatically Navbar, footer, fonts — put them in app/layout.tsx once and forget about it. Every page inherits it. No imports needed. 05 🚨 loading.tsx is free UX Create a loading.tsx file next to any page and Next.js shows it while data loads. Zero extra code. Instant better experience. I wish someone handed me this list on day one. Which one surprised you most? Comment the number below 👇 Save this for the next time someone asks you how to start Next.js 🔖 #NextJS #React #WebDevelopment #Beginners #LearnToCode #JavaScript #Frontend #100DaysOfCode #NextJSTips #Programming #WebDev #CodingTips

From Dev Server to First Render — What Happens Inside the Browser? In my previous post, we explored: npm create vite@latest → npm install → npm run dev Now let’s see what happens when your app actually runs in the browser. Step 1 — Browser Requests the App Open: 👉 http://localhost:5173 The browser asks Vite for your app. Vite responds with: index.html Script pointing to /src/main.jsx Inside index.html: <divid="root"></div> This is where React will render your UI. Step 2 — main.jsx Runs ReactDOM.createRoot(document.getElementById("root")).render(<App />); React finds the root div Prepares to manage everything inside it Starts rendering <App /> This is the start of your UI. Step 3 — JSX → JavaScript JSX isn’t valid JavaScript for browsers. ESBuild converts it instantly to JS Browser can now execute it 💡 Why? Only JS can run in the browser. Step 4 — Virtual DOM Updates React builds a Virtual DOM (JS representation of UI) Compares it to the real DOM Updates only what changed This makes React fast and efficient. Step 5 — First Paint The browser: Calculates layout Applies styles Paints pixels ✨ And your React app appears! 🔥 Hot Module Replacement (HMR) When you edit a component: Vite detects changes ESBuild recompiles instantly React updates only the affected part No full reload. No lost state. Just instant updates. The Complete Flow npm run dev ↓ Browser requests app ↓ index.html loads ↓ main.jsx executes ↓ React renders <App /> ↓ Virtual DOM → Real DOM ↓ Browser paints UI That one command starts a full chain of events — from server → transpile → render → paint. Next time you start a Vite React app, remember: you’re not just running commands — you’re orchestrating a small symphony of tools working together. #SoftwareEngineering #WebDevelopment #FrontendDevelopment #Programming #Coding #ReactJS #JavaScript #ViteJS #FrontendEngineer #ReactDeveloper #LearnToCode #DevCommunity

⚛️ React.js Performance Optimization Cheat Sheet In this guide, we'll go over some techniques you can use to improve the performance of your React apps. ✅ React.memo ✅ useMemo/useCallback ✅ Code splitting ✅ Virtualization ✅ Handler/object allocation ✅ Keys for lists ✅ Minimal state ✅ Profiling & monitoring Save & share with your team! Download Our Free Full-Stack Developer Starter Kit ➡️ https://lnkd.in/gvzdeSJn --- If you found this guide helpful, follow TheDevSpace | Dev Roadmap, w3schools.com, and JavaScript Mastery for more tips, tutorials, and cheat sheets on web development. Let's stay connected! 🚀 #React #Performance #JavaScript #WebDevelopment #CheatSheet #Frontend #Coding

Stop over-optimizing your React apps. 🛑 We’ve all been there: adding useMemo to every variable because we think we’re being "performance-conscious." But here is the hard truth: Optimization has a cost. Every time you use useMemo, you’re asking React to allocate memory and perform a dependency check. If you’re using it for basic math or primitive values, the overhead of the hook is actually more "expensive" than the calculation itself. When to actually hit the memo button: ✅ Heavy Lifting: Complex data filtering or sorting. ✅ Referential Integrity: Keeping objects stable for useEffect dependencies. ✅ Pure Components: When passing props to a React.memo child. When to let it go: ❌ Simple string concatenations. ❌ Primitive values (booleans, numbers). ❌ Components that rarely re-render anyway. Let’s write cleaner🚀 #ReactJS #WebDevelopment #FrontendEngineering #Javascript #ProgrammingTips #ReactPerformance

58% smaller bundle? Here's what actually worked. Our Next.js app was embarrassingly slow. I finally sat down for a few days and dug into why. Turns out we were shipping a ton of JavaScript nobody asked for !! Here's the exact process I did: Step 1: Run `next build --analyze`  Found duplicate dependencies and unused code paths. Step 2: Lazy load heavy components  Moved chart libraries and rich text editors behind dynamic imports. Step 3: Split vendor bundles  Separated framework code from business logic. Step 4: Tree-shake aggressively  Replaced moment.js with date-fns. Removed lodash for native methods. Step 5: Test on real devices  Used Chrome DevTools throttling to simulate slow connections. Result: Load time dropped from 8.2s to 2.1s If your app feels sluggish, start there. The bundle analyzer doesn't lie. The best part? Zero changes to user-facing features. What's the last performance fix that genuinely surprised you? #WebPerformance #NextJS #JavaScript #WebDev #Frontend

My Next.js app felt slow. Not broken. Just… slow. And the fix wasn’t a rewrite. It was removing bad defaults. Here’s what actually moved the needle 👇 → Shipped less client JavaScript → Stopped fetching data in the browser by habit → Optimized images properly (LCP matters) → Lazy-loaded heavy UI (charts, modals, dashboards) → Used caching intentionally, not randomly The biggest lesson? → Performance isn’t magic → It’s architecture + discipline → Next.js rewards server-first thinking If your app feels “almost fast,” this is probably why. 🔁 Share this with someone who says “Next.js is slow.” #Nextjs #WebPerformance #FrontendDevelopment #Reactjs #JavaScript #TypeScript #WebDev #PerformanceOptimization #CoreWebVitals #FrontendEngineer #SoftwareEngineering #BuildInPublic #DevTips #TechCareers #Programming

Day 13 - 30 Days of 30 Projects challenge— HTML Previewer App with Next.js 🚀 As part of my 30 Days of 30 Projects challenge, I’ve built a HTML Previewer App using Next.js (App Router), TypeScript, Tailwind CSS, and shadcn/ui. ✨ What this app does: Write HTML in a textarea Instantly see the rendered preview Responsive & clean UI Built with modern Next.js practices This project helped me strengthen my understanding of: Client vs Server Components Dynamic HTML rendering Tailwind + shadcn integration Debugging real-world npm & dependency issues 💪 🔗 Live Demo: 👉 (https://lnkd.in/ddqC9mCh) Excited to keep pushing forward and learning by building 🚀 Feedback is always welcome! Asharib Ali #Day13 #30DaysOfCode #30Projects #NextJS #ReactJS #FrontendDevelopment #TailwindCSS #TypeScript #WebDevelopment #LearningByBuilding #DeveloperJourney #Coding #100DaysOfCode #FullStack #JavaScript #Frontend #WebDev #CodeNewbie #BuildInPublic