🤯 I wrote an article about why you don't need useEffect (like the docs). Then I turned it into an AI skill that enforces it automatically 👇 Every time I post a React code snippet, someone tells me I shouldn't use useEffect there. And every time, someone else argues I should. So I wrote the definitive guide. One question decides everything: is this syncing with an external system? If the answer is no, there's a better alternative for every case: 1️⃣ Transforming data? Just calculate it during render. The useEffect version renders with stale data first, then re-renders with the correct data. Two passes for something that could be zero. 2️⃣ Resetting state on prop change? Use the key prop instead of watching props in an effect. React unmounts the old component and mounts a new one, automatically resetting all state, including child components you forgot about. 3️⃣ Chaining effects? When selecting a country triggers an effect that resets the city, which triggers another effect that resets the district, you get three re-renders painting intermediate states nobody needs. Move all downstream resets into the event handler that started the chain, and React batches them into a single render. 4️⃣ Fetching data? useEffect works here, technically, since the network is an external system. But you'll need to handle race conditions, caching, deduplication, and background revalidation yourself. At that point you've built TanStack Query, so just use TanStack Query. 5️⃣ Subscribing to an external store? useSyncExternalStore prevents tearing during concurrent renders, something your useEffect version won't catch until your app gets complex enough for React to split work across frames. I also packaged the full decision tree as a Claude Code skill. Two commands to install, and it forces the AI to ask the same question you should be asking before every useEffect. The article covers the ESLint plugin for catching these patterns mechanically too, which is honestly more useful long-term than any article because it keeps working after the person who read this leaves the project. Link to the full article in the comments 👇 Are you still reaching for useEffect by default, or have you already trained yourself out of it? #React #JavaScript #WebDev #CleanCode #TanStackQuery

Tailfind development insights which blowed my mind. - 95% code wrote AI - 430+ commits created - 40~ commits daily - 300+ regression tests - Developed in 3 weeks - Automated self-learning - Automated regression testing - Automated parallelism for scheduled testing/learning - Keeps improving every day Now I can pull Github header and convert it to Tailwind html in seconds, which is not Tailwind based and obfuscated Chrome Extension: https://lnkd.in/gZwSUTbE Website: https://tailfind.org #tailwindcss #webdevelopment #chromeextension #frontenddevelopment #angular #react #vue #svelte #frontend

It's 2026. We shouldn't still be hand-coding skeleton loaders 🤦♂️ Here's a quick intro in case this is your first time hearing about them: • In an ideal world, data would be available instantly for users • We don't live in that world, so we need to show something while data loads • That "something" is called a skeleton loader • Skeleton loaders mimic the structure of the eventual content So yes, they're a necessary evil: every time you build a data-fetching component, you often end up building another one just to represent its loading state. Here's the problem with how we currently handle them: - Every data-fetching component needs a matching skeleton component - If your app has 100 components, that's 100 extra (non-core) components 😤 - Any update to the main component means updating the skeleton too or they drift out of sync 😭 I'm running into this firsthand while building a product. For every component using React <Suspense> and TanStack Query's suspense mode, I still have to create a separate skeleton component. And more often than not, they fall out of sync. Yes, I've tried copying components and asking AI to generate skeletons. It works fairly well, but the maintenance burden is still there. So I've started exploring alternatives that can generate skeletons dynamically from existing components: - auto-skeleton-react - React Skeletonify - skeleton-loading-react - boneyard-js Haven't tried them yet, but I'll share what I learn along the way. If you've found a better approach, I'd love to hear it 👇 #SoftwareEngineering #FrontendDevelopment #ReactJS #JavaScript #WebDevelopment #DeveloperExperience #DevTools #Programming #TechCommunity #UIEngineering

🚫𝗜𝗳 𝘆𝗼𝘂'𝗿𝗲 𝘂𝘀𝗶𝗻𝗴 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲 𝗳𝗼𝗿 𝘁𝗵𝗶𝘀… 𝘀𝘁𝗼𝗽. I still see this all the time in React codebases… (and yeah, I used to do it too 😅) It looks fine at first. But it slowly creates: → duplicated state → unnecessary re-renders → effects you didn’t really need I ran into this recently while working on an analytics feature. Refactored it in 2 minutes → cleaner code, fewer bugs. Rule I follow now: If you can derive it from state or props… just derive it. Fewer states = fewer problems. Curious: What’s a “why is this even state?” pattern you’ve seen before?

React development with Claude Code has one quietly annoying chore — checking the browser console. Open DevTools → copy the relevant logs into Claude. That round trip is wasted effort. I redesigned frontend logging on the premise that 𝐀𝐈 𝐢𝐬 𝐭𝐡𝐞 𝐫𝐞𝐚𝐝𝐞𝐫. 𝟏. 𝐃𝐫𝐨𝐩 𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠. 𝐔𝐬𝐞 𝐚 𝐜𝐮𝐬𝐭𝐨𝐦 𝐥𝐨𝐠𝐠𝐞𝐫 𝐭𝐡𝐚𝐭 𝐩𝐨𝐬𝐭𝐬 𝐭𝐨 𝐚 𝐥𝐨𝐠 𝐬𝐞𝐫𝐯𝐞𝐫. Browser → log server → log file → Claude Code reads the file. Claude only sees the signal, not the noise. 𝟐. 𝐓𝐰𝐨 𝐚𝐱𝐞𝐬 𝐨𝐟 𝐝𝐞𝐬𝐢𝐠𝐧. 𝐅𝐨𝐫𝐦𝐚𝐭: every log has an event name, the operation (URL or function), and a success/failure field. Fix this rule and AI writes new logs at the same granularity as the existing ones. 𝐎𝐩𝐞𝐫𝐚𝐭𝐢𝐨𝐧 𝐟𝐥𝐨𝐰: output and reception both move to AI. - Output — where and what to log → AI writes it - Reception — read the logs and judge what happened → AI reads it 𝟑. 𝐓𝐡𝐞 𝐝𝐞𝐛𝐮𝐠𝐠𝐢𝐧𝐠 𝐥𝐨𝐨𝐩 𝐫𝐮𝐧𝐬 𝐨𝐧 𝐢𝐭𝐬 𝐨𝐰𝐧. Bug → AI adds logs → reproduce → AI reads logs → AI finds the cause → AI fixes. The human just says "it's broken." 𝐖𝐡𝐚𝐭 𝐚𝐜𝐭𝐮𝐚𝐥𝐥𝐲 𝐜𝐡𝐚𝐧𝐠𝐞𝐝 - Copy-pasting from DevTools to Claude went to zero - I only judge spec questions and do the final review - Logs aren't just for humans anymore — they're for AI to read That premise changes what good log design looks like. Original Article: https://lnkd.in/gDmsTWhH #AI #ClaudeCode #FrontendDevelopment #DeveloperProductivity #SoftwareEngineering

Day 25 - One query. Three resources. Zero overfetching. 🚀TechFromZero Series - GraphQLFromZero 🌐 Try it live: https://lnkd.in/dncBEfwE This isn't a Hello World. It's a real GraphQL gateway: 📐 React → Apollo Client → GraphQL → Jikan REST API 🔗 The full code (with step-by-step commits you can follow): https://lnkd.in/dm9H_838 🧱 What I built (step by step): 1️⃣ Apollo Server 5 + Express 5 + TypeScript backend on a single /graphql endpoint 2️⃣ Tiny native-fetch Jikan REST client with an in-process TTL cache 3️⃣ A real GraphQL schema — Anime, Character, Image, Genre, Studio types 4️⃣ Nested resolvers so list views stay cheap and the detail page pulls characters in the SAME request 5️⃣ Vite + React + Apollo Client UI with shared queries and a fragment 6️⃣ Debounced search page that mirrors its query into the URL 7️⃣ Detail page that loads metadata + characters + voice actors in one round-trip 8️⃣ Multi-stage Dockerfile, Render Blueprint backend, Vercel frontend — both live 💡 Every file has detailed comments explaining WHY, not just what. Written for any beginner who wants to learn GraphQL by reading real code — with full clarity on each step. 👉 If you're a beginner learning GraphQL, clone it and read the commits one by one. Each commit = one concept. Each file = one lesson. Built from scratch, so nothing is hidden. 🔥 This is Day 25 of a 50-day series. A new technology every day. Follow along! 🌐 See all days: https://lnkd.in/dhDN6Z3F #TechFromZero #Day25 #GraphQL #LearnByDoing #OpenSource #BeginnerGuide #100DaysOfCode #CodingFromScratch

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗦𝘁𝗿𝗶𝗻𝗴𝘀 𝗹𝗼𝗼𝗸 𝘀𝗶𝗺𝗽𝗹𝗲. 𝗧𝗵𝗲𝘆'𝗿𝗲 𝗻𝗼𝘁 Here's the short version: Strings power almost every real-world app: form validation, APIs, text processing, i18n, frontend rendering. Yet most developers never look under the hood. Here's what changes when you do • Strings are immutable Every "modification" creates a brand new string in memory. No in-place edits. Ever. • UTF-16 encoding explains the weird .length behavior "😀".length === 2, not 1. Emojis and many Unicode characters use two code units — not one. • Primitive vs Object — they are NOT the same "hello" and new String("hello") behave differently in comparisons, typeof checks, and method calls. Mixing them up causes silent bugs. • charCodeAt() is the wrong tool for Unicode Use codePointAt() and String.fromCodePoint() instead. They handle characters outside the Basic Multilingual Plane correctly. • Tagged templates are massively underused Template literals aren't just cleaner concatenation. Tagged templates power SQL sanitization, CSS-in-JS libraries, and GraphQL query builders. • Intl.Segmenter exists for a reason Splitting text by spaces breaks for many languages. Intl.Segmenter handles proper word and grapheme segmentation — essential for i18n. • V8 doesn't store strings the way you think Internally, V8 uses ConsStrings, SlicedStrings, and String Interning to avoid redundant allocations and boost performance behind the scenes. 𝗞𝗲𝘆 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆 Understanding strings deeply = cleaner, safer, more performant code. The smallest data type often teaches the biggest engineering lessons. What's a string behavior that caught you off guard? Drop it below #JavaScript #WebDevelopment #FrontendDevelopment #V8Engine #Programming #SoftwareEngineering #LearningInPublic #DeveloperJourney #ECMAScript

I got sick of my new tab page doing nothing. So I built my own. You know the drill: Cmd+T on Mac is muscle memory. You do it a hundred times a day. Half the time you already know where you're going — another AI tab, the same bookmarks, the same five sites — but the browser still makes you take the scenic route through a blank page first. I wanted that first screen to actually meet me where I already am. So I did what any developer does on a weekend — I built a replacement. Meet Tabreeze — a fully customizable new tab dashboard built with React + TypeScript + Tailwind + Vite. It runs as a Chrome extension and turns your new tab into an actual productive space: -The coolest widgets — a search bar that sends you straight to the AI provider you picked (ChatGPT, Claude, Perplexity, and more), tasks, calendar, weather, homelab, and the rest of your daily stack -Fully yours — tile-based layout; add, remove, and rearrange widgets until the page matches how you actually work -Fast and light — snappy, no bloat, built to stay out of your way This is a developer preview — no Chrome Web Store yet, just grab it from GitHub, load unpacked, and try it. If something clicks (or doesn't), I'd love to hear it — leave a comment here, DM me, or open an issue. Feature requests are very welcome. And if you want to run with it: fork it, twist it, make it yours. That's the whole point. 👇 GitHub link in the comments 👇 #buildinpublic #chrome #edge #browserextension #react #typescript #sideproject #webdev #opensource #devtools #ai

🤯 Ever hit “Update”… and your UI still shows OLD data? I thought my API was broken. User clicks: 👉 Update Profile API responds: 👉 Success ✅ But the UI? 👉 Still showing old values 😬 I refreshed the page… 👉 Now it’s correct. So what actually happened? ⚠️ It wasn’t the backend issue. It was frontend state issue. Here’s the truth most devs learn the hard way: Updating data ≠ Updating UI Common culprits: 👉 State not updated correctly 👉 Cached data still hanging around 👉 Async updates causing lag 💥 Result: Your backend is right… …but your UI is lying. 💡 The Fix? : ✔️ Update state instantly (Optimistic UI) ✔️ Refetch after mutation ✔️ Invalidate cache properly (RTK Query / React Query) 🔥 After fixing: ✔️ UI updates instantly ✔️ Users trust the system ✔️ App feels FAST & reliable 🧠 Real lesson: A perfect API means nothing if your UI tells a different story. 💬 Tell me... Have you ever debugged this “ghost data” bug? #frontend #reactjs #webdevelopment #javascript #stateManagement #rtkquery #reactquery #softwareengineering #programming #developers

𝗩𝟴 𝗺𝗮𝗸𝗲𝘀 𝘆𝗼𝘂𝗿 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗳𝗮𝘀𝘁. But you can accidentally turn that optimization off. And you'd never know unless you understood this. ━━━━━━━━━━━━━━━━━━━━━━━ 𝗩𝟴 𝗱𝗼𝗲𝘀𝗻'𝘁 𝗷𝘂𝘀𝘁 𝗿𝘂𝗻 𝘆𝗼𝘂𝗿 𝗰𝗼𝗱𝗲. 𝗜𝘁 𝘀𝘁𝘂𝗱𝗶𝗲𝘀 𝗶𝘁. V8 has a two-stage pipeline: 𝗜𝗴𝗻𝗶𝘁𝗶𝗼𝗻 — the interpreter. Converts JS to bytecode fast.        Cold code, startup logic, code run once. 𝗧𝘂𝗿𝗯𝗼𝗙𝗮𝗻 — the optimizing compiler. Watches "hot" functions        (run 100+ times), profiles them, and compiles        to highly optimized machine code. This is why your React app feels slow on first load but gets faster as it runs — TurboFan is kicking in. ━━━━━━━━━━━━━━━━━━━━━━━ 𝗕𝘂𝘁 𝗵𝗲𝗿𝗲'𝘀 𝘄𝗵𝗮𝘁 𝗺𝗼𝘀𝘁 𝗱𝗲𝘃𝘀 𝗱𝗼𝗻'𝘁 𝗸𝗻𝗼𝘄: TurboFan optimizes based on assumptions. If those assumptions break — it deoptimizes. Back to bytecode. Back to slow. The biggest assumption: 𝗢𝗯𝗷𝗲𝗰𝘁 𝘀𝗵𝗮𝗽𝗲. ━━━━━━━━━━━━━━━━━━━━━━━ 𝗩𝟴 𝘂𝘀𝗲𝘀 "𝗛𝗶𝗱𝗱𝗲𝗻 𝗖𝗹𝗮𝘀𝘀𝗲𝘀" 𝘁𝗼 𝗼𝗽𝘁𝗶𝗺𝗶𝘇𝗲 𝗽𝗿𝗼𝗽𝗲𝗿𝘁𝘆 𝗮𝗰𝗰𝗲𝘀𝘀. Every object gets assigned an internal shape. Objects with the same shape share optimized property lookups. ❌ This creates TWO different shapes: const user1 = {} user1.name = 'Alice'  // shape: { name } user1.age = 25    // shape: { name, age } const user2 = {} user2.age = 30    // shape: { age } user2.name = 'Bob'   // shape: { age, name } ← different order V8 now tracks two separate hidden classes. Inline caching breaks. Property access slows down. ✅ Same initialization order = same shape = one optimized path: const user1 = { name: 'Alice', age: 25 } const user2 = { name: 'Bob',  age: 30 } ━━━━━━━━━━━━━━━━━━━━━━━ 𝗧𝗵𝗿𝗲𝗲 𝘁𝗵𝗶𝗻𝗴𝘀 𝘁𝗵𝗮𝘁 𝘁𝗿𝗶𝗴𝗴𝗲𝗿 𝗱𝗲𝗼𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻: 1. Passing different types to the same function   (number one call, string the next → type assumption broken) 2. Adding/deleting properties after object creation   (delete obj.key changes the shape mid-flight) 3. Functions that are "too large" for TurboFan to analyze   (keep hot functions small and focused) ━━━━━━━━━━━━━━━━━━━━━━━ 𝗪𝗵𝘆 𝘁𝗵𝗶𝘀 𝗺𝗮𝘁𝘁𝗲𝗿𝘀 𝗳𝗼𝗿 𝗥𝗲𝗮𝗰𝘁 𝗮𝗻𝗱 𝗡𝗼𝗱𝗲.𝗷𝘀: React renders the same components thousands of times. If your props objects have inconsistent shapes across renders → V8 can't inline-cache the property reads → every render does more work than it should. Node.js request handlers that receive varying object shapes from different API clients hit the same problem at scale. ━━━━━━━━━━━━━━━━━━━━━━━ The rule: initialise objects with all properties at once, in the same order, every time. It's not just clean code. It's the shape V8 expects. ━━━━━━━━━━━━━━━━━━━━━━━ Most performance advice stops at "use useMemo" and "avoid re-renders." Understanding V8 is where the real leverage is. Save this 📌 — and drop a 🔥 if this changed how you think about objects. #JavaScript #NodeJS #WebPerformance #SoftwareEngineering #ReactJS #OpenToWork #ImmediateJoiner