Ahmed Badry’s Post

React Server Components are no longer “the future”. They’re the present. If you’re using modern frameworks like Next.js, you’re already working with them — sometimes without realizing it. What changed my mindset: - Less JavaScript sent to the client - Faster initial loads - Clear separation between server logic and UI The real challenge isn’t using RSC. It’s thinking differently about where your code should run. 💡 Tip: stop asking “Can this run on the client?” Start asking “Does this even need to?” #react #nextjs #webperformance #frontend #javascript

🚀 A tiny React trick that solves a very real problem Imagine a user clicks “Pay Now” twice 😅 → API runs twice → order created twice → payment deducted twice 💸 So I made a small hook useSafeAsync: 🛑 stops multiple clicks ⏳ shows loading while API runs ✅ shows success after response ❌ shows error if request fails ⏱️ auto-stops if server hangs (timeout) It uses AbortController to cancel stuck requests and bring the UI back to normal. Small code… but it can prevent many headaches (and angry users) 😄 #reactjs #javascript #frontend #webdevelopment #codingtips #typescript

Today I explored Form Handling & Routing in React. Key takeaways: Managing form state with useState Implementing basic form validations Navigating between pages using BrowserRouter Building forms that actually validate and route correctly feels like a big step toward real-world applications. Onward and upward! 💪 #ReactJS #MERNStack #WebDevelopment #Frontend #LearningInPublic #JavaScript #ReactRouter

React Performance isn’t about adding hooks everywhere. It’s about adding them where they matter. Most applications suffer from unnecessary re-renders and unstable references. Two small hooks. Massive impact: 1. useCallback → Stabilize function references 2. useMemo → Avoid expensive recalculations But misuse them, and you just add complexity with zero gains #ReactJS #NextJS #FrontendDevelopment #WebPerformance #JavaScript #SoftwareEngineering #ReactPerformance #Optimization #CleanCode #TechLeadership #UIDevelopment #ProgrammingTips

I have a question for developers who truly understand Next.js. ISR and Cache Components ('use cache') both let you serve static content and revalidate it — either time-based or on-demand. So what’s the actual difference? Are they solving the same problem at different abstraction levels? Or is there a deeper architectural distinction I’m missing? If you’ve used both in production, I’d really value your perspective. Let’s see who can explain it in the clearest way possible 👇 #Nextjs #ReactJS #WebDevelopment #Frontend #JavaScript #SoftwareArchitecture #AppRouter

A mistake I made while working with React. For a long time, I thought more state meant more control. That assumption caused issues later. Here’s what I noticed in real projects: - Components became harder to reason about - Unnecessary re-renders appeared - Debugging took longer than expected What changed my approach: - I questioned whether state was actually needed - I avoided storing derived values - I kept state close to where it’s used One simple rule helped me a lot. If state can be calculated, it probably shouldn’t be stored. How do you decide what truly belongs in state? #react #javascript #frontend #webdevelopment

Closures in JavaScript — Explained Simply A lot of people use closures without actually understanding them. So let’s kill the confusion. What’s a Closure? A closure is just a function that remembers the variables from where it was created, even after that outer function has finished running. Think of it like this The inner function carries a backpack Inside that backpack → variables from the outer scope. #JavaScript #Closures #WebDevelopment #Frontend #ReactJS #LearningInPublic #JavaScriptBasics

5 React.js Performance Optimization Techniques I Use on Every Project Code splitting with React.lazy() → Reduces initial bundle size by 40-60% Memoization (useMemo, React.memo) → Prevents unnecessary re-renders Virtual scrolling for large lists → Handles 10K+ items smoothly Debouncing expensive operations → Saves thousands of API calls Bundle size analysis → Catches bloat before production Performance isn't a feature—it's a requirement. Save this for your next optimization sprint! 📌 #ReactJS #WebPerformance #FrontendDevelopment #JavaScript

React Closures and State Updates Let’s say we start with: const [value, setValue] = useState(0) Now imagine we run this: setValue(value + 1) setValue(prev => prev + 2) • What is the final value? Now another scenario: setValue(prev => prev + 2) setValue(value + 1) • And now, what is the final value? This happens because React batches updates and functions keep the value they captured earlier. Mixing value + 1 with prev => prev + X can lead to unexpected results. Understanding how React handles state updates makes your code more predictable. What do you think the final values are? #React #JavaScript #Frontend

Think useOptimistic is React's silver bullet for smooth UI updates? This deep dive argues it's not. The hook is useful but doesn't solve race conditions on its own and makes optimistic UI more complex when combined with concurrent features like transitions. Read the critique: https://lnkd.in/dfCmaPxF #ReactJS #WebDev #Frontend #JavaScript