React Query Simplifies API Calls in React

Just built a localStorage demo with React! Explored how to efficiently store and retrieve user data using browser localStorage in React. This mini-project demonstrates: ✅ Serializing JavaScript objects with JSON.stringify() ✅ Storing user information in browser storage ✅ Retrieving and parsing data from localStorage ✅ Building practical client-side data persistence Perfect for understanding web storage fundamentals and creating offline-capable applications! 💾 #React #ReactJS #localStorage #WebDevelopment #Frontend #JavaScript #WebStorage #ReactJS101 #CodingProject #DeveloperLife #FullStackDevelopment #WebApps #BuildInPublic #TechJourney

Have you ever ended passing request, tenant or session session information around in your function call chain and asked yourself how could you make this look cleaner? Well there is a solution in Node.js! Welcome to AsyncLocalStorage (ALS)! Many languages and runtimes provide thread-local storage (TLS). In thread-per-request servers, TLS can be used to store request-scoped context and access it anywhere in the call stack. In Node.js we have something similar, although we don't use threads to process the requests, we use async contexts. Think of ALS as “thread-local storage” for async code: it lets you attach a small context object to the current async execution chain (Promises, async/await, timers, etc.) and read it anywhere downstream without having to pass that context data around on every function call, effectively making the function/method signature leaner. What it’s great for 🔎 Log correlation (requestId in every log line) 📈 Tracing/observability (span ids, metadata) 🧩 Request-scoped context (tenant/user, feature flags) 🧪 Diagnostics (debugging async flows) But with great power comes great responsibility, (sorry for the joke). A misused ALS can cause context leak to other requests and if not carefully designed you can start losing control of where things are set and where things are read. To solve this I like to treat ALS similar to a "Redux Store Slice", so each piece of related data I need to store in the ALS is a Slice. So I have slices for: auth, DB connections, soft delete behaviors, request logging, etc. And those slices are only set at the middleware level (or in Guards/Interceptors/Pipes if you use NestJS). Have you used ALS in production? What was your main win (or gotcha)? #nodejs #javascript #backend #nestjs #distributedtracing #cleanarchitecture

1️⃣ Call Stack ⭐Executes synchronous JS code ⭐LIFO (Last In, First Out) ⭐Only one thing runs at a time 2️⃣ Web APIs (Browser / Node.js) ⭐Handles async operations: ⭐setTimeout ⭐fetch ⭐DOM events ⭐Runs outside the call stack 3️⃣ Task Queues There are two important queues 👇 🟡 Microtask Queue (HIGH priority) ⭐Promise.then ⭐async/await ⭐queueMicrotask 4️⃣ Event Loop (The Manager 🧑💼) Its job: ⭐Check if Call Stack is empty ⭐Execute ALL microtasks ⭐Take ONE macrotask ⭐Repeat 🔁 forever 🔍 One-Line Visualization (Easy to remember) CALL STACK   ↓ WEB APIs   ↓ MICROTASK QUEUE (Promises) ⭐   ↓ MACROTASK QUEUE (Timers)   ↓ EVENT LOOP 🔁 #JavaScript #EventLoop #AsyncJavaScript #WebDevelopment #FrontendDeveloper #Coding #LearnToCode #DeveloperCommunity

Stop using useState for this 👇 You're overcomplicating your React code. The pattern: storing data in state that you could just... calculate? Example: You have a list of items. You need the total count. So you create separate state for it: - Two state variables. - Extra useEffect to keep them in sync. - More places for bugs to hide. Here's the thing: If you can calculate it during render, just calculate it. No state. No useEffect. No sync issues. Just derive it: - One source of truth. - Automatically stays in sync. - Less code to maintain. If it's expensive? Memoize it with useMemo — don't sync it with state. The rule? If it can be computed from existing data, don't store it. State is for things that CHANGE independently. Not for things you can derive. I used to over-state everything. Now I ask: "Can I just calculate this?" Most of the time? Yes. What's a piece of state you realized you didn't actually need? #React #JavaScript #Frontend #CleanCode

Anyone else waste hours debugging form submissions? Just me? 😅 Server Actions in Next.js changed how I build forms. Before: * Make an API route (/api/contact) * Write fetch code on the frontend * Handle loading states manually * Don't forget to refresh the data (I always forgot) Why I love it: No more API setup Works even if JavaScript breaks Loading spinners come built-in Data refreshes automatically But here's the thing: * If you've got complicated workflows or need really specific control over caching, old-school API routes still make sense sometimes. Curious: Have you tried Server Actions yet? Or are you sticking with the old way? #NextJS #WebDevelopment #React #ServerActions #FullStack

Day 4 – Node.js Understanding Callbacks Today’s topic: Callbacks in Node.js. A callback is a function passed as an argument to another function. It gets executed after a task completes. Node.js uses callbacks mainly for asynchronous operations such as: • File system operations • Database queries • API requests Callbacks help Node.js follow a non-blocking execution model. Instead of waiting for a task to finish, the function is registered and executed later. Next: Promises and async/await to handle asynchronous code in a cleaner way. #NodeJS #BackendDevelopment #JavaScript #AsyncProgramming #SoftwareEngineering

▲ Next.js introduces Native Server Actions. Stop writing API routes just to handle a form submission 👇 For years, submitting a form in React meant creating a separate API endpoint, writing a fetch call on the client, and manually managing loading and error states. A lot of boilerplate for something so simple. ❌ The Old Way: You treated form submission as a client-side problem. It required a dedicated /api/submit route, a fetch() call, and manual state management just to save data. ✅ The Modern Way: Treat server logic as UI. Define an async function with "use server" and pass it directly to your form’s action prop. • Zero API route needed: The function runs on the server automatically. • Secure by default: Sensitive logic never reaches the client bundle. • Works with useFormState: Get progressive enhancement for free! The Shift: Form handling is no longer a “client problem” — it’s a first-class citizen of your component tree. #NextJS #ServerActions #WebDevelopment #React #Frontend #JavaScript #AppRouter #FullStack #CleanCode #NextJSTips #FrontendDeveloper

That Slow Down Your React Applications Even with experience, it's easy to fall into these traps that impact performance and maintainability: 1. Direct State Mutations: Modifying state or props directly instead of using update functions. This breaks the one-way data flow. 2. Use Effect Abuse: Using it for derived calculations or state synchronizations that could be handled at render time. 3. Forgetting Dependencies: Empty or incomplete dependency arrays in useEffect and useCallback lead to subtle bugs and stale data. 4 Rendering Lists Without a Unique Key: Using the index as the key forces React to unnecessarily recreate components when order changes. 5 Use State Overuse: Storing derived values in state instead of calculating them directly at render. The key? Understand the component lifecycle and let React do its reconciliation work efficiently. What's the trap that cost you the most debugging time? #ReactJS #WebDevelopment #CleanCode #Frontend #JavaScript #BestPractices

One JavaScript habit that improved my React code a lot: Thinking in data, not UI first. Earlier, I used to jump straight into JSX and styling. Now I pause and ask: • What data does this component need? • What should be state and what shouldn’t? Once the data flow is clear, the UI becomes easier and cleaner. This small mindset shift reduced bugs and made my components more predictable. Still learning, but this helped me move forward. #JavaScript #ReactJS #MERNStackDeveloper #SoftwareDeveloper #LearningInPublic #DeveloperTips