useSyncExternalStore for React Apps

Most devs think Server Components vs Client Components is about "where code runs." That's technically true. But it misses the point. After 3 years of building React apps, here's the mental model that finally clicked for me: 🖥️ Server Components = Your Data Layer Think of them as the backend of your frontend. They run on the server, can access databases directly, and ship ZERO JavaScript to the browser. Use them when: → Fetching data (no more useEffect waterfalls) → Reading env variables or secrets → Rendering static/heavy layouts 💻 Client Components = Your Interaction Layer These are classic React. They hydrate in the browser and handle ALL interactivity. Use them when: → You need state (useState, useReducer) → You need lifecycle hooks (useEffect) → You need event handlers (onClick, onChange) The mistake everyone makes? Thinking "Server = fast, Client = slow." Wrong. Server Components reduce your bundle. Client Components cache beautifully. The power is in MIXING them — not choosing one. Here's the real-world pattern I use: 📂 Server Component (layout + data fetching) └─ 💻 Client Component (interactive form) └─ 🖥️ Server Component (search results) Nest them. Compose them. Stop treating them like enemies. The mental shift: Server Components are not "better React." They're a different tool for a different job. Once you get this, Next.js App Router finally makes sense. #React #NextJS #WebDev #Frontend #ServerComponents

Most React developers are still thinking in a client-first way — and that’s becoming a problem. Server-first React is quietly changing how we build applications. The traditional approach: - Fetch in useEffect - Move data through APIs (JSON) - Render on the client This is no longer the default in modern React + Next.js. What’s changing: - Server Components handle data and rendering - Client Components are used only for interactivity - UI can be streamed directly from the server - Hydration is selective, not global Impact: - Less JavaScript sent to the browser - Reduced reliance on client-side state - Better performance by default - Simpler data flow (often without an extra API layer) A useful mental model: Server = data + structure Client = interaction This isn’t just a feature update - it’s a shift in architecture. If you’re still using useEffect primarily for data fetching, it may be time to rethink how your React apps are structured. #React #Frontend #Fullstack #JavaScript #WebDevelopment

⚛️ Hey devs — are we overcomplicating React in 2026? I see many developers still adding heavy state management libraries in every project… but do we really need them anymore? Let’s be honest 👇 👉 With modern React: Server Components handle most data fetching Hooks manage local state efficiently Context is good enough for many global cases So why are we still doing this? ❌ Adding Redux for small apps ❌ Managing state that could live on the server ❌ Overengineering simple flows 💡 Here’s how I think about it now: Server → data & logic Client → interaction State → keep it minimal ⚡ Real talk: Most “state problems” are actually architecture mistakes. If your state is growing too much… maybe it shouldn’t be on the client at all. Curious — how are you managing state in your projects these days? #reactjs #nextjs #frontend #webdevelopment #statemanagement #javascript #softwareengineering #performance

In React I’ve seen client bundles grow like weeds. Every data-fetching library, markdown parser, and date formatter we add is a "tax" the user's phone has to pay. Problem: Hydration Bottleneck. In traditional React (SSR or SPA), even if the server sends HTML, the browser still has to download the entire JavaScript source code for every component to "wake it up" (Hydration). Result: Your TTI (Time to Interactive) spikes because the CPU is busy parsing JS it might not even use. Solution: The Execution Split. Server Components (The Default): These run exclusively on the server. They have direct access to your database and file system. They render to a special "RSC Payload" (not HTML), which tells React how to update the DOM without needing the component's source code. Client Components ('use client'): These are your "Islands of Interactivity." You only use them for hooks (useState, useEffect) or browser APIs. The Bundle Magic Example: Imagine you need to render a complex Markdown article. 1. Old Way: Ship a 50kb markdown-parser library to the client. 2. RSC Way: The server parses the Markdown and sends only the final tags. The 50kb library stays on the server. The client bundle size? 0kb. Trade-off: Serialization Constraints. You can't pass functions (like onClick) from a Server Component to a Client Component because functions can't be "serialized" into the RSC Payload. You have to learn a new way of "Composing" your app. It’s a mental shift, but the performance payoff is massive. #ReactJS #ServerComponents #WebPerformance #SystemDesign #NextJS #FrontendEngineering

Stop spamming "use client" everywhere in Next.js — it's silently killing your React Server Components. 👇 Most Next.js devs are accidentally turning off React Server Components — and don't even know it. The moment you add "use client" to a parent component, every child inside it becomes a client component too. No async data fetching. No streaming. No zero-JS HTML. Just a bigger JS bundle landing in your user's browser. ❌ Why it hurts Adding "use client" to a parent component converts the entire subtree into a client bundle. Every child component, every import — all sent to the browser. You lose async data fetching, streaming, and zero-JS rendering on the server. Most devs add it to silence hydration errors without understanding the blast radius. ✅ The right mental model Push "use client" as deep as possible — to the leaf component that actually needs state or browser APIs (onClick, useState, useEffect). Keep pages and layouts as Server Components. This way Next.js can stream HTML fast, skip JS for static parts, and still hydrate only the interactive pieces. I've seen this on almost every App Router codebase — "use client" at the top of the page, layout, or a shared wrapper. One line, silently destroying the entire RSC architecture. The fix? Push "use client" to the leaf — the single component that actually uses useState, onClick, or a browser API. Keep everything above it on the server. Golden rule: "use client" is a boundary, not a decorator. Place it at the edge, not the root. #NextJS #ReactJS #WebDevelopment #JavaScript #TypeScript #ReactServerComponents #AppRouter #FrontendDeveloper #SoftwareEngineer #Programming #CleanCode #100DaysOfCode #WebDev #NextJS14 #React19 #ServerComponents #JSPerformance #FrontendArchitecture #CodeQuality #TechTips

CORS becomes very easy to understand with one real example. Imagine this: You’re building a React app on http://localhost:3000 Your backend API is running on http://localhost:8000 From your frontend, you make a request: fetch("http://localhost:8000/api/profile") Looks normal, right? But the browser sees this as: Frontend → localhost:3000 Backend → localhost:8000 Same machine. Same localhost. Different port. And that different port is enough for the browser to say: “Hold on — this is a different origin. I need permission first.” So before sending the real request, the browser asks your backend: “Is localhost:3000 allowed to access you?” That’s the CORS check. If your backend responds with: Access-Control-Allow-Origin: http://localhost:3000 The browser allows the request. If not, it blocks it and throws the CORS error. That’s why this fails: fetch("http://localhost:8000/api/profile") Not because your API is broken. Not because React failed. But because the browser is protecting the user. And that’s the key thing most beginners miss: CORS is not a server error. It’s the browser asking the server for permission. Once you understand that, CORS stops feeling random. #Frontend #WebDevelopment #JavaScript #ReactJS #NodeJS #FullStack #SoftwareEngineering #Developers #TechConcepts

Designing Reusable Behavior in React with Custom Hooks ⚛️ Before custom hooks, every single page in my React app looked like this: useState for data. useState for loading. useState for error. useEffect to fetch. Axios call. Error handling. Toast on success. Invalidate cache manually. Multiply that by 30+ pages. That's hundreds of lines of repeated logic. So I stopped copy-pasting and started building. → useCustomQuery One hook. Every GET and POST request in the entire app. TanStack Query under the hood — caching, gcTime, pagination, enabled flag — all configurable. Pass the URL, method, and queryKey. Get clean data back. Zero boilerplate in the component. → useCustomMutation One hook. Every create, update, and delete operation. Automatic query invalidation after success. Toast notification fires itself. Modal closes itself. Session expiry triggers logout via Axios interceptor. The component calls mutate() and forgets about the rest. → useDebounceSearch 15 lines. Proper setTimeout cleanup.Configurable timer. Every search input in 30+ pages uses this one hook. Saves hundreds of unnecessary API calls every day.Search changes → skip resets to 0 automatically. The component just renders. It has no idea how any of it works. The result? ✦ Components went from 80 lines to 20 ✦ New pages now take half the time to build ✦ Bugs are isolated — fix once, fixed everywhere ✦ The entire team uses complex logic without understanding every detail Custom hooks didn't just clean up my code. They changed how I think about building React apps. Are you still writing the same logic in every component — or have you made the switch to custom hooks? #ReactJS #Frontend #JavaScript #TypeScript #WebDevelopment #CleanCode #SoftwareEngineering #FrontendDevelopment #ReactHooks #TanStackQuery

Most developers still don’t fully understand what Server Components change. With React and Next.js, Server Components are not just a performance tweak. They change where your code actually runs. Instead of everything executing in the browser, parts of your UI now run on the server by default. That shifts a few important things: - Less JavaScript sent to the browser If a component runs on the server, it doesn’t need to be shipped to the client. - Direct access to backend resources You can fetch data closer to the source without building extra API layers for everything. (don't forget discretion and security for safe usage) - Better separation of concerns Server components handle data + rendering. Client components handle interactivity. - Cleaner mental model for data fetching You stop thinking fetch in useEffect everywhere and start thinking “what needs to be interactive vs static” But the real change is this: You are no longer forced to make everything a client app. You choose what becomes interactive. Everything else stays on the server. That’s a big shift from traditional React apps where the browser owns almost everything. Server Components don’t replace client-side React. They reduce how much of it you actually need. And that’s where the real performance gains come from. Are you already structuring your components this way, or still defaulting to client-first thinking? #reactjs #nextjs #webdevelopment #frontend #serverside #performance

After working on state, routing, and UI in earlier projects, I wanted to build something that depends on external data and real-time updates 🌍 Built a Weather App where you can search any city and get current conditions in a clean, responsive UI 🌦️ What this added for me 1. Working with API data instead of static state 2. Handling loading and error states properly 3. Keeping the UI clear even when data changes dynamically 📱 Stack: React, Vite, Tailwind CSS, Vercel 🔗 Live: https://lnkd.in/gZGcnUFS 💻 Code: https://lnkd.in/gasfj-vK Still building and improving, open to feedback or connections 👍 #React #JavaScript #FrontendDevelopment #WebDevelopment #BuildInPublic #LearningInPublic #API #Vite #TailwindCSS #DevCommunity #TechCareers #SoftwareDevelopment Error Makes Clever

🚀Why Loading Too Much Data Can Break Your Application While working on an infinite scrolling feature in React, I came across an important real-world problem 👇 ❌ Problem: If the backend sends a very large amount of data at once, both the website and server start slowing down. 🔍 Why does this happen? ▪️ Large API responses take more time to transfer over the network. ▪️The browser struggles to render too many items at once. ▪️Memory usage increases significantly. ▪️Server load increases when handling heavy requests. 👉 I was using the GitHub API, and it helped me understand how important it is to control the amount of data being fetched. 📦 Solution: Pagination + Infinite Scrolling ▪️Instead of loading everything at once: ▪️Fetch data in smaller chunks (pagination) ▪️Load more data only when needed (infinite scroll). ⚡ Benefits: ▪️Faster initial load time ▪️Better performance ▪️Smooth user experience ▪️Reduced server stress 💡 What I learned: ▪️Efficient data fetching is crucial in frontend development ▪️Performance optimization matters as much as functionality ▪️Real-world applications are built with scalability in mind 🎯 Key takeaway: It’s not about how much data you can load — it’s about how efficiently you load it. #ReactJS #JavaScript #WebDevelopment #Frontend #Performance #LearningInPublic #CodingJourney