Sankalp Mishra’s Post

State management is where most frontend apps start getting messy. It’s not about choosing a library — it’s about choosing the right type of state. I’ve seen teams overcomplicate things by: Using Redux for everything Mixing API data with UI state Making simple flows hard to debug So here’s a better way 👇 🔹 Part 2: State Management (Redux vs Context vs Server State) Local state → keep it simple Global state → structure it well Server state → handle it separately Read here 👇 https://lnkd.in/gsTrJDHR Next: Folder Structure (Feature vs Layer — what actually scales) #frontend #reactjs #systemdesign #webdevelopment #javascript

Day 18 — Pos-tI-tUP 📸 A React-based photo posting app where users can upload, edit, and delete posts with images and captions. Tech Stack: • React • Tailwind CSS • react-hook-form Key Concepts Applied: • Lifting state up across components • useRef for programmatic file input • Component composition (Navbar, UploadForm, PostCard) • CRUD operations via state Small project, big learnings. Consistency is the key. 💪 GitHub: https://lnkd.in/gpVakZ8C Live Link: https://lnkd.in/g-edej_E #React #Frontend #WebDev #100DaysOfCode #Day18 #JavaScript

Stop installing NPM packages for everything. The browser can already do it. We've all been there: you need to add a "share" button, deep-clone an object, or format a date. The first instinct? Head to NPM, find a library, and install it. But every time we rely on a third-party package for a simple task, we pay a hidden tax: ❌ Increased bundle size ❌ Slower load times for our users ❌ More dependencies to update and maintain ❌ Potential security vulnerabilities Modern browsers are incredibly powerful, and we often ignore the amazing Native Web APIs right at our fingertips. Take the Web Share API navigator.share(), for example. Instead of importing a bulky custom social sharing component, you can use a few lines of vanilla JavaScript to trigger the native sharing dialog on a user's device. 🎯 Zero bundle size added. 🎯 Familiar native UI for the user. 🎯 No third-party code to maintain. And it doesn't stop at sharing! Before you reach for a library, check if the browser already has your back: ✔️ Need scroll-based animations or lazy loading? Use Intersection Observer instead of heavy scroll-event listeners. ✔️Need to format dates, times, or currencies? Use the Intl API instead of massive date-handling libraries. ✔️Need to deep copy an object? Use structuredClone() instead of installing a utility library. Let's start leaning on the platform. By utilizing built-in Web APIs, we write cleaner code, ship less JavaScript, and build significantly faster applications. Hi, i'm Emmanuel joel, a self-taught frontend engineer who loves talking about his struggles. If this is your first time seeing my post, i want to connect with you. Let's be friends. What is your favorite native Web API that saves you from installing an extra package? Let me know below! 👇 #WebDevelopment #JavaScript #WebPerformance #Frontend #SoftwareEngineering #CodingTips

A slow page isn’t always a slow server. Sometimes it’s just your app downloading a lot of code the user will never actually use. We ran into this while migrating a large legacy frontend to React. The initial load was pulling in routes the user hadn’t visited and features behind flags most people would never trigger. All of it bundled together and shipped on every page load. The fix was surprisingly simple. Stop sending code the user doesn’t need yet. We split bundles by route so each page loads its own code only when the user navigates there. Heavy components were further down the page load on demand instead of during startup. The main bundle dropped by about 30 percent and the initial load got noticeably faster by just being a bit more intentional about what goes to the browser. A lot of performance problems aren’t complicated. They happen because nobody stopped to ask one simple question. Does the user actually need this right now? #Frontend #React #WebPerformance #JavaScript

Most explanations make React server components sound harder than they actually are but they're not. Simply... React Server Components are just components that run on the server instead of the browser, so they don't send unnecessary JavaScript to the client and only the final rendered output reaches the UI. Say like moving heavy work away from the user's device and handling it where it's more efficient 😎 Behind the scenes, React executes these components on the server, fetches data directly there like from a DB or API without needing extra client side calls, converts the result into a lightweight payload, and streams it to the browser where it gets merged with interactive parts handled by client components. Why this actually matters is simple, less JavaScript in the browser means faster load, smaller bundles, better performance, and your sensitive logic stays on the server while still keeping the UI interactive where needed. Follow Sakshi Jaiswal ✨ for more quality content ;) #Frontend #React #Sakshi_Jaiswal #FullstackDevelopment #javascript #TechTips #ServerComponents #ServerSideRendering #NextJs

Unpopular opinion: useEffect is one of the most misused hooks in React. Most codebases I've worked in fall into the same traps: → Syncing state that could just be derived → Triggering logic that belongs in an event handler → Creating infinite re-render loops nobody wants to debug at 2am The real rule is simple: useEffect is for syncing with external systems — browser APIs, network requests, third-party widgets. That's it. If you're using it to watch one state variable and update another — that's a sign your state model needs a rethink, not another effect. Cleaner effects = easier to reason about = fewer production bugs. Spotted this on X via @alexdanilowicz — and it resonated #React #JavaScript #WebDevelopment #Frontend

Have you ever opened a webpage and noticed that the content appears instantly… but the buttons don’t work for a moment? Recently I was reading about 𝗥𝗲𝗮𝗰𝘁 𝗛𝘆𝗱𝗿𝗮𝘁𝗶𝗼𝗻, and it made me pause for a moment. When we build apps with React frameworks like 𝗡𝗲𝘅𝘁.𝗷𝘀, the page you see in the browser is often already rendered on the server. So when the page loads, the content appears very fast. You can read the text. You can see the buttons. But something interesting is happening at that moment. The page is actually 𝗷𝘂𝘀𝘁 𝗛𝗧𝗠𝗟. Buttons are visible, but the logic behind them isn’t active yet. Event handlers are not attached. State isn’t working. Then 𝗥𝗲𝗮𝗰𝘁 loads in the browser and starts connecting the JavaScript logic to that already rendered HTML. That process is called 𝗵𝘆𝗱𝗿𝗮𝘁𝗶𝗼𝗻. It’s basically the moment when a static page becomes a fully interactive React application. Understanding this small concept will help you to see why SSR makes pages feel faster, and also why sometimes we see 𝘩𝘺𝘥𝘳𝘢𝘵𝘪𝘰𝘯 𝘮𝘪𝘴𝘮𝘢𝘵𝘤𝘩 warnings. Have you ever encountered a hydration mismatch issue while working with React? #frontend #react #nextjs #html #error

🚀 Just Built a Sticky Notes Web App using HTML, CSS & JavaScript! I recently created a simple Sticky Notes application that allows users to quickly write and manage notes directly in the browser. ✨ Key Features: • Create unlimited sticky notes • Edit notes in real time • Delete notes instantly • Notes automatically saved using localStorage • Clean and simple UI layout 💡 What I learned while building this project: DOM manipulation in JavaScript Handling events like click and input Using localStorage to persist data after page refresh Dynamically creating and updating elements This project helped me understand how front-end apps manage state and user interactions without a backend. 🔗 GitHub Repository: https://lnkd.in/gZGtkcuG I’m continuing to build more mini projects to strengthen my JavaScript and frontend development skills. #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #CodingJourney #100DaysOfCode #GitHub #kccitm

⚡ How I reduced my Next.js bundle size by 40% Last quarter our app took 8.2 seconds to load on a mid-range device. Lighthouse scores I was too ashamed to screenshot. So I audited everything — and cut the bundle by 40% in two weeks. Here's what actually moved the needle 👇 🔍 Diagnose before you fix anything → Run next build and flag anything over 100kb → Install @next/bundle-analyzer and look at what's bloating your output → Use Chrome DevTools Coverage tab to find JS that never even executes You can't fix what you haven't measured. ✂️ Audit your dependencies ruthlessly ❌ moment.js → replaced with date-fns (tree-shakeable) ❌ import _ from 'lodash' → switched to individual imports ❌ A full UI library imported for just 3 components Run npx depcheck and prepare to be humbled. 🧩 Fix your dynamic imports If the user can't see it on first paint — they don't need the JS yet. → Modals, charts, anything below the fold → wrap in dynamic() → Heavy third-party SDKs → load only on interaction 🖥️ Push more work to the server Ask of every component: "Does this actually need to run on the client?" Converting data-fetching components to Server Components alone cut a huge chunk of our client bundle. 📊 Results after two weeks: → Bundle size: -40% → Load time: 8.2s → 4.1s → Lighthouse score: 54 → 91 → Bounce rate: -18% Performance is a feature. Slow apps lose users before they even see your product. What's the biggest performance win you've ever shipped? 👇 #nextjs #react #webperformance #frontend #javascript

Day 13: Component Lifecycle in React (Using Hooks) Before Hooks, React had lifecycle methods in class components. Now, with Hooks, we can handle the entire lifecycle using useEffect. 📌 What is Component Lifecycle? Every React component goes through 3 main phases: 1️⃣ Mounting → Component is created and added to the DOM 2️⃣ Updating → Component re-renders when state/props change 3️⃣ Unmounting → Component is removed from the DOM 📌 Handling Lifecycle with useEffect 👉 1. Mounting (Component Did Mount) useEffect(() => { console.log("Component Mounted"); }, []); Runs only once when the component loads. 👉 2. Updating (Component Did Update) useEffect(() => { console.log("Component Updated"); }, [count]); Runs whenever count changes. 👉 3. Unmounting (Component Will Unmount) useEffect(() => { return () => { console.log("Component Unmounted"); }; }, []); Used for cleanup (like clearing timers, removing listeners). 📌 Real-world Example Think of a timer app • Start timer → Mount • Update time → Update • Stop/leave page → Unmount 📌 Why Lifecycle is Important ✅ Prevent memory leaks ✅ Manage API calls properly ✅ Control when code runs ✅ Optimize performance #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CodingJourney #LearnInPublic