React useRef: Stores Value Silently

🚀 DAY 40 OF POSTING REACT CONTENT 🎛️ CONTROLLED vs UNCONTROLLED COMPONENTS 🤔 🧠 Imagine This You are typing your name in a form. 👉 Case 1: Every letter you type is saved instantly 👉 Case 2: You type freely… and value is checked only after you finish 💡 In React 👉 Controlled Component React stores value on every keystroke (using state) 👉 Uncontrolled Component Value stays inside input, React reads it only when needed (using ref) ✨ One Line Understanding Controlled → React always knows the value Uncontrolled → React checks value when needed #ReactJS #ReactForms #ControlledComponents #FrontendDevelopment #JavaScript #LearnInPublic #CodingJourney #WebDevelopment

Day 34 of Posting React Content 📦 What are Props in React? 🧠 Imagine This Your friend asks you to deliver a gift. The gift box may contain: 🎁 a book 🎧 headphones 🍫 chocolates The box is the same, but the content inside changes. 💡 In React A component is like the box. Props are the data we send inside it. The same component can show different information depending on the props it receives. Props can carry data like text, numbers, images, or functions. ✨ One Line Understanding Component → reusable box Props → data inside the box #ReactJS #ReactProps #FrontendDevelopment #JavaScript #LearnInPublic #CodingJourney #WebDevelopment

🎯 useEffect vs useLayoutEffect: finally made it clear While learning React hooks, I was confused between useEffect and useLayoutEffect. This visual helped me understand the real difference 👇 👉 useLayoutEffect 1. Runs synchronously 2. Executes before the browser paints the UI 3. Useful when you need to measure or update the DOM before it becomes visible 👉 useEffect 1. Runs asynchronously 2. Executes after the UI is painted 3. Best for API calls, timers, subscriptions, etc. 💡 Key takeaway: 1. useLayoutEffect → blocks paint (use carefully) 2. useEffect → doesn’t block UI (preferred in most cases) Also learned how cleanup (destroy/unmount) works to avoid memory leaks especially with intervals and API calls. Small concepts like this make a big difference in writing better React code #ReactJS #WebDevelopment #Frontend #JavaScript #LearningInPublic #ReactHooks

React Performance: Slow vs Fast We often write components that “work” — but are they optimized? 🔴 Slow Approach - Recalculates on every render - Creates new functions repeatedly - No memoization Result: ~2.5s render time 🟢 Fast Approach - Uses "useMemo" for expensive calculations - Prevents unnecessary re-renders - Cleaner & optimized logic Result: ~0.2s render time 💡 Key Takeaway: Small optimizations like memoization can make a HUGE difference in performance and user experience. Write smarter, not just working code. #ReactJS #FrontendDevelopment #WebPerformance #JavaScript #CodingTips #DevLife

Today something interesting happened while I was building a Custom Date Picker in NextJS.🗓 I have used useRef many times before, but honestly I was mostly using it without fully understanding the concept behind it But today… it finally clicked.💫 While implementing the feature, I realized that: • useRef creates a mutable object • The value is stored inside .current • The value persists between renders • Updating .current does not trigger a re-render • It can also be used to directly access DOM elements The most interesting part for me was understanding why React doesn't re-render when current changes. Sometimes you don’t truly understand a concept until you build something real with it. Small learning today, but a very satisfying one. 💫 What was the React concept that took you the longest to understand❓️ #React #JavaScript #FrontendDevelopment #ReactHooks #BuildInPublic #LearningJourney

Why can’t we create a state variable outside the component function? const [count, setCount] = React.useState(0); ❌ function Counter() { return <div>{count}</div>; } function Counter() { const [count, setCount] = React.useState(0); ✅ return <div>{count}</div>; } Why? Because Hooks rely on the component’s render cycle. When React renders a component, it: 1️⃣ Calls the component function 2️⃣ Tracks the order of Hooks 3️⃣ Stores state internally based on that order Hooks are tightly connected to the component’s lifecycle. If you declare state outside: ❌ There is no render context ❌ No component lifecycle ❌ React can’t track it #ReactJS #ReactHooks #ReactInternals #FrontendDevelopment #JavaScript #SoftwareEngineering #WebDevelopment #LearningInPublic #ReactInterview #FrontendEngineer #TechInterview

Day 32 of Posting React Content 🧠 What is useCallback? 🎓 Imagine This You enter your college every day. The security guard checks your ID card. You don't explain who you are every time. You just show the same ID card. 💡 In React Sometimes a parent component sends a function to a child component. When React renders again, that function gets created again and again. useCallback prevents this. It keeps the same function and reuses it until something changes. ✨ One Line Understanding Normal React → function recreated every render useCallback → same function reused #ReactJS #ReactHooks #useCallback #FrontendDevelopment #JavaScript #LearnInPublic #CodingJourney #WebDevelopment

🎯 useEffect vs useLayoutEffect — finally clicked for me! While diving into React hooks, I kept getting confused between useEffect and useLayoutEffect… until this made it super clear 👇 👉 useLayoutEffect • Runs synchronously • Fires before the browser paints the UI • Great for measuring or updating the DOM before it’s visible 👉 useEffect • Runs asynchronously • Fires after the UI is painted • Ideal for API calls, timers, and subscriptions 💡 Key takeaway: • useLayoutEffect → blocks rendering (use sparingly) • useEffect → non-blocking (preferred in most cases) Also got a better understanding of cleanup functions (destroy/unmount) to prevent memory leaks—especially with intervals and API calls. It’s amazing how mastering small concepts can level up your React skills 🚀 #ReactJS #WebDevelopment #Frontend #JavaScript #LearningInPublic #ReactHooks #SoftwareEngineer #Angular

Lately, I've been diving deeper into React to understand how it actually works under the hood. Not just building components, but exploring things like: • How React handles re-renders • State management patterns • Performance optimizations • The internal logic behind hooks • How React's rendering process works It’s easy to use React, but truly understanding why things work the way they do is where real learning begins. My goal right now is simple: Go beyond tutorials and build a stronger foundation. 🚀 #reactjs #webdevelopment #javascript #frontend #developerjourney

For a long time I tried to stop React from re-rendering. memo, useCallback, anything that could reduce renders. Then I learned something simple: Re-renders cannot be the real problem. React is actually very fast at rendering. The real issue is doing heavy work during render. Example: const sortedUsers = users.sort((a, b) => a.age - b.age) This runs on every render. Better: const sortedUsers = useMemo( () => users.slice().sort((a, b) => a.age - b.age), [users] ) The goal is no fewer renders. It’s less work per render. That small shift changed how I think about React performance. When did React finally “click” for you? #reactjs #javascript #frontend