🔄 Props vs State – One of the Most Confusing React Concepts Almost every React beginner asks this: “When should I use props and when state?” Let’s simplify it 👇 🔹 Props Data passed from parent to child ✔ Read-only ✔ Makes components reusable ✔ Controlled by parent <UserCard name="Gurpreet" /> 🔹 State Data managed inside the component ✔ Can change over time ✔ Triggers re-render ✔ Used for UI behavior const [isOpen, setIsOpen] = useState(false); 💡 Real-World Example 🏠 Parent = House owner (Props giver) 👶 Child = Room (Receives props) 🔌 State = Switch inside the room 👉 Room can use the switch (state) 👉 Owner decides what furniture comes in (props) 📌 Rule of Thumb ✔ Data coming from outside → Props ✔ Data changing inside → State 📸 Daily React tips & reels: 👉 https://lnkd.in/g7QgUPWX 💬 Which concept confused you more when you started React? 👍 Like | 🔁 Repost | 💭 Comment #React #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactBasics #DeveloperLife

So you wanna build a drag-and-drop tree view in React - that's a great idea. It's like creating a digital LEGO structure, where you can move pieces around to visualize your data in a more intuitive way. He-tree-react is a powerful tool that can help you achieve this. To get started, you'll need a few things: Node.js version 14.0 or higher, a package manager like npm or yarn, and a React project set up. It's also helpful to have a basic understanding of React hooks and JavaScript. You can install he-tree-react using npm, yarn, or pnpm - just run the command and you're good to go. It's easy. He-tree-react provides a simple API for creating interactive tree structures, and you can enable drag-and-drop functionality by setting a couple of props to true. Think of it like building a tree with branches that you can drag and drop to reorder or move around. Key concepts to keep in mind: each node has an id, text, and optional children array - it's like a family tree, where each person has a name, age, and kids. And when you drag and drop nodes, you're essentially moving them to a new branch or reordering them. The library also provides features like custom node rendering, drag constraints, search and filtering, and context menus - it's like having a toolbox full of options to customize your tree view. Check out the official repository for more information: https://lnkd.in/gjCEeKmt Source: https://lnkd.in/gH4Xksh2 #React #DragAndDrop #TreeViews #JavaScript #WebDevelopment

I finally ditched the templates. Here’s my new portfolio built from scratch with Next.js 14. I’ve spent the last few weeks building my personal corner on the internet. My goal was simple: build a site that feels less like a generic "tech startup" and more like an "editorial",I didn't just want a static page; I wanted a playground to master the modern React ecosystem. The Stack: Framework: Next.js 14 (App Router) Styling: Tailwind CSS (custom Serif typography system) Content: MDX (I built a custom engine to parse markdown files for my blog) Language: TypeScript The Challenge: The hardest part wasn't the layout—it was the Dark Mode. Getting the theme switch to persist without that annoying "flicker" on refresh (hydration mismatch) was a tricky problem to solve. I ended up implementing a custom provider to handle the state sync between the server and client. Key Features: Timeline Resume: A digital, interactive version of my experience. Traffic Light UI: A subtle nod to macOS window controls. Lighthouse Score: 98/100 on performance. It’s live on Vercel now. I’d genuinely appreciate a code review or feedback on the UI! Live Demo: https://lnkd.in/gJZqxv_Z Source Code: https://lnkd.in/gpajXu-s #NextJS #WebDevelopment #TypeScript #TailwindCSS #StudentDeveloper #BuildInPublic #FrontendEngineering

React Folder Structure Explained – Something I Wish I Knew Earlier 👉 “What does each folder actually do?” Folders like assets, components, hooks, pages, redux felt overwhelming at first. I used them without fully understanding their purpose. So I created this simple breakdown to help beginners like me understand: 📁 assets – Images, fonts, and static files 🧩 components – Reusable UI components 📊 data – Static or structured data 🪝 hooks – Custom React hooks 📄 pages – Main website pages 🛒 redux – State management logic 🛠 utils – Helper & utility functions 📐 layout – Page structure (Header, Footer, Sidebar) ⚛ App.jsx – Root component 🎨 index.css – Global styles 🚀 main.jsx – Application entry point If you’re starting with React.js, save this post — it will clear a lot of confusion 💡 💬 Comment “React” if you want more beginner-friendly content like this. #ReactJS #WebDevelopment #Frontend #JavaScript #ReactBeginner #LearningToCode #MERN

React 19 lets you delete useEffect for DOM logic. 👇 👇 For years, integrating third-party DOM libraries (like GSAP, ResizeObserver, or vanilla JS animations) required a specific dance: 1. Create a useRef. 2. Create a useEffect. 3. Check if (ref.current). 4. Return a cleanup function. It separated the "Element" from the "Logic" that controlled it. React 19 introduces Ref Callback Cleanup. ❌ The Old Way: You had to synchronize a mutable ref with an effect. It was verbose and prone to "stale closure" bugs if you forgot dependencies. ✅ The Modern Way: Pass a function to the ref prop. React runs this function when the node mounts. If you return a function, React will automatically run it when the node unmounts. Why this is cleaner: 📉 Less Code: Logic is co-located with the element it affects. 🧠 No Hooks: You don't need useRef or useEffect for simple DOM integrations. ⚡ Safe: Handles node mounting/unmounting lifecycles perfectly. Note: This is perfect for things like ResizeObserver, IntersectionObserver, or auto-focus logic. #ReactJS #React19 #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #ReactHooks #Hooks #ReactTips #FrontrendDeveloper #DevloperTips

You don’t really “know React” until you can build the basics Buttons. Inputs. Selects. Dropdowns. We use them every day — yet many developers treat them as black boxes from a UI library. Knowing how to build these components from scratch matters more than it looks: - You understand accessibility (keyboard navigation, focus states, ARIA) - You design clear APIs (props, variants, controlled vs uncontrolled) - You handle edge cases (loading, disabled, error, async behavior) - You avoid over-engineering and leaky abstractions - You customize behavior instead of fighting a library UI libraries are great. They save time. They reduce bugs. But when something breaks, needs customization, or doesn’t exist yet, fundamentals are what save you. If you can confidently build a button, you can build a design system. If you can build a dropdown, you understand state, events, and composition. Frameworks change. Libraries come and go. Well-built components are forever. #React #Frontend #WebDevelopment #JavaScript #UI #DesignSystems

🧠 Is setState 𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 or 𝗮𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 in React? Short answer 👉 setState is 𝗮𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 — by design. React doesn’t update state immediately. Instead, it schedules state updates and batches multiple updates together to avoid unnecessary re-renders and improve performance. 𝘌𝘹𝘢𝘮𝘱𝘭𝘦:– setCount(count + 1); console.log(count); 𝘖𝘶𝘵𝘱𝘶𝘵:- 0 𝗪𝗵𝘆? Because setState does not update the value instantly — the current render still holds the old state. 🔁 𝗕𝗮𝘁𝗰𝗵𝗶𝗻𝗴 𝗶𝗻 𝗮𝗰𝘁𝗶𝗼𝗻 setCount(count + 1); setCount(count + 1); 𝗥𝗲𝘀𝘂𝗹𝘁 👉 1 (not 2) Both updates read the same stale state, and React batches them into a single render. ✅ The correct pattern (when state depends on previous state) setCount(prev => prev + 1); setCount(prev => prev + 1); 𝗥𝗲𝘀𝘂𝗹𝘁: 2 This works because React provides the latest queued state to each update. 🧠 𝗞𝗲𝘆 𝘁𝗮𝗸𝗲𝗮𝘄𝗮𝘆 setState doesn’t change state immediately. It requests a state change — React decides when to apply it. This behavior enables better performance, smoother UI, and concurrent rendering. 👀 𝗕𝘂𝘁 𝗵𝗲𝗿𝗲’𝘀 𝘁𝗵𝗲 𝘁𝘄𝗶𝘀𝘁... 👉 setState can be synchronous in React — but only in very specific situations and for a specific purpose. I’ll cover when, why, and whether you should ever use it in my next post. Stay tuned 🚀 #ReactJS #JavaScript #Frontend #WebDevelopment #ReactHooks #Performance #SoftwareEngineering

🧠 How Browsers Actually Work (What Every Frontend Dev Should Know) When you hit Enter after typing a URL, the browser doesn’t “open a page”… it builds one from scratch. 🔹 Step 1: Finding the Server (DNS) Browser converts the domain into an IP address so it knows where to talk. 🔹 Step 2: Fetching Resources An HTTP request is sent → server responds with HTML, CSS, JS, fonts, images. 🔹 Step 3: Building the Page HTML → DOM CSS → CSSOM DOM + CSSOM → Render Tree Then comes Layout (sizes & positions) and Paint (pixels on screen). 🔹 Step 4: JavaScript Takes Control JS runs in the browser engine, can block rendering, manipulate the DOM, attach events, and call APIs. 🔹 Step 5: The Event Loop Handles async tasks (callbacks, promises, timers) so heavy JS doesn’t freeze the UI. 💡 Why this matters If you understand this flow, you automatically write: Faster UIs Fewer re-renders Better loading strategies Cleaner React / Next.js apps 👉 Browsers are rendering engines + JS runtimes + networking layers, not just viewers. If frontend is your craft—browser internals are your foundation 🚀 #FrontendEngineering #JavaScript #WebPerformance #ReactJS #NextJS

❓ What is useRef in React? useRef is a React hook that creates a mutable object whose .current property persists across component renders. const ref = useRef(initialValue); Unlike state, updating a ref does not trigger a re-render. ❓ Why is useRef important? useRef allows you to store values that are not part of the rendering lifecycle. This helps maintain performance and keeps components free from unnecessary re-renders. ✔ Persists across renders ✔ Updates synchronously ✔ Does not trigger re-render ❓ When should you use useRef? 📌 Accessing DOM elements Used for focus management, scrolling, or text selection. inputRef.current.focus(); 📌 Persisting values across renders Ideal for timers, intervals, counters, and external library instances. 📌 Storing previous values Helpful for comparing current and previous state or props. 📌 Preventing unnecessary re-renders Best for frequently changing values that do not impact the UI. ❓ When should you NOT use useRef? 🚫 When changes must be reflected in the UI 🚫 When re-rendering is required after updates In these cases, useState is the better choice. 🎯 Key Takeaway Use useRef when you need to persist or update values without affecting the component’s render cycle. It complements useState and helps write more efficient React components. #React #JavaScript #ReactHooks #FrontendDevelopment #WebDevelopment

🚀 Day 8 Not Just Motivation — Real Concepts to Build Strong Technical Understanding (Part 8) Why does JavaScript remember variables even after a function finishes? The answer is Closure. Let’s understand this using a real-world example from React: useState. A simplified mental model of useState (conceptual) function useState(initialValue) { let state = initialValue; function setState(newValue) { state = newValue; render(); // re-render component } return [state, setState]; } Here, setState is a closure. It remembers state even after useState finishes execution. Example: Counter Component function Counter() { const [count, setCount] = React.useState(0); return ( <button onClick={() => setCount(count + 1)}> Count: {count} </button> ); } Every render is a new function call. So how does React remember count? Let’s go step by step. Render 1 – Initial Mount 1. React calls the component: Counter(). 2. useState(0) runs and creates a state slot outside the function (heap/fiber). 3. count is set to 0 and setCount is returned as a closure. 4. JSX is rendered and UI shows Count: 0. User Clicks the Button 1. Browser triggers a click event. 2. React handles the event via its synthetic event system. 3. setCount(count + 1) is called. 4. React updates internal state and schedules a re-render. Render 2 – After State Update 1. Counter() runs again. 2. Local variables are recreated, but state is preserved. 3. useState does not reinitialize; it reads existing state from memory. 4. count is now 1 and UI updates accordingly. Final Takeaway The component function re-runs on every render, but state survives because React stores it outside the function. setState works because it is a closure pointing to that preserved state. Closures are the reason useState works. #javascript #closure #reactjs #reacthooks #frontend #webdevelopment