Setting up React project with Tailwind CSS and reusable components

Your Webpack Module Federation setup works perfectly in development. Five micro frontends, all loading seamlessly. Then you check the Network tab. Five copies of React. Five copies of ReactDOM. Five copies of React Router. 2.5MB of duplicated JavaScript the browser downloads, parses, and executes for zero reason. But the real problem is not performance. It is this error: "Invalid hook call. You might have more than one copy of React in the same app." Two React instances = two hook registries. A component rendered by React #1 cannot call hooks from React #2. Your entire app crashes. The fix: Module Federation's shared config with the singleton pattern. Here's what I cover in the full guide: 1. Why sharing dependencies cuts bundle size by 57% (real numbers) 2. What singleton: true actually does at runtime (step-by-step) 3. requiredVersion vs strictVersion vs eager - when to use each 4. Why the host shares more dependencies than remotes 5. React vs Next.js shared config differences (eager: false matters) 6. What you should share (React, Redux) vs what you should NOT (lodash, date-fns) 7. How to debug shared deps with __webpack_share_scopes__ in DevTools Every code example is from a production micro frontend monorepo with multiple remotes. Read the full guide: https://lnkd.in/ggcubTC5 #MicroFrontend #ModuleFederation #Webpack5 #ReactJS #JavaScript #WebDev #FrontendArchitecture #SingletonPattern #WebPerformance #Monorepo #SrinuDesetti

🚀 New Project: Interactive Joke Generator in Next.js! I just built a dynamic random joke app exploring the power of Next.js Client Components and State Management. Technical Highlights: 🏗️ Architecture: Organised with Route Groups (projects) for a clean, scalable folder structure. ⚡ Data Fetching: Leveraged async/await and useEffect to pull live data from the Official Jokes API. 🧠 State Control: Implemented useState for a smooth Reveal/Hide punchline toggle and "Next Joke" functionality. 🎨 Styling: Fully responsive UI built with Tailwind CSS integrated via globals.css. Understanding the "use client" boundary and preventing unnecessary re-renders was a great deep dive into React performance! #NextJS #ReactJS #WebDev #TailwindCSS #Coding #Javascript

✨ 𝗗𝗮𝘆 𝟰 𝗼𝗳 𝗠𝘆 𝗥𝗲𝗮𝗰𝘁 𝗝𝗼𝘂𝗿𝗻𝗲𝘆 ⚛️🚀 Today I learned about the `𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁` 𝗵𝗼𝗼𝗸, and more importantly, 𝘄𝗵𝘆 𝘄𝗲 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝗻𝗲𝗲𝗱 𝗶𝘁. While working with React, I noticed that components are mainly for rendering UI. But sometimes we need to do things outside rendering — like fetching data, setting up timers, or updating something after the UI changes. That’s where `𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁` comes in. It lets us handle these 𝘀𝗶𝗱𝗲 𝗲𝗳𝗳𝗲𝗰𝘁𝘀 in a clean and controlled way. What I found interesting is how it runs after render and can depend on specific values. Instead of mixing everything together, React separates 𝗨𝗜 𝗹𝗼𝗴𝗶𝗰 from 𝘀𝗶𝗱𝗲 𝗲𝗳𝗳𝗲𝗰𝘁𝘀, which makes the code easier to understand and manage. Starting to see how React keeps things structured as apps grow 💻⚡ #ReactJS #JavaScript #WebDevelopment #LearningJourney #FrontendDevelopment

You think this React code will increment the counter to 2? Maga Look again.👇🐘🐘🐘 function App() { const [count, setCount] = useState(0); const handleClick = () => { setTimeout(() => { setCount(count + 1); }, 1000); setCount(count + 1); }; return ( <> <p>{count}</p> <button onClick={handleClick}>Click</button> </> ); } Most developers say: 👉 “First +1 immediately, then +1 after 1 second → final = 2” ❌ Wrong 🧠 What actually happens setCount(count + 1) → updates to 1 setTimeout callback runs later… But it uses stale count = 0 (closure!) 👉 So it sets 1 again 🎯 Final Result Count = 1, not 2 🚨 The real problem This is not a React bug This is a JavaScript closure + event loop problem Functions capture old state Async callbacks don’t magically get updated values React state is snapshot-based, not live ✅ Fix setCount(prev => prev + 1); ✔ Always use functional updates when state depends on previous value ✔ Works correctly with async (timeouts, promises, events) 💡 Takeaway If your mental model is: 👉 “state updates automatically everywhere” You’ll ship bugs. If your mental model is: 👉 “state is captured at execution time” You’ll write predictable systems. This is the difference between writing code that works… and code that scales in production. USE prev maga 😍 setCount(prev => prev + 1); 🐘🐘🐘 #ReactJS #JavaScript #Frontend #WebDevelopment #Debugging #EventLoop

🧠 Why key Can Reset Your Entire Component State Most people think key is just for lists. It’s not. 👉 It can force React to destroy and recreate a component. 🔍 Example function App() { const [id, setId] = useState(1); return ( <> <button onClick={() => setId(id + 1)}>Next</button> <Profile key={id} /> </> ); } What happens? Every time id changes: 👉 React sees a new key 👉 It unmounts old component 👉 It creates a new one 💥 Result Inside Profile: const [count, setCount] = useState(0); 👉 count resets to 0 every time 🧠 Why? Because React thinks: “This is a completely new component” 🎯 Real use case You can use this intentionally: Reset form state Restart animations Clear component data 💥 Hidden danger Using unstable keys (like Math.random() or index) 👉 Can cause unexpected resets 👉 Leads to weird bugs 🧠 Final Insight key doesn’t just help React track elements It controls component identity #ReactJS #FrontendDevelopment #JavaScript #ReactTips #WebDevelopment #CleanCode #LearningInPublic

I removed useEffect from my code… and my app got faster ⚡ Yes, seriously. For a long time, I was doing this in React: useEffect(() => { fetchUsers(); }, []); Seemed correct… right? ❌ But in real projects, this caused: • Multiple unnecessary API calls • Data mismatch bugs • Hard-to-control logic 💡 Then I changed my approach: Instead of auto-calling APIs inside useEffect, 👉 I started triggering APIs based on user actions Example: • Search → onChange • Button → onClick ✅ Result: • Better control over API calls • Cleaner component logic • Improved performance (~30% fewer calls) 🔥 What I learned: useEffect is powerful… but overusing it makes your code messy. 💬 Curious: Do you still rely on useEffect for API calls? #ReactJS #FrontendDeveloper #JavaScript #CodingTips #WebDevelopment

Ever wondered what actually happens inside React when your app updates? React does not directly change the browser UI every time something updates. Instead, it creates a Virtual DOM, which is a lightweight copy of the real DOM. When data changes, React builds a new Virtual DOM and compares it with the previous version. This process is known as reconciliation. • React checks what has changed between two versions • It updates only those specific parts in the real DOM • This makes updates faster and avoids unnecessary reloading React also follows a component-based structure. Each component manages its own state and logic, making the code easier to understand, reuse, and maintain. When state or props change, React decides when and how to re-render efficiently. This is why React applications stay fast even when they become large and complex. For more details, go to the link and see the full post: https://lnkd.in/eU-YtJw7 #React #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #Programming #SoftwareEngineering #MERNStack

Stop fighting React Final Form re-initialization where the form suddenly resets and clears everything the user typed. In React, when a component re-renders, any object you create inside it gets a new "reference" or identity in memory. Since React Final Form uses a simple reference check for initialValues by default, these re-renders trick the form into thinking the data is brand new, triggering a full reset even if the values haven't changed. While using useMemo is a common fix to keep that reference stable, it can quickly make your code messy and harder to maintain as your data grows. A much simpler solution is to use the initialValuesEqual prop as shown in the snippet below. By using JSON.stringify, you tell the form to look at the actual data instead of the memory address. This keeps your form stable and protects the user's input, no matter how many times the parent component re-renders. This small change decouples your form from the component's render cycle. It ensures the form only resets when the data truly changes, making your app feel much more professional and reliable. #ReactJS #WebDevelopment #Frontend #ReactFinalForm #CodingTips

Your React app is slow. Here's why. 🐢 Most devs jump straight to optimization tools. But 90% of the time, the fix is simpler: 🔴 Fetching data in every component independently → Lift it up or use a global state solution 🔴 Importing entire libraries for one function → `import _ from 'lodash'` hurts. Use named imports. 🔴 No lazy loading on heavy routes → React.lazy() exists. Use it. 🔴 Images with no defined size → Layout shifts kill perceived performance 🔴 Everything in one giant component → Split it. React re-renders what changed, not what didn't. Performance isn't magic. It's just not making avoidable mistakes. Save this for your next code review. 🔖 #ReactJS #Frontend #WebPerformance #JavaScript #WebDev

🧠 Part 3 of 10: Duplicated state is one of the fastest ways to make a React app feel unstable. Everything looks fine at first. Then one value updates. The other one doesn’t. Now the UI technically works, but nobody fully trusts it. That’s the part people don’t say enough: a lot of frontend bugs are really trust issues. The UI says one thing. The data says another. Now the team starts building around confusion. Whenever I can, I try to keep state close to a single source of truth. It makes code easier to reason about. And future changes get a lot less annoying. What bug have you traced back to duplicated state? #React #ReactJS #FrontendEngineering #StateManagement #JavaScript #UIEngineering #WebDevelopment