Optimizing React Data Flow and Performance

🚀 Diving deep into Tech Talk! Learn how to implement a custom hook in React to level up your coding skills! 🤓 A custom hook is a reusable JavaScript function that allows you to extract component logic into a separate function for more organized and efficient code. Why does it matter? It enhances code reusability, readability, and makes your components more maintainable. 💡 Let's break it down step by step: 1️⃣ Create a new JavaScript file for your custom hook. 2️⃣ Define your custom hook function using the "use" prefix. 3️⃣ Inside the function, write your custom logic using React hooks. 🖥️ Here's an example of a custom hook that fetches data from an API: ```jsx import { useState, useEffect } from 'react'; const UseDataFetching = (url) => { const [data, setData] = useState([]); useEffect(() => { const fetchData = async () => { const response = await fetch(url); const result = await response.json(); setData(result); }; fetchData(); }, [url]); return data; }; export default UseDataFetching; ``` 🔍 Pro tip: Keep your custom hooks small, focused, and platform-agnostic for maximum flexibility! 👉 Common mistake alert: Forgetting to add dependencies to the useEffect hook can lead to infinite component re-renders, so always double-check your dependencies! ❓ What custom hook are you excited to build next? Share your ideas below! 🌐 View my full portfolio and more dev resources at tharindunipun.lk #ReactHooks #CustomHooks #JavaScriptDevelopment #CodeReusability #WebDevTips #ReactJS #ProgrammingCommunity #TechTalk #CodingJourney #tharindunipun.lk

I didn't just build a project. I built something I actually use. 🛠️ DevBoard is a GitHub Profile Dashboard — search any developer and instantly see: 📊 Their contribution heatmap 🧩 Language breakdown across repos 📌 Pinned repositories ⭐ Top repos ranked by stars But the features aren't what I'm most proud of. It's what I had to figure out along the way: → GitHub's API rate limits hit fast. I had to handle errors gracefully so users never see a broken screen. → Dark mode isn't just aesthetic — it taught me how to architect CSS theming properly. Stack: React + CSS3 + GitHub REST API, deployed on Vercel. Every bug I fixed made me a better developer. Every feature I shipped gave me a new idea for the next one. If you're learning frontend — build real things. APIs, edge cases, deployment. That's where the growth happens. 🔗 Try it live: https://lnkd.in/gSHxayUm 🔗 GitHub: https://lnkd.in/gG5KPu4Z #React #FrontendDevelopment #JavaScript #GitHub #WebDev #BuildInPublic #OpenSource #100DaysOfCode

Day 2: The Secret Life of a Function Call — Global vs. Local Execution Context 🚀 Today, I went deeper into the "Big Box" of JavaScript to understand exactly what happens when we call a function. Using this simple square function as an example, here is the line-by-line magic: 🎭 The Two-Phase Performance Phase 1: Memory Allocation Before a single line of code runs, JavaScript scans everything. n, square2, and square4 are allocated memory and set to undefined. The square function gets its own memory space with the entire function code stored inside. Phase 2: Code Execution Line 1: n is assigned the value 2. Line 6: This is where it gets interesting! A Function Invocation happens. 📦 The "Mini Box": Functional Execution Context When square(n) is called, a New Execution Context is created inside the Global one! Memory Phase: A local variable ans is created (undefined). Code Phase: num becomes 2, ans becomes 4. The Return Statement: This is the exit signal. It returns the value 4 to square2 and destroys the local execution context immediately. 📚 The Call Stack: The Manager of it All How does JS keep track of these nested boxes? The Call Stack. It's a stack (LIFO - Last In, First Out). Bottom of stack: Global Execution Context (GEC). When a function is called, it's pushed onto the stack. When it returns, it's popped off. 💡 Interview Tip: Did you know the Call Stack has many names? It’s also called the Execution Context Stack, Program Stack, Control Stack, Runtime Stack, or Machine Stack. Understanding how the stack grows and shrinks is the key to mastering Recursion and avoiding the dreaded "Stack Overflow"! Drop a "🚀" if you’re also following the Namaste JavaScript series! #JavaScript #WebDevelopment #CallStack #ExecutionContext #ProgrammingLogic #FrontendEngineer #CodingCommunity #JSFundamentals

Project 7/25 — This is where I stopped just writing JavaScript… and started thinking While learning JavaScript, I got to a point where syntax wasn’t enough anymore. I needed to understand how to solve real problems. So I completed the final projects from the freeCodeCamp JavaScript Algorithms and Data Structures course: • Phone Number Validator (using Regex) • Cash Register (handling logic for real-world transactions) • Creature Search App (fetching and displaying data from an API) This phase challenged me differently. It wasn’t about UI — it was about logic and problem solving. I had to think through things like: • Breaking problems into smaller steps • Handling edge cases (like insufficient funds in the cash register) • Working with algorithms instead of just UI interactions • Fetching and handling external data from an API One project that really stood out was the cash register — figuring out how to return the correct change using available denominations forced me to think like a problem solver, not just a developer. Looking back, this was the point where JavaScript started to feel like a real tool — not just a language. I’ll keep building on this foundation. Live demo @ https://lnkd.in/d7ibUT55 #JavaScript #ProblemSolving #FrontendDevelopment #BuildInPublic #Project25

Restarting My Coding Journey After 3 Months Here’s My Comeback Roadmap👇 After taking a 2-month break from coding, I realized something important: Consistency matters more than intensity. Instead of starting from scratch, I’m focusing on a structured comeback plan to go from medium → advanced full stack developer. Here’s the roadmap I’m following 👇 🔹 Phase 1: Restart & Strengthen Basics - JavaScript deep revision (async/await, promises) - Git & GitHub workflows - API fundamentals (fetch, REST) - Database basics (MongoDB / SQL) - Build: Form validation + Auth UI 🔹 Phase 2: Core Full Stack Practice - Login/Signup system (JWT auth) - CRUD operations (Notes / Tasks app) - API integration (Movie / Data app) - Build: Full Auth + CRUD project 🔹 Phase 3: Real-World Projects - Blog platform / Task manager - Dashboard UI (analytics, tables) - Clean architecture & reusable components - Focus: Writing scalable code 🔹 Phase 4: Advanced + Deployment - Authentication (refresh tokens, protected routes) - Performance & optimization - Deployment (Vercel / Render) - Build: Production-ready full stack project 💻 Tech Stack I’m focusing on: Next.js • Node.js • MongoDB • Tailwind CSS • JWT Goals for this journey: Build 3 strong portfolio projects - Stay consistent daily - Share my learning publicly Create content around real-world builds 💡 If you’re also struggling to restart after a break - Don’t overthink. Start small. Stay consistent. Build daily. #FullStackDevelopment #WebDevelopment #CodingJourney #JavaScript #Nextjs #100DaysOfCode #Developers #LearningInPublic

- A React Design Principle that Helped Me Write Better Code Previously, I used to pass data through a chain of components… props → child → child → child 😅 It was fine but eventually got messy and complicated. Later, I learned this 👇 👉 Don't pass data unnecessarily Now, my focus is on: • Leveraging Context API for data sharing • Minimizing and optimizing props • Organizing components better For instance: Instead of passing the same data through 4-5 components, I leverage Context to access it whenever needed. This simple principle has allowed me to: ✅ Cut down on unnecessary code ✅ Enhance code readability ✅ Make components easier to handle Writing good code in React goes beyond data transfer; it's about efficient data transfer. 💬 Have you encountered prop drilling in your work? #ReactJS #ReactNative #FrontendDevelopment #ReactDesignPrinciples #ContextAPI #CodeRefactoring #WebDevelopment #ComponentOrganization #SoftwareEngineering #FrontendEngineer #ProgrammingTips #DevCommunity

🚀 50 Weeks, 50 Projects – Week 6 Complete To push my development skills beyond tutorials, I'm continuing my 50 Weeks, 50 Projects challenge, where I build and ship one project every week. 🛠 Week 6 – API Lens: AI-Powered JSON Explorer Ever stared at a raw API response and had no idea what half the fields meant? That's exactly why I built this. Tech Stack: HTML · CSS · Vanilla JS · OpenRouter API (Mistral-7B, free tier) Design Style: Warm, human-first UI — cream tones, serif typography (Fraunces), and a layout that feels more like a notebook than a dev tool. Built specifically to be approachable for beginners. Functionality: 📋 Paste raw JSON or fetch any public API URL directly 🤖 AI explains every field in plain English — no docs needed 🌳 Interactive collapsible field tree with color-coded types ⏱ Unix timestamps decoded to human-readable dates automatically 🛡 Auto-detects response type: JWT, paginated list, error, REST 📋 One-click copy for JS, Python & cURL code snippets ⚡ 3-layer CORS proxy fallback — works with almost any public API Suggestions: I'd love feedback from the community! What other API patterns should I detect? Any features that would make this more useful in your daily workflow? Live URL : https://lnkd.in/dBcejh34 #50WeeksChallenge #BuildInPublic #WebDev #JavaScript #API #OpenSource #100DaysOfCode

Last week, a client project hit a wall. The feature was architected perfectly in Next.js, and the Supabase queries were lightning-fast. But the client was ready to pull the plug because they didn't understand the trade-offs we were making. I didn't need to invert a binary tree to fix it. I needed to translate technical debt into business risk. In my years as a lead, I’ve never seen a Senior Engineer get fired for not knowing a niche algorithm. I’ve seen plenty get sidelined for being unable to communicate. LeetCode gets you the interview. Soft skills get you the promotion. Technical excellence is just the entry fee. The real work is managing expectations, handling friction between stakeholders, and knowing when to say "no" to a feature that hurts the product long-term. If you can’t explain why you’re choosing FastAPI over Django, or why we’re sticking to React Native instead of a web-view, your code doesn't matter. At the end of the day, we’re building solutions for people, not compilers. What’s the one "soft" skill that leveled up your career more than any coding framework? #SoftwareEngineering #TechLeadership #CareerGrowth #EngineeringManagement

I spent 3 months confused by React. Then I learned Hooks — and everything finally clicked. Most tutorials throw you into class components and lifecycle methods. It's overwhelming. But Hooks changed everything — they made React actually fun to write. Here's the complete mental map I wish I had on day one: ⚡ useState — add local state to any function component ⚡ useEffect — handle side effects (API calls, subscriptions) 🔵 useRef — access DOM elements & persist values without re-rendering 🔵 useContext — share data across the component tree 🟡 useMemo — cache expensive calculations 🟡 useCallback — memoize functions to prevent unnecessary re-renders 🟢 useReducer — manage complex state with reducer logic 🟢 useLayoutEffect — like useEffect, but fires before paint 5 tips to go from beginner → advanced: Master useState & useEffect DEEPLY before moving on Build custom hooks — extract logic you reuse (e.g. useWindowSize) Think in data flow — hooks work best when you understand how state moves Optimize wisely — reach for useMemo/useCallback only when you actually need them Keep building. Real projects teach what tutorials can't. Hooks aren't just syntax — they're a new way of thinking about UI logic. If you're just starting out: be patient with yourself. The mental model takes time. Once it lands, you'll wonder how you ever coded without them. Save this post — it'll make sense in ways it doesn't yet. 🔖 Which Hook was the hardest for you to wrap your head around? Drop it below 👇 #ReactJS #WebDevelopment #JavaScript #Frontend #ReactHooks #Coding #LearnToCode #SoftwareEngineering #100DaysOfCode

🚀 Just shipped a new feature on PDFMitra that I'm genuinely excited about. You can now paste any GitHub repo URL → and get a professional PDF report in seconds. No AI. No paid API. Completely free. — 𝗪𝗵𝘆 𝗜 𝗯𝘂𝗶𝗹𝘁 𝘁𝗵𝗶𝘀: Every time I had to submit a college project or send a client a project handover — I'd spend 30-40 minutes manually writing a "project documentation" PDF. Screenshots. Copy-pasting README. Writing tech stack details. Nobody has time for that. — 𝗪𝗵𝗮𝘁 𝘁𝗵𝗲 𝗣𝗗𝗙 𝗶𝗻𝗰𝗹𝘂𝗱𝗲𝘀: 📋 Cover page with repo stats (Stars, Forks, Watchers) 📊 Project overview + metadata 💻 Tech stack with language % breakdown 📁 Folder structure tree 📖 Full README rendered as text 🕐 Last 10 commits with author + date 👥 Top contributors 📦 Dependencies (package.json / requirements.txt) All in one clean PDF. Ready to share. — 𝗪𝗵𝗼 𝗶𝘀 𝘁𝗵𝗶𝘀 𝗳𝗼𝗿: → CS/IT students submitting project docs for college viva → Freelancers sending project handover PDFs to clients → Developers attaching project documentation to job applications → Hackathon participants creating submission summaries — Built with Next.js + pdf-lib + GitHub REST API. Zero server uploads. Completely client-processed. Try it free 👇 https://lnkd.in/dhgRdZDg — Would love your feedback — what would you add to the PDF report? Drop it in the comments 👇 #OpenSource #WebDev #ReactJS #NextJS #IndianDeveloper #SideProject #PDFMitra #GitHub #MadeInIndia