Stop Prop-Heavy Components with Compound Component Pattern

📚 React js Handwritten notes Most people get stuck in "tutorial hell" because they don't have a structured roadmap . This handbook is designed to help master the library ecosystem faster by focusing on the core principles that drive modern web applications. Concepts Covered: 🔹 The Foundations: Understanding React as a library , the difference between frameworks and libraries , and setting up your environment with bundlers like Parcel or Webpack . 🔹 JSX & Rendering: Mastering JSX syntax , why it isn't just HTML inside JS , and how React efficiently updates the DOM using the Virtual DOM and Diff Algorithm . 🔹 Component Architecture: Building with Functional vs. Class-based components , and implementing Component Composition for scalable UI . 🔹 State Management & Hooks: Creating dynamic applications using useState for local variables and useEffect for handling API calls and side effects . 🔹 Advanced Patterns: Implementing Config-Driven UI , passing data through Props , and optimizing performance with keys and HMR . 🔹 Routing & SPAs: Building seamless Single Page Applications (SPAs) using react-router-dom and client-side routing . #Pro_Tip: Always use unique keys when rendering lists . It allows React to match children in the original tree with the subsequent tree, making tree-conversion efficient and saving expensive re-rendering time . 👉 Which React concept do you find the hardest to master? Let's discuss in the comments! 👇 #reactjs #frontend #webdevelopment #javascript #codingtips #programming #hooks

👉Understanding the useRef Hook in React React provides powerful Hooks to manage components. 👉 One important hook is useRef, which allows you to access and store values without re-rendering the component. 1. What is useRef? Answer: i).useRef is a React Hook used to reference DOM elements or store values that persist between renders. ii).In simple words It helps you directly access elements or remember values without refreshing the UI. 👉Syntax: const refName = useRef(initialValue); 2. Why use useRef? ✔ Access DOM elements (input, button, etc.) ✔ Store previous values ✔ Avoid unnecessary re-renders ✔ Manage focus, animations, and timers 👉 Example: Focus Input Field import React, { useRef } from "react"; function FocusInput() { const inputRef = useRef(); const handleFocus = () => { inputRef.current.focus(); }; return ( <div> <input ref={inputRef} type="text" placeholder="Enter your name" /> <button onClick={handleFocus}>Focus Input</button> </div> ); } export default FocusInput; --> How it works? • useRef creates a reference • ref connects to input element • Clicking button focuses input field • No re-render happens ✴️Key Difference: useState vs useRef -------------------------------------------------------------- • useState → causes re-render • useRef → does NOT cause re-render -------------------------------------------------------------- #React #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #Programming #SoftwareDevelopment #Learning

Day 66 of me reading random and basic but important dev topicsss...... Today I read about the Mastering DOM Selection & Range in JavaScript..... When building complex UI features in React or vanilla JS, we often rely on synthetic events and abstract away the DOM. But how do rich-text editors or custom highlighting tools actually work under the hood? It all boils down to two core native APIs: Range and Selection. Now what is a Range? A Range is an abstract pair of boundary points (start and end) in the document. It doesn't visually select anything on its own.... it simply defines a specific fragment of the document tree in memory. * Creating a Range: You instantiate it simply: let range = new Range(); Then, you set the boundaries using range.setStart(node, offset) and range.setEnd(node, offset). * The Offset Gotcha: The behavior of the offset parameter changes completely depending on the node type! 1. If the node is a Text Node: The offset represents the character position. (e.g., range.setStart(textNode, 2) starts at the 3rd letter). 2. If the node is an Element Node: The offset represents the child index. (e.g., range.setStart(pElement, 0) sets the boundary right before the first child node). tip: Your starting and ending nodes don’t even have to be the same or share an immediate parent. A range can span across entirely unrelated nodes, as long as the endpoint logically follows the start point in the document flow. Keep Learning!!!!! #JavaScript #WebDevelopment #FrontendDev #React #SoftwareEngineering

Just published the second video of my JavaScript Full Course where I break down some of the most important real-world JavaScript concepts that every developer MUST know 👇 In this lesson, you’ll learn: ✅ DOM Manipulation (Real UI control) ✅ Event Handling (User interaction logic) ✅ Asynchronous JavaScript (How JS works behind the scenes) ✅ Promises & Async/Await (Modern coding patterns) ✅ Fetch API (Working with real APIs) ✅ setTimeout & setInterval (Time-based tasks) These topics are not just theory — they are used daily in frontend development, React apps, dashboards, and production-level websites. If you're learning JavaScript seriously or preparing for developer jobs, this video will help you level up 💪 🎥 Watch here: https://lnkd.in/dz6B-Hfx Let me know in the comments: 👉 Which JavaScript topic do you find most confusing — DOM or Async JS? #JavaScript #WebDevelopment #Programming #FrontendDeveloper #CodingLife #LearnToCode #TechSkills #DeveloperCommunity #JavaScriptCourse

🔸 This is the checklist I follow when reviewing pull requests in a React codebase 1️⃣ DRY Principle (Don’t Repeat Yourself) If the same logic or JSX appears multiple times, extract it into a helper function or a reusable component to reduce bugs and improve maintainability. 2️⃣ Inline CSS & Styling Practices Inline styles may be quick, but they hurt readability, reusability, and theming. I prefer CSS modules, styled components, or well-structured class names. 3️⃣ Console Logs in Production Code console.log looks harmless, but it can pollute logs, slow down apps, and make real issues harder to trace. They should be removed or guarded behind environment checks. 4️⃣ Props Flow Between Parent & Child Too many props usually indicate tight coupling or prop drilling. This is often a sign that component boundaries or state placement need rethinking. 5️⃣ useEffect Dependencies & Side Effects Incorrect dependency arrays can cause stale data, extra re-renders, or subtle bugs. 6️⃣ Keys in Lists Missing or unstable keys break React’s reconciliation and can lead to weird UI issues. Indexes should be avoided unless the list is truly static. 7️⃣ Error Handling & Edge Cases What happens if the API fails, returns empty data, or unexpected values? Production-ready code handles unhappy paths gracefully. 8️⃣ Performance Red Flags I look for unnecessary re-renders, heavy computations inside render, and missing memoization where it actually matters. 9️⃣ Naming & Readability Good code explains itself. Clear naming, small focused components helps a lot What do you usually look for while reviewing React PRs, Let me know in the comments! #reactjs #nextjs #javascript #technology #codereview #softwareengineering #technology #userexperience #programming #ig

𝐓𝐨𝐝𝐚𝐲 𝐈 𝐩𝐮𝐛𝐥𝐢𝐬𝐡𝐞𝐝 𝐦𝐲 𝐟𝐢𝐫𝐬𝐭 𝐧𝐩𝐦 𝐩𝐚𝐜𝐤𝐚𝐠𝐞 🎉 𝗖𝗵𝗲𝗰𝗸 𝗶𝘁 𝗼𝘂𝘁 𝗵𝗲𝗿𝗲: https://lnkd.in/dJAJZBG2 𝗪𝗵𝗮𝘁 𝗽𝗿𝗼𝗯𝗹𝗲𝗺 𝗜 𝗳𝗮𝗰𝗲𝗱? In React Native, we can’t create gradient text with just <Text />. Every time we need to use: • MaskedView • react-native-linear-gradient • absolute positioning • invisible text for layout sizing It’s repetitive, easy to mess up and honestly… not clean. Every new project, same setup again and again. 𝗦𝗼 𝘄𝗵𝗮𝘁 𝗜 𝗱𝗶𝗱? I created a simple reusable component. 𝗡𝗼𝘄 𝘆𝗼𝘂 𝗷𝘂𝘀𝘁: • Import the component • Pass colors, start, end • Or disable gradient with showGradient={false} • Use normal Text props That’s it. Clean. Reusable. Typed with TypeScript. No more repeating complex setup in every screen. 𝗛𝗼𝘄 𝘆𝗼𝘂 𝗰𝗮𝗻 𝗯𝗲𝗻𝗲𝗳𝗶𝘁? If you are building: • Landing screens • Premium UI • Highlighted titles • Branding text You can now add gradient text in seconds. No headache. No layout hacks. This is my first npm package, so your feedback means a lot. If you try it, let me know what I can improve. 𝗪𝗵𝗮𝘁 𝘀𝗺𝗮𝗹𝗹 𝗽𝗿𝗼𝗯𝗹𝗲𝗺 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 𝗡𝗮𝘁𝗶𝘃𝗲 𝗶𝘀 𝗮𝗻𝗻𝗼𝘆𝗶𝗻𝗴 𝘆𝗼𝘂 𝘁𝗵𝗲𝘀𝗲 𝗱𝗮𝘆𝘀 𝘁𝗵𝗮𝘁 𝘆𝗼𝘂 𝘄𝗶𝘀𝗵 𝗵𝗮𝗱 𝗮 𝘀𝗶𝗺𝗽𝗹𝗲 𝗿𝗲𝘂𝘀𝗮𝗯𝗹𝗲 𝘀𝗼𝗹𝘂𝘁𝗶𝗼𝗻? 👀 #ReactNative #JavaScript #OpenSource #MobileDevelopment #npm

We're sleeping on the <dialog> element. 💡 After building countless modals with JavaScript libraries and CSS hacks, I finally gave the native HTML <dialog> element a serious try. My verdict: It's a game-changer that more developers should be using. Why <dialog> deserves your attention: -> Native accessibility - Built-in focus trapping, ESC closing, and screen reader support -> Simpler JavaScript - .showModal() and .close() vs managing z-index and event listeners -> Backdrop styling - Style the ::backdrop pseudo-element directly with CSS -> Lightweight - No dependencies, smaller bundle size The reality check: Browser support is now excellent (93% global). Polyfills exist for the rest. We're past the "waiting for support" phase. My prediction: In 2 years, <dialog> will be the standard way we build modals, with libraries becoming the exception rather than the rule. Am I crazy for thinking this? Have you used <dialog> in production? What's been your experience? 👇 #WebDevelopment #HTML #Frontend #JavaScript #Accessibility #WebStandards #Programming #WebDev #100Devs

Stop thinking JSX is HTML. 🛑 It looks like HTML, it acts like HTML, but under the hood? It’s pure JavaScript magic. 🪄 When you write <div>Hello</div>, React isn't actually creating a DOM node yet. It’s calling: React.createElement("div", null, "Hello"); The Journey from Code to Screen: 1️⃣ JSX: You write the code. 2️⃣ React.createElement: It turns into a plain JS object. 3️⃣ Virtual DOM: React builds a tree of these objects. 4️⃣ Reconciliation: React compares the old tree with the new one. 5️⃣ Real DOM: Only the changes are pushed to the browser. The Props Problem: Props are great for passing data, but they lead to the dreaded "Prop Drilling." This is when you pass data through 5 components just to reach the 6th one that actually needs it. The Fix? Don't make your middle components "delivery drivers." Use the Context API to teleport data directly to where it's needed. Keep your components clean and your DOM updates minimal. 💻✨ Thanks to Devendra Dhote Bhaiya and the Sheryians Coding School team for their guidance and support 🙏 Devendra Dhote Bhaiya Sheryians Coding School Ritik Rajput #ReactJS #JavaScript #WebDevelopment #Frontend #Coding #Programming #SoftwareEngineering #Tech #WebDev #ComputerScience #JavaScriptFrameworks #React19 #OpenSource #Productivity #EngineeringManagement #TechCommunity #ModernWeb

Just published the second video of my JavaScript Full Course where I break down some of the most important real-world JavaScript concepts that every developer MUST know 👇 In this lesson, you’ll learn: ✅ DOM Manipulation (Real UI control) ✅ Event Handling (User interaction logic) ✅ Asynchronous JavaScript (How JS works behind the scenes) ✅ Promises & Async/Await (Modern coding patterns) ✅ Fetch API (Working with real APIs) ✅ setTimeout & setInterval (Time-based tasks) These topics are not just theory they are used daily in frontend development, React apps, dashboards, and production-level websites. If you're learning JavaScript seriously or preparing for developer jobs, this video will help you level up 💪 🎥 Watch here: https://lnkd.in/dz6B-Hfx Let me know in the comments: 👉 Which JavaScript topic do you find most confusing DOM or Async JS? #JavaScript #WebDevelopment #Programming #FrontendDeveloper #CodingLife #LearnToCode #TechSkills #DeveloperCommunity #JavaScriptCourse

🚀 Starting From Basics Again Before jumping into frameworks like React, I decided to strengthen my core , So I started revising HTML, CSS & JavaScript from scratch. Today, I built a simple Snake Game using pure HTML, CSS, and JavaScript , no libraries, no frameworks. While building this, I focused on: Proper HTML structure Clean and reusable CSS DOM manipulation Game logic implementation High score storage using localStorage What I learned from this: ✔ Fundamentals matter more than frameworks ✔ Logic building is more important than styling ✔ Clean and structured code makes debugging easier ✔ JavaScript feels powerful when you truly understand the DOM Deployed it using GitHub Pages 🔗 Live Demo: https://lnkd.in/dgCyVb4r 💻 GitHub Repository: https://lnkd.in/d3AtuqtF This is just the beginning. Next Moving towards React ⚛️ #WebDevelopment #JavaScript #HTML #CSS #React #LearningInPublic