Optimize React with Stable Function References

Spent 2 days debugging why a dropdown caused 47 re-renders. Turns out I didn't actually understand how React renders. Here's what I learned (Day 2 of my frontend system design series): Most devs think render = DOM update. It doesn't. React rendering is just calling your component function. DOM updates only happen if something actually changed. What triggers a re-render: → State changes (useState / useReducer) → Parent re-renders (children always follow) → Context value updates (all consumers re-render) The fix isn't always React.memo. It's understanding WHY the render happened first. Open the React Profiler. Record. Interact. Stop. It shows exactly which components were rendered and how long each took. Found my bug in 3 minutes. Building in public as I go through GreatFrontend's curriculum — follow along if you're leveling up too. #ReactJS #Frontend #WebDev #JavaScript #SystemDesign

Monday – React Tip 💙 A React mistake that silently causes unnecessary re-renders. Passing objects directly as props. Example: const filters = { status: “active” } <Component filters={filters} /> Looks fine, right? But if this object is created inside the component, React sees a new reference on every render. That means even memoized components can re-render. Better pattern: Use useMemo for stable references when needed. const filters = useMemo(() => ({ status: “active” }), []) Why this matters: React compares references, not values. Small patterns like this make a huge difference in large applications. Advanced React isn’t about more hooks. It’s about controlling rendering behavior. See you tomorrow for JavaScript Concept Tuesday 👀 #ReactJS #FrontendDevelopment #WebPerformance #LearningInPublic

Something I ran into while working with React was a component re-rendering again and again even though nothing on the screen seemed to change. At first it’s confusing. The UI looks perfectly fine, but the component keeps rendering in the background. When this happens, the first thing I usually do is add a small console.log("component rendered") inside the component. It’s a very simple trick, but it immediately tells you how often React is actually re-rendering. Then I start checking what might be triggering it. Sometimes it’s a state change happening higher up in the component tree. When the parent re-renders, the child components re-render too, even if their props didn’t really change. Other times the issue comes from passing new objects or functions as props every time the parent renders. React sees them as new values and triggers another render. In cases like that, tools like React.memo, useMemo, or useCallback can help stabilize things and avoid unnecessary work. Another thing that really helps is the React DevTools Profiler. It shows which components are rendering and why, which makes debugging much easier. These kinds of small observations taught me that React performance is often not about big optimizations, but about understanding why something is rendering in the first place. #reactjs #javascript #frontenddevelopment #webdevelopment #softwareengineering #reactdevelopers #devcommunity #learninginpublic

🚀 useState vs useEffect: 👇 Here's the clear difference between these two Hooks of the Reactjs : 1️⃣ useState :- 🔹 Manages what your component remembers (local UI state) 🔹 Calling the setter → triggers re-render 🔹 Perfect for: counters, toggles, form inputs, theme switches 2️⃣ useEffect :- 🔹 Handles what happens after render (side effects) 🔹 Runs code like data fetching, subscriptions, DOM ops, timers 🔹 Dependency array controls when it re-runs (the real magic) 🔹 Cleanup function prevents memory leaks Quick mental model:- useState = "internal memory" useEffect = "talking to the outside world". #keepCoding #reactjsExploring #ReactjsThings #knowledgeBooster #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #useEffect

How React Remembers State Between Renders? When a component re-renders, the function runs again from top to bottom. So how does useState not reset every time? 🤔 function Counter() { const [count, setCount] = React.useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; } Every render: The function runs again and Variables are recreated. So why doesn’t count go back to 0? What Actually Happens Internally React stores state outside the component function. Behind the scenes: 1) Each component has a Fiber node 2) React keeps a linked list of Hooks 3) It tracks Hooks based on call order State is not stored in your function. It’s stored in React’s internal Fiber system. The function is just a way for React to describe UI. Understanding this makes Hooks feel much less magical. #ReactJS #ReactInternals #ReactHooks #FrontendDevelopment #SoftwareEngineering #JavaScript

⏱️ Built a Todo List with Timer using React Tried building a Todo List where each task has its own timer control — small idea but interesting state handling. Features: • Add todos dynamically • Start timer for each task individually • Reset timer per task • Delete tasks • Independent timer state for every item What I learned: • Managing multiple independent states in a list • Handling setInterval / timers safely in React • Avoiding memory leaks with proper cleanup • Structuring components for better state isolation • Updating UI efficiently without affecting other items This was a great exercise in understanding how to handle time-based state and side effects in React. Concept inspiration from learning resources by Akshay Saini 🚀 NamasteDev.com. Demo 👇 #ReactJS #FrontendDevelopment #JavaScript #BuildInPublic #WebDevelopment

🚀 Day 17/21 – React useRef Hook Today I explored the useRef hook in React and how it helps in directly interacting with DOM elements. 📚 Key concepts covered: 👉 useRef Hook – Used to create a reference that persists across renders without causing re-renders. 👉 Accessing DOM Elements – Learned how to directly access input fields or elements using ref. 👉 Avoiding Re-renders – Unlike state, updating a ref does not trigger a component re-render. 👉 Common Use Cases – • Focusing an input field • Storing previous values • Accessing DOM elements directly Example idea: const inputRef = useRef(); function handleFocus(){ inputRef.current.focus(); } 💡 Key Learning: useRef is useful when we need direct DOM access or want to store values without triggering re-renders. #Day17 #ReactJS #useRef #FrontendDevelopment #WebDevelopment #LearnInPublic #SheryiansCodingSchool

⚡ Hydration Is the Silent Performance Killer Too much client-side JS = slow interaction. 2026 frontend is: • Server-first • Streamed • Partially hydrated 🎯 Action Tip: Audit how much JS ships to the browser. Takeaway: Less JavaScript = More Speed. Stay tuned for more updates and insights on the latest trends in frontend development! #WebPerformance #Hydration #FrontendOptimization #UXEngineering

Unpopular opinion: useEffect is one of the most misused hooks in React. Most codebases I've worked in fall into the same traps: → Syncing state that could just be derived → Triggering logic that belongs in an event handler → Creating infinite re-render loops nobody wants to debug at 2am The real rule is simple: useEffect is for syncing with external systems — browser APIs, network requests, third-party widgets. That's it. If you're using it to watch one state variable and update another — that's a sign your state model needs a rethink, not another effect. Cleaner effects = easier to reason about = fewer production bugs. Spotted this on X via @alexdanilowicz — and it resonated #React #JavaScript #WebDevelopment #Frontend