SWR Boosts React App Performance and Cleanliness

🤯 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

🎯 Day 6 of 30: Conditional Rendering & Lists – The Logic Layer of React Today I unlocked the ability to make my UI "decide what to show" and "render collections from data" — two patterns every real‑world app depends on. 🧠 Core Patterns Mastered: 1️⃣ Conditional Rendering (The Four Patterns) - `&&` operator – show/hide an element without an else branch - Ternary `?:` – when you need an if/else UI state - Early return – guard clauses for loading, error, or empty states - Conditional styling – dynamic Tailwind/className toggles based on state 2️⃣ Rendering Lists with `.map()` - Transform arrays of data into arrays of JSX elements - Combine with "filter" to create dynamic, data‑driven UIs 3️⃣ The `key` Prop — Reconciliation & Stability - Keys must be "unique and stable" (item IDs, not array indexes) - React's diffing algorithm uses keys to efficiently update the DOM — wrong keys cause performance bugs and UI glitches 🛠️ Today's Builds: ✅ "TodoApp" – Full CRUD todo list with filter (All / Active / Done), conditional empty states, completed styling, and item count summary. Every todo has a stable `key` using `crypto.randomUUID()`. ✅ Accordion Component (Mini Build) – Single‑select FAQ accordion with `.map()`, conditional content rendering, and proper key management. ⚡ Key Insight: > "Don't render `0` accidentally."   > When using `items.length && <Component />`, if the array is empty, React renders `0`. Always use `items.length > 0 && …` or a ternary. 📁 GitHub Commit Streak: Day 6 ✅ Every day's code is committed, documented, and pushed. Next: Day 7 – Week 1 Capstone Project! All concepts from the first week come together in a full‑featured Todo App that will be deployed live. #ReactJS #30DaysOfReact #WebDevelopment #Frontend #JavaScript #LearningInPublic #ReactLists #ConditionalRendering #CodeNewbie

For the longest time, my pattern looked like this: • useEffect → call API • useState → store data • loading + error states manually handled It worked… until the app grew. Then came the problems: • duplicate API calls • inconsistent loading states • manual caching (or no caching at all) • refetching logic scattered everywhere That’s when I switched to React Query. — What changed? Server state ≠ UI state React Query made this distinction clear. Caching became automatic Data stays fresh without unnecessary refetching. Background updates UI stays responsive while data syncs silently. Built-in loading & error handling No more boilerplate in every component. Refetching is declarative Not tied to lifecycle hacks anymore. — The biggest mindset shift: Stop thinking: “Where should I fetch this data?” Start thinking: “How should this data behave over time?” — Final takeaway: React Query is not just a library. It’s a different way of thinking about data in frontend. And once you get it, going back to useEffect feels… painful 😅 #reactjs #frontend #javascript #webdevelopment #reactquery #softwareengineering

74% of developers still default to client-side rendering with Next.js 15. But should they? Next.js 15 has introduced server components, a significant shift in how we think about rendering and state management. Are we witnessing the twilight of client-side rendering, or is this just another tool in our developer toolkit? From my experience, server components are a game-changer for performance. They allow us to offload work to the server, minimizing the client’s load, which can drastically improve page load times. However, it's not a silver bullet. Server components come with challenges, like figuring out how to manage state and how to optimize server resources effectively. Here's a small TypeScript snippet to illustrate how you can fetch data within a server component: ```typescript import { fetch } from 'next/server'; async function ServerComponent() { const data = await fetch('/api/data'); return ( <div> <h1>Data from Server</h1> <pre>{JSON.stringify(data, null, 2)}</pre> </div> ); } ``` I recently used AI-assisted development to prototype server components quickly. It’s incredible how AI coding tools can speed up development, allowing me to focus on optimizing and refining. So, are we looking at a future where client-side rendering is obsolete, or will it continue to play a critical role in our apps? Have you tried server components yet? How do you see them fitting into your development workflow? #WebDevelopment #TypeScript #Frontend #JavaScript

🤯 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

🚀 Optimizing Performance in React: When & Why to Use useMemo In modern React applications, performance optimization becomes crucial as components grow in complexity. One powerful yet often misunderstood hook is useMemo. 🔍 What is useMemo? useMemo is a React Hook that memoizes (caches) the result of a computation, ensuring it is only recalculated when its dependencies change. 💡 Why use useMemo? Avoid Expensive Recalculations When you have heavy computations (e.g., filtering large datasets, complex calculations), useMemo prevents unnecessary re-execution on every render. Improve Rendering Performance It reduces the computational load during re-renders, especially in high-frequency updates. Stabilize Reference Values Useful when passing objects/arrays as props to child components to prevent unwanted re-renders. 📍 Where should you use it? When dealing with large lists or datasets In derived state calculations When passing computed props to memoized components Inside performance-critical components (e.g., dashboards, analytics UI) ⚠️ Common Mistake Avoid overusing useMemo. It adds its own overhead. Use it only when there's a measurable performance benefit. 🧠 Example: const filteredItems = useMemo(() => { return items.filter(item => item.active); }, [items]); ✅ Key Takeaway useMemo is not about premature optimization—it's about strategic optimization. Measure performance, identify bottlenecks, and then apply it where it truly matters. #ReactJS #FrontendDevelopment #WebDevelopment #PerformanceOptimization #JavaScript #CodingTips

The backend was working. The 𝐀𝐏𝐈𝐬 were tested. But it was still just 𝐉𝐒𝐎𝐍 𝐫𝐞𝐬𝐩𝐨𝐧𝐬𝐞𝐬 in a terminal. So I built the 𝐟𝐫𝐨𝐧𝐭𝐞𝐧𝐝. 𝐇𝐓𝐌𝐋, 𝐂𝐒𝐒, 𝐚𝐧𝐝 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 — served directly by FastAPI — connected to every endpoint I'd built: browse products, add to cart, place an order, make a payment. The whole thing now runs locally as one unified app. No React. No separate frontend server. FastAPI mounts the static files and serves the HTML pages directly — which meant I could 𝐬𝐞𝐞 𝐞𝐯𝐞𝐫𝐲 𝐀𝐏𝐈 𝐜𝐚𝐥𝐥 hit my routes in real time while clicking through the UI. What made this click: → The 𝐚𝐮𝐭𝐡 flow actually works end-to-end — login returns a 𝐉𝐖𝐓, the frontend stores it, and protected routes enforce it. → The 𝐩𝐫𝐨𝐝𝐮𝐜𝐭 𝐬𝐞𝐚𝐫𝐜𝐡 𝐟𝐢𝐥𝐭𝐞𝐫𝐬 (price range, keyword) respond instantly. → The cart persists correctly across page navigations. → The 𝐚𝐝𝐦𝐢𝐧 𝐩𝐚𝐧𝐞𝐥 is only accessible after role validation. As an AI student, I usually live in notebooks and model files. Building a UI from scratch that talks to a backend, felt different. It made the whole system feel real in a way that Postman tests don't. 𝐍𝐞𝐱𝐭 𝐬𝐭𝐞𝐩: converting the project into a 𝐋𝐚𝐧𝐠𝐆𝐫𝐚𝐩𝐡 𝐂𝐋𝐈 and Automated 𝐀𝐠𝐞𝐧𝐭 deployment. What's your go-to stack when you need a quick frontend for an AI project — plain HTML, Streamlit, or something else? #FastAPI #WebDevelopment #Python #FullStack #BuildInPublic

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

🚀 𝐃𝐚𝐲 6 𝐨𝐟 𝐑𝐞𝐚𝐜𝐭: 𝐁𝐮𝐢𝐥𝐝𝐢𝐧𝐠 𝐒𝐢𝐦𝐩𝐥𝐞, 𝐓𝐡𝐢𝐧𝐤𝐢𝐧𝐠 𝐃𝐞𝐞𝐩 ⚛️ Today’s project was a Calculator UI — simple on the surface, but powerful when you focus on what really matters. Yes, AI can generate this in seconds. But today wasn’t about speed… it was about understanding. 🔁 Shift in Mindset Instead of asking “How fast can I build this?” I focused on: ✔️ Why components are structured this way ✔️ How data will flow in the future ✔️ What makes the UI scalable & secure 🔥 What I Focused On 🔹 Component Structure Built small, reusable pieces instead of one big file Thinking ahead for maintainability 🔹 Dynamic Rendering Used .map() to generate buttons Cleaner code → easier updates 🔹 Layout Precision Used CSS (Grid/Flex) to structure the calculator cleanly Focused on consistency, not just looks 🔹 Foundation First No advanced logic yet — just preparing the base Because strong foundations = scalable apps 🧠 Key Realization Anyone can build UI with AI. But understanding the core is what creates real opportunities. I’m not just learning React… I’m learning how to think like a developer. Huge thanks to Prashant Jain for the incredible guidance. The way you break down complex concepts makes building this foundation feel solid and achievable. Let’s keep building. 🚀 #ReactJS #FrontendDevelopment #JavaScript #LearningInPublic #BuildInPublic #WebDevelopment #CodingJourney #GrowthMindset #SEO #Developers

🔥 I stopped using useEffect for fetching data… and my code got cleaner. For a long time, this was my pattern in React: useEffect(() => { fetch("/api/data") .then(res => res.json()) .then(setData); }, []); It worked… but it came with problems: ❌ Manual loading state ❌ Manual error handling ❌ Refetch logic is messy ❌ No caching Then I discovered TanStack Query. ⚡ Same logic, cleaner approach: const { data, isLoading, error } = useQuery({ queryKey: ["data"], queryFn: fetchData }); 💡 That’s it. And suddenly: ✔ Data is cached ✔ Refetching is automatic ✔ Loading & error states are built-in ✔ Background updates just work 🧠 The mindset shift I stopped thinking: 👉 “How do I fetch data?” And started thinking: 👉 “How do I manage server state?” 🚀 Why this matters Because in real apps, data is: asynchronous shared constantly changing Handling that manually with useEffect doesn’t scale. 🧩 My takeaway: useEffect is not a data-fetching tool. It’s a side-effect tool. And once you separate the two… your code becomes much more predictable. Have you tried TanStack Query before, or are you still using useEffect for everything? #React #JavaScript #Frontend #WebDevelopment #TanStackQuery