React State Management doesn't need to be painful. I just spent today trying out Zustand for a simple Todo app, and I'm genuinely impressed. As a full-stack developer comfortable with the ecosystem, I love Redux, but sometimes the boilerplate feels like overkill just to manage a few booleans and strings. Zustand changed that for me today. Here’s why it’s my new default for React state: 1. Zero Boilerplate Setup: You create the store, define the state and actions in one hook, and you’re done. The setup complexity is virtually zero compared to Redux Toolkit. 2. Built-in Middleware (The Real Game-Changer): This is where it gets powerful. I didn't have to install separate libraries for persistence or mutable state. 3. Automatic Persistence: With just the persist middleware, I hooked my entire store up to localStorage with a single config object. 4. Immutability Made Simple: I used the immer middleware. I can update state directly (like state.todos.push()), and Immer handles making it safe and immutable behind the scenes. No more complex nested object spreads. I've attached the code snippet showing exactly how I combined persist and immer. It’s clean, readable, and effective. If you’re starting a new React project and are dreading the state management setup, give Zustand a shot. It will save you time. What is your current favorite library for managing state in React, and why? Drop your thoughts below. 👇 #FullStackWithArup #Zustand #ReactJS #JavaScript #TypeScript #WebDevelopment #Frontend #BuildInPublic

when I first started React I was so confused about useState and useEffect like what is the difference and when do I use which one so let me explain both with one simple real example 👇 imagine you are building a weather app that fetches weather data when the page loads here is how useState and useEffect work together in that const [weather, setWeather] = useState(null) useEffect(() => {  fetch('https://lnkd.in/g7JkAAtU')   .then(res => res.json())   .then(data => setWeather(data)) }, []) that is it. two hooks. one job each. useState stores the weather data useEffect fetches it when the component loads simple way to remember it 👇 useState = where you keep your data useEffect = where you do something when something happens when I understood this everything in React started making sense if you are just starting React and feeling confused about these two, save this post. you will need it 🙌 anything else in React that confused you when you started? drop it in the comments 👇 #React #JavaScript #Frontend #WebDev #ReactJS #100DaysOfCode #Programming #LearnToCode

I just wanted to see localhost:3000. 😭 Clone repo → run app Simple, right? Nope. Now it’s: • Install Node 22.11.0 • Actually use Bun 🥖 • But only for local • Use pnpm, not npm • Run Docker 🐳 • Add 14 env vars • Clear cache • Delete node_modules • Pray 🙏 And after all that… The app still crashes because one package changed from 4.2.1 → 4.2.2 💀 2010: <script src="app.js"></script> 2026: bun run turbo dev --filter=web Which somehow starts: ⚡ Vite 📦 Next.js 🎨 Tailwind 🧠 TypeScript 🐶 Husky 🐳 Docker …and 7 background processes eating 6GB RAM for spiritual reasons 👻 The worst part? All these tools exist for a reason: • TypeScript catches bugs • Bun is faster • Docker fixes “works on my machine” • Monorepos help big teams We didn’t build a website. We built a tiny operating system wearing a login page. 🤡 And no matter how advanced the stack gets, the final fix is still: rm -rf node_modules Bun is generally faster, Node still has the biggest ecosystem, and Deno focuses on security-by-default — which is exactly why teams now juggle multiple runtimes instead of one. #WebDevelopment #Frontend #NextJS #JavaScript #SvelteKit #RemixRun #NuxtJS #SoftwareEngineering #DevCommunity #FullStack #TechTrends #ProgrammerHumor #OpenSource #ReactJS #ServerSideRendering

🚀 Strengthening my React fundamentals! Here are 10 core concepts every React developer should know (and actually understand 👇) 1️⃣ React is a declarative, component-based library for building UIs 2️⃣ UI updates when state or props change 3️⃣ State = mutable data inside a component 4️⃣ Props = read-only data from parent to child 5️⃣ "useEffect" handles side effects (API calls, timers) 6️⃣ Virtual DOM improves performance 7️⃣ Keys help React track list updates efficiently 8️⃣ Controlled components = form inputs managed by state 9️⃣ Lifting state up helps share data between components 🔟 Custom hooks allow reusable logic 💡 Learning React is not about memorizing—it’s about understanding how UI reacts to data. #ReactJS #FrontendDevelopment #WebDevelopment #LearningInPublic #JavaScript

I just started a deep dive into React and came across how it uses snapshots to re-render the view, by strictly comparing references of the old state copy in memory to the newer one. That immediately triggered a question: When we do so many state updates in a large production app, we are essentially creating so many snapshots in memory that will most likely never be used again. What happens to all this garbage sitting in memory? There must be massive leaks everywhere, right? Short answer: No. Long answer: Here's why. Every state update creates a new snapshot in memory. The old one loses all references pointing to it. JavaScript's Garbage Collector sees this and frees it automatically. GC's only rule → if nothing points to it, it's gone. 🧹 Real leaks in React come from YOU accidentally holding references outside React's control: ❌ Pushing state into an array that lives outside the component ❌ Adding event listeners without removing them ❌ setInterval running after the component unmounts In all these cases GC sees "something still points here" and leaves it alone, forever. useEffect cleanup exists for exactly this reason: return () => window.removeEventListener("resize", handler); One line. Prevents an entire class of memory leaks. React is not the problem. Uncleaned side effects are. #React #JavaScript #Frontend #SoftwareEngineering #WebDev

🎬 I built my biggest React project so far — a Movie App with a funny twist on the legendary EgyBest — after learning React over the past few weeks. I pushed myself to build a real-world, fully functional application as a challenge… and this is the result 👇 🎥 Demo in the video below ✨ Features: • Search for any movie using an API • View detailed movie information • Rate movies ⭐ • Add movies to a watched list • Store data using localStorage • Delete movies from the list 🛠 Tech I used & learned: • React (Components, Props, State) • useState & useEffect • Custom Hooks (built my own reusable logic) • API integration (fetching data) • Conditional rendering • Event handling • Local Storage • Basic CSS for styling 🧠 What I learned: • How to structure a real-world React application • Managing state across multiple components • Persisting data in the browser ⚡ Biggest challenge: • Keeping the watched list synced correctly with localStorage This project is a big step forward for me, and I’m excited to keep improving 🚀 🔗 GitHub: https://lnkd.in/d6Uu-Xr6 I’d really appreciate your feedback 🙌 #ReactJS #ReactDeveloper #FrontendDeveloper #JavaScriptDeveloper #WebDevProjects #BuildInPublic #CodingJourney #JuniorDeveloper

By default, React is fast. But as data grows, unnecessary re-renders quietly kill performance. Today I learned two hooks that every serious React developer needs to know: 🗒️ useMemo — A cache for heavy calculations. Instead of re-running expensive logic on every render, React stores the result and reuses it. Think of it like a sticky note your genius friend writes so they don't have to solve the same problem twice. 🔗 useCallback — Stabilizes your functions. In JS, functions are objects — so a "new" one gets created on every render. This hook keeps the reference the same, stopping child components from re-rendering for no reason. The senior wisdom I picked up today? Don't over-optimize. These hooks cost memory. Only reach for them when you actually see a lag — not before. Understanding when to optimize is what separates professional developers from the rest. Tomorrow: I'm building my own tools with Custom React Hooks! 👀 Question for you: Do you optimize as you go, or wait until something feels slow? Drop your strategy below 👇 #CodeWithWajid #ReactJS #WebDevelopment #100DaysOfCode #LearningToCode #BuildingInPublic #ReactOptimization #WebPerf

I Just built and deployed a Weather App 🌤️ This project helped me understand how to work with APIs and handle real-time data using JavaScript… Features include: • Search weather by city • Real-time temperature and conditions • Weather icons • Clean and responsive UI (though basic) Try it here: 👉 https://lnkd.in/ea_SveTQ View code: 👉 https://lnkd.in/ervqjNiN More projects coming — currently building and improving daily 🚀 #FrontendDeveloper #JavaScript #WebDevelopment #BuildInPublic

🚀 I just published my first open-source npm package: react-permissions-solution https://lnkd.in/dPkwBb4Q Every React app with user roles ends up with the same mess: ❌ {user.role === 'admin' && <DeleteButton />} ❌ Logic duplicated across 50+ components ❌ Change a role? Good luck finding every condition So I built a clean, declarative solution. ✅ One source of truth for all your access control ✅ Works with any backend — hardcoded or API-driven ✅ TypeScript-first with full type safety ✅ Wildcard support (* , read:* , *:posts) ✅ Zero dependencies — ~2KB minzipped The API is simple by design: // wrap your app once <PermissionsProvider role={user.role} permissions={ROLES[user.role]}>  <App /> </PermissionsProvider> // use anywhere <Can do="delete" on="posts">  <DeleteButton /> </Can> // or in logic const { can, is } = usePermissions() if (can('delete', 'posts')) { ... } if (is('admin')) { ... } Supports 3 APIs for different situations: → <Can> component for UI rendering → usePermissions() hook for logic & event handlers → withPermission() HOC for protecting entire pages 📦 npm install react-permissions-solution This is my first published package — feedback, stars, and PRs are very welcome 🙏 #ReactJS #OpenSource #TypeScript #Frontend #NPM #WebDev #JavaScript

⚠️ JavaScript Arrays: Mutating vs Non-Mutating Quick thing that caused me way too many bugs before I really paid attention to it 👇 Some array methods actually change the original array… and some don’t. 🧠 Mutating → they modify the same array ✨ Non-mutating → they give you a new one instead Sounds simple, but here’s where it gets tricky… I used to assume my original data was “safe”, then suddenly something else in the app behaved weirdly — turns out I had already changed that array without realizing it. The tricky part is that mutations aren’t always obvious at first. You might only notice later when something behaves differently than expected. This becomes even more important when working with state (like in React), where consistency really matters. Not a big concept… but it makes a big difference. #JavaScript #WebDev #FrontendDevelopment #ReactJS #CodingTips #ProgrammingTips