Passing Parameters in React Native Navigation

✨ 𝗗𝗮𝘆 𝟯 𝗼𝗳 𝗠𝘆 𝗥𝗲𝗮𝗰𝘁 𝗝𝗼𝘂𝗿𝗻𝗲𝘆 ⚛️🚀 Today I learned about 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸𝘀, especially the 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲 𝗵𝗼𝗼𝗸 — and this finally made React feel more practical. Before this, I was thinking about how we usually update the UI manually in JavaScript — selecting elements, changing text, updating the DOM step by step. It works, but it can get messy and hard to manage as the app grows. With `𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲`, React handles that for us. We just update the 𝘀𝘁𝗮𝘁𝗲, and React automatically updates the UI. No need to manually touch the DOM every time. That shift in thinking was really interesting — instead of telling the browser 𝗵𝗼𝘄 to update, we just tell React 𝘄𝗵𝗮𝘁 the state should be. Starting to see why React is so powerful for building dynamic apps 💻⚡ #ReactJS #JavaScript #WebDevelopment #LearningJourney #FrontendDevelopment

💡 Case Study: Improving React App Performance 🚀 Ever faced a React app that feels *painfully slow* with large data? I did. Recently, I worked on optimizing a React-based application that had noticeable lag issues. Problem: • Slow rendering with large datasets (~1000+ records) • Frequent unnecessary re-renders • Poor user experience What I did: • Used React.memo & useMemo to prevent unnecessary renders • Analyzed performance using React DevTools Profiler • Optimized API handling & state updates • Reduced redundant computations Result: • ~35–40% performance improvement • Much smoother UI interactions • Reduced rendering time significantly Key takeaway: Performance optimization is not about doing more — it's about avoiding unnecessary work. Have you faced similar performance issues in React? What worked for you? #ReactJS #PerformanceOptimization #FrontendDevelopment #JavaScript #WebDevelopment

Are memory leaks secretly slowing down your JavaScript app? I've seen it happen to the best of us - a team works tirelessly to meet a deadline, only to have their hard work bogged down by performance issues. In one real-world scenario, a team I worked with spent weeks optimizing their code, only to find that a memory leak was the root cause of their problems. The rule of thumb is to always keep an eye on your app's memory usage, especially when working with large datasets. But here's the thing: juniors often overlook the hidden pitfall of not properly cleaning up event listeners, which can lead to memory leaks. Don't let that be you - take the time to review your code and plug those leaks. Your app (and your users) will thank you 🚀. #javascript #webdevelopment #memorymanagement

🚀 Most people think slow apps = slow internet ❌ But today I learned something deeper 👇 A React app is not just “download and show UI” The browser actually does 3 heavy things: 📥 Download JavaScript 🧠 Parse (understand) it ⚙️ Execute (run) it 👉 Even UNUSED code still gets parsed 👉 Some of it even executes 💥 That means: Big bundle = more browser work = slower app So performance is not just about: 👉 reducing size It is about: 👉 reducing unnecessary JavaScript work That’s where things like: ⚡ Code Splitting 💤 Lazy Loading 🌳 Tree Shaking actually matter 💡 Biggest mindset shift: “Don’t send everything. Send only what the user needs right now.” Learning in public 🚀 #frontend #react #webperformance #javascript #softwareengineering

Memory Leaks in JavaScript Apps A Silent Performance Killer Memory leaks happen when your app keeps using memory that it no longer needs. Over time, this can slow down your website or even crash it Common Causes: • Unused variables still referenced • Forgotten event listeners • Timers (setInterval, setTimeout) not cleared • Detached DOM elements Why It Matters: A small leak might seem harmless, but in long-running apps (like dashboards or SPAs), it can lead to serious performance issues. How to Prevent It: Remove event listeners when not needed Clear timers properly Avoid global variables Use tools like Chrome DevTools Memory tab Pro Tip: Always test your app performance over time, not just at launch! Keep your JavaScript apps fast, clean, and efficient! #JavaScript #WebDevelopment #CodingTips #Frontend #Performance #Developers

💥 Most developers assume using useMemo and useCallback everywhere will automatically make a React app faster. Sounds logical: Memoize more → fewer re-renders → better performance. But in real-world apps, it often doesn’t work like that. I’ve seen this pattern quite often — developers start adding these hooks with good intent, but without actually measuring anything. • Wrapping functions with useCallback • Memoizing even simple values • Adding optimizations “just in case” And then… 🚨 No real performance improvement 🚨 Code becomes harder to read and maintain 🚨 Debugging gets more complicated 🚨 Sometimes performance even degrades 🧠 The important part: useMemo and useCallback are not free. They introduce overhead — memory usage, dependency comparisons, and extra complexity. ⚡ What actually works better: • Understanding why components re-render • Improving state structure • Splitting components smartly • Measuring performance using React DevTools 🔥 My take: React is already quite fast. Blindly adding memoization often creates more problems than it solves. 💡 Rule I follow: If I haven’t measured a real performance issue, I don’t reach for useMemo or useCallback. Curious — do you think these hooks are overused in most React apps? 🤔 #ReactJS #FrontendDevelopment #WebPerformance #JavaScript #SoftwareEngineering #ReactPerformance

🚀 Built a React App Using useReducer ⚛️ I recently built a "React Quiz" app to strengthen my understanding of state management in React. 🧠 Key learnings: Managing complex state with useReducer Handling async data (loading questions from a mock API) Managing loading, error, and ready states ⚡ Answer selection & smooth navigation between questions Tracking progress 📊 Completing & restarting the quiz 🔁 Implementing a countdown timer using useEffect ⏱️ 💡 This project helped me understand when to use useReducer over useState for more structured and scalable state logic. 🔗 GitHub Repo: https://lnkd.in/g8VeyXhi Feedback is welcome 🙌 #React #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #LearningByBuilding

Today I learned something interesting in JavaScript! Topic: Debouncing Debouncing helps improve performance by limiting how often a function runs. Example: Instead of calling an API on every keystroke, we delay the call until the user stops typing. This small concept can make a big difference in real-world apps. #JavaScript #WebDevelopment #LearningInPublic #Frontend

⚛️ Why Your React App Re-Renders Too Much (And How Senior Devs Fix It) One of the biggest performance killers in React apps is unnecessary re-renders… and most developers don’t even realize it. 👉 Common mistakes: ❌ Passing new object/array props on every render ❌ Inline functions inside components ❌ Not using memoization properly Example: Every render creates a new function → child re-renders again 💡 Senior-Level Fix: ✔ useCallback → memoize functions ✔ useMemo → memoize expensive calculations ✔ React.memo → prevent unnecessary re-renders But here’s the catch 👇 Don’t overuse them. ⚡ Rule: “Optimize only when there is a real performance issue.” Blind optimization can make your code worse. 👉 Pro Tip: Use React DevTools Profiler to identify actual re-render problems. Performance is not about writing more code… it’s about writing smarter code. #reactjs #frontend #performance #javascript #webdevelopment #fullstack #softwareengineering #optimization

🚀 Your React app might be re-rendering more than you think… and hurting performance. While working on large-scale applications, I kept running into unnecessary re-renders that slowed things down. Here’s a simple fix that made a big difference 👇 🔻 Without Optimization Every time the parent re-renders, the child re-renders too ❌ const Child = ({ onClick }) => { console.log("Child re-rendered"); return <button onClick={onClick}>Click Me</button>; }; function Parent() { const handleClick = () => { console.log("Clicked"); }; return <Child onClick={handleClick} />; } 🔻 Optimized Version import React, { useCallback } from "react"; const Child = React.memo(({ onClick }) => { console.log("Child re-rendered"); return <button onClick={onClick}>Click Me</button>; }); function Parent() { const handleClick = useCallback(() => { console.log("Clicked"); }, []); return <Child onClick={handleClick} />; } ✅ Child now re-renders only when props actually change ✅ Prevents unnecessary updates ✅ Improves performance in large component trees 💡 Key Insight: In React, functions are re-created on every render → which can trigger unwanted re-renders. Have you faced this issue in your projects? How do you handle performance optimization in React? 👇 hashtag #ReactJS #FrontendDevelopment #JavaScript #PerformanceOptimization #WebDevelopment #SoftwareEngineering