Reusable React Hook for Custom Scroll Logic and Pagination

🚀 𝗗𝗲𝗰𝗼𝗱𝗲 𝗠𝗘𝗥𝗡 𝘄𝗶𝘁𝗵 𝗠𝗲 – 𝗗𝗮𝘆 𝟳 Today’s focus wasn’t just UI… It was about writing smarter React code. I explored 𝗖𝘂𝘀𝘁𝗼𝗺 𝗛𝗼𝗼𝗸𝘀— a concept that changes how you structure your applications. Instead of repeating logic in multiple components, I learned how to extract it into a reusable function. So I built a simple project to apply it 👇 📌 𝗣𝗿𝗼𝗷𝗲𝗰𝘁: Notes App with Auto Save A minimal app, but with a strong concept behind it. ✔ Notes are saved automatically ✔ Data persists even after refresh ✔ No backend used — everything handled in the browser ✔ Clean and simple UI with Tailwind CSS ⚙️ 𝗪𝗵𝗮𝘁 𝗺𝗮𝗱𝗲 𝗶𝘁 𝗶𝗻𝘁𝗲𝗿𝗲𝘀𝘁𝗶𝗻𝗴? I created a custom hook: useLocalStorage This hook handles: • State management • Data storage • Sync between UI and localStorage One hook → reusable logic → cleaner components 🧠 𝗞𝗲𝘆 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆: When your logic is reusable, your code becomes scalable. And that’s where React starts to feel powerful. 🔗 𝗖𝗼𝗱𝗲: https://lnkd.in/gBuMk4TG Learning one concept at a time. Building one project at a time. #MERN #ReactJS #CustomHooks #WebDevelopment #LearningInPublic #100DaysOfCode

I built a simple To-Do app… and ended up redesigning how I think about UI. What started as a basic JavaScript project turned into a deep dive into: * Why directly manipulating the DOM breaks easily * Why data should be the single source of truth * How rendering from state** makes UI predictable * And how adding localStorage becomes trivial once architecture is right At first, my app worked — but it was fragile. Refreshing wiped data. UI and logic were tightly coupled. Every new feature felt harder. So I rebuilt it. Instead of “update DOM on events”, I switched to: 👉 Update data → Re-render UI from scratch That one shift changed everything. Then I added localStorage: 👉 Persist data → Load on startup → Render UI And suddenly, the app became consistent, predictable, and scalable. I also explored: * JavaScript execution phases (creation vs execution) * Event loop basics (why timing matters more than code order) * Why UI = function(state) is not just theory Below is a detailed video showcasing this project. Course Instructor: Rohit Negi | Instructor: CoderArmy #javascript #webdevelopment #frontend #learninginpublic #buildinpublic #fullstackdevelopment

⚛️ Zustand — A Clean & Minimal Approach to State Management in React When building applications with React, one thing that really impacts code quality over time is how you manage state. There are plenty of options out there, but Zustand stands out for keeping things simple without sacrificing flexibility. 🧠 What is Zustand? Zustand is a lightweight state management library that lets you manage global state with very little setup. 👉 No providers 👉 No reducers 👉 No heavy boilerplate It keeps things straightforward and easy to reason about. ⚡ How it works At its core, Zustand is just a simple store: import { create } from "zustand"; const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), })); And you can use it anywhere in your app: const count = useStore((state) => state.count); const increment = useStore((state) => state.increment); No extra wrapping or complex setup needed. 🔥 Why Zustand works well ✔ Clean and minimal API ✔ Updates only what actually changes (better performance) ✔ No need to wrap your entire app ✔ Helps you move faster with less code ⚠️ Where to be cautious Zustand is great, but it’s not a one-size-fits-all solution. 👉 For large-scale apps with complex workflows 👉 When you need strict structure or advanced debugging tools you might want something more opinionated. 💡 Practical perspective Zustand fits really well when: ✔ Your app is small to medium in size ✔ You want to keep things simple ✔ You don’t need heavy state architecture 🚀 Final thought State management doesn’t have to be complicated. Sometimes, keeping things simple is the best decision you can make for your codebase. ❓ What are you using in your projects — Redux or Zustand? 📌 I’ll share a detailed comparison of Redux vs Zustand in my next post. #reactjs #zustand #redux #frontenddevelopment #javascript #webdevelopment #softwareengineering #fullstackdeveloper #dotnetfullstackdeveloper #react

🪝: Our app was slow. Users were complaining. Here's the 5 things that fixed it (and the 1 thing that almost made it worse). Performance optimisation is one of those things that sounds abstract until you have actual users complaining. Here's what I've done in real projects that actually moved the needle: 1. CODE SPLITTING with React.lazy() → Don't load the whole app on first visit → Lazy load routes and heavy components → Real impact: cut initial load time by ~40% on a large project 2. MEMOISATION — but only where it matters → React.memo() for components that receive the same props often → useMemo() for expensive calculations → useCallback() for functions passed as props → WARNING: Over-memoising adds overhead. Profile first, optimise second. 3. OPTIMISED RENDER CYCLES → Identify what's causing unnecessary re-renders (React DevTools Profiler is your best friend) → Move state as close to where it's used as possible → Avoid storing derived data in state — calculate it 4. IMAGE OPTIMISATION → Lazy load images below the fold → Use appropriate formats (WebP where possible) → Set explicit width/height to avoid layout shifts 5. BUNDLE ANALYSIS → Use webpack-bundle-analyzer or Vite's rollup-plugin-visualizer → You'll be shocked what's in your bundle sometimes The thing that almost made it worse? Premature memoisation everywhere. We wrapped every component in React.memo before profiling. It actually slowed things down. MEASURE. THEN OPTIMISE. What's your go-to performance trick? #ReactJS #PerformanceOptimisation #FrontendDev #JavaScript #WebPerformance #CodeSplitting #ReactHooks

🚀 Just built a full-featured paper trading app from scratch Trade No real money. No API keys. Just clean React code and simulated live markets. What it does: 📈 Live price ticks every 3 seconds across 15 stocks (AAPL, TSLA, NVDA, META and more) 📊 Market & limit orders — limit orders auto-fill when the price crosses your target 🔔 Price alerts with audio chimes when a stock hits your price 📉 Portfolio analytics — sector pie chart, unrealized P&L, top/worst performer 🌙 Light/dark theme toggle + full keyboard shortcuts 📱 Fully responsive — sidebar on desktop, bottom nav on mobile Tech stack: ⚛️ React 19 + Vite 📊 Recharts for all charts and sparklines 🔊 Web Audio API for alert sounds (no external libraries) 💾 localStorage for persistence — no backend needed Some highlights I'm proud of: → Limit order engine that runs on every price tick using refs to avoid stale closures → Price alert system with a two-tone chime using the Web Audio API → Mini sparklines inline in every watchlist row showing 30-day trend → Onboarding screen that only shows once, then never again Built this to practice building something that feels real the kind of app where the UI reacts instantly, animations are smooth, and every interaction has feedback. 🔗 Live demo: https://lnkd.in/gM48pZsA What would you add next? Drop it in the comments 👇 #React #WebDevelopment #JavaScript #Frontend #OpenSource #BuildInPublic

🚀 How React Actually Works (In Simple Terms) If you're using React but still feel like it's magic — this post is for you 👇 🔹 1. It’s All About Components React apps are built using components — small, reusable pieces of UI. Think of them like LEGO blocks 🧱 that you can combine to build complex apps. 🔹 2. Virtual DOM (The Secret Sauce) Instead of updating the real DOM directly (which is slow), React creates a lightweight copy called the Virtual DOM. When something changes, React: * Compares old vs new Virtual DOM (diffing) * Updates only what changed (efficient ⚡) 🔹 3. State & Props * State → Data that changes inside a component * Props → Data passed from parent to child Whenever state changes, React automatically re-renders the component. 🔹 4. Reconciliation Process React uses a smart algorithm to figure out the minimum number of changes needed in the UI. This makes your app fast and optimized. 🔹 5. One-Way Data Flow Data flows from parent → child components This makes debugging easier and your app predictable. 🔹 6. Hooks (Modern React) Hooks like: * useState 🧠 * useEffect 🔄 allow you to use state and lifecycle features in functional components. 💡 In Short: React updates the UI efficiently by: 👉 Tracking changes 👉 Comparing Virtual DOM 👉 Updating only what's needed That’s why React apps feel fast and smooth ⚡ 🔥 Pro Tip: If you truly understand how React works internally, debugging and performance optimization becomes 10x easier. #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #MERN #Coding #SoftwareEngineering #Tech

🚀 Code Splitting & Lazy Loading in React — Faster Apps from Day One Your React app might be fast… 👉 But is it fast on first load? That’s where Code Splitting & Lazy Loading come in. 💡 The Problem By default: ❌ React bundles everything into one big file ❌ Large bundle = slow initial load ❌ Bad user experience 🔥 The Solution → Code Splitting 👉 Break your app into smaller chunks 👉 Load only what’s needed ⚙️ Lazy Loading with React import React, { Suspense, lazy } from "react"; const Dashboard = lazy(() => import("./Dashboard")); function App() { return ( <Suspense fallback={<div>Loading...</div>}> <Dashboard /> </Suspense> ); } 👉 Component loads only when needed 🧠 How it works ✔ Splits bundle into chunks ✔ Loads component on demand ✔ Shows fallback while loading 🧩 Real-world use cases ✔ Route-based splitting ✔ Heavy components (charts, dashboards) ✔ Admin panels ✔ Feature-based modules 🔥 Performance Impact 👉 Smaller initial bundle 👉 Faster page load 👉 Better Core Web Vitals ⚠️ Common Mistake // ❌ Lazy loading everything blindly const Button = lazy(() => import("./Button")); 👉 Don’t lazy load small/common components 🔥 Best Practices ✅ Use for large components/pages ✅ Combine with routing (React Router) ✅ Use meaningful fallback UI ❌ Don’t over-split (too many requests) 💬 Pro Insight (Senior-Level Thinking) 👉 Performance is not just runtime 👉 It starts from how your app loads 📌 Save this post & follow for more deep frontend insights! 📅 Day 27/100 #ReactJS #FrontendDevelopment #JavaScript #PerformanceOptimization #WebPerformance #SoftwareEngineering #100DaysOfCode 🚀

Improving logic in web apps, one small build at a time 👇 Instead of jumping straight into big projects, I’m going through a playlist of 30 micro projects — but with a twist: not just building them, but understanding how to make them scalable, clean, and future-proof. Day 1: Digital Clock ⏰ (built in 3 different ways) Same output, different approaches — and that’s where the real learning happens. The goal isn’t just to “complete projects” It’s to train thinking like a developer who can design systems. I’ll be sharing everything I build here: 🔗 GitHub: https://lnkd.in/dVdN4rsW⁠� 📸 Daily updates: https://lnkd.in/dGfyveGh⁠� Let’s see where 30 days of consistency leads 🚀 #WebDevelopment #BuildInPublic #LearningInPublic #JavaScript #FrontendDevelopment #DeveloperJourney #CodingLife #100DaysOfCode

🌐 Introducing My Diary – A Personal Digital Journal App 📖✨🚀 My Diary is a fully responsive web application designed to help users write, store, search, and manage their daily thoughts and memories in a simple and organized way. Built using modern React ecosystem tools, this project delivers a smooth CRUD-based experience with real-time data handling using a JSON server backend. The platform allows users to create diary entries, edit and delete them, search through past entries, and view everything in a clean, structured interface — making personal journaling more interactive and accessible. 🔥 Key Features: ✅ Full CRUD Functionality – Create, Read, Update, and Delete diary entries seamlessly ✅ Search Feature – Quickly find entries using keyword-based search ✅ JSON Server Integration – REST API simulation for persistent backend data ✅ Axios API Handling – Efficient HTTP requests for data management ✅ Modern UI Design – Built with Bootstrap & Material UI for a clean experience ✅ Responsive Layout – Fully optimized for mobile, tablet, and desktop screens ✅ React Component Architecture – Modular and reusable components for scalability 🛠️ Tech Stack: 🚀 Frontend: 🔹 React.js – Component-based UI development 🔹 Bootstrap 5 – Responsive grid system and styling 🔹 Material UI – Modern UI components and design consistency 🔹 Axios – API communication with backend 🌐 Backend: 🔹 JSON Server – Fake REST API for CRUD operations 💾 Project Links: 🌐 Live Demo: https://lnkd.in/gukxEH4c 🔗 Backend API: https://lnkd.in/ggmntRGF 💻 GitHub Repository: https://lnkd.in/gJ9bwNuP https://lnkd.in/gEPPfdN5 💡 Building this project helped me strengthen my understanding of React state management, API integration using Axios, CRUD operations, and responsive UI design. The focus was on creating a real-world journaling experience with clean architecture and smooth user interaction. I’m continuously improving my frontend development skills by building practical, real-world projects and exploring modern web technologies. 🚀 #ReactJS #FrontendDevelopment #JavaScript #Bootstrap #MaterialUI #Axios #JSONServer #CRUD #WebDevelopment #ResponsiveDesign #PortfolioProject #BuildInPublic 📖 Special thanks to Athulya Aji and Lakshmi Priya K M for their support in this project

#spatial_dev We ran into a classic SPA problem at AR Spatially: shared links looked terrible in Telegram, Slack, and LinkedIn — no previews, no metadata, just a blank card. Migrate to Next.js? Sure, in theory. In practice, that's months of work on a mature codebase with a team that has deadlines. So we built a thin SSR proxy on Express instead. The insight is simple: bots don't need an interactive UI — they just need a title, a description, and an image. Everything else is irrelevant. What we ended up with: → Zero changes to the React app → No overhead for real users — they still get a plain static SPA → Fixed Safari analytics breakage (ITP) as a side effect Wrote it all up on Medium — architecture, full code, and an honest look at the trade-offs we made 👇 https://lnkd.in/g-xyDRB9