🧠 In React, what happens with this code? 👇 If userRef.current changes later, will the effect run again? 🤔 🗳️ Options 1️⃣ Yes, the effect will run again when userRef.current changes 2️⃣ No, it will only run once on mount 3️⃣ React will show a warning about using userRef.current in dependencies 4️⃣ It depends on how the ref is used ✅ Correct answer: 2 — the effect won’t re-run because React doesn’t track .current changes automatically. 💡 Why? Refs (useRef) are mutable containers that don’t trigger re-renders when they change. React does not track .current updates for dependency comparison — so adding userRef.current to the dependency array won’t behave as you might expect. #react #frontend #programming
Sushil Kumar’s Post
More Relevant Posts
-
What happens in this React code? 👇 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁(() => { 𝗰𝗼𝗻𝘀𝗼𝗹𝗲.𝗹𝗼𝗴('𝗘𝗳𝗳𝗲𝗰𝘁 𝗿𝗮𝗻'); }, [ { 𝗮: 𝟭 } ]); 🗳️ Options: 1️⃣ Runs only once 2️⃣ Runs every render 3️⃣ React warns 4️⃣ Depends on object structure ✅ Correct Answer: 2️⃣ Runs every render 💡 Why: Each render creates a new object reference for { a: 1 }, so React thinks the dependency changed every time. So what's the fix? 🤔 ✅ Memoize the object or move it outside render. Check the carousel below for example #react #frontend #programming #interviewprep
-
Thales Domingues Tip 💡- ⚛️ React 19 brings the biggest paradigm shift since Hooks. Here are 5 features that will change how you code: ✨ Actions - Say goodbye to manual loading/error states 🎯 use() Hook - Read promises, context, and more in render ⚡ useOptimistic - Instant UI feedback, built-in 🖥️ Server Components - Stable and production-ready 📄 Document Metadata - No more helmet libraries needed The before/after comparison says it all. Less boilerplate, more productivity. Are you planning to upgrade? Drop your thoughts below. 👇 #ReactJS #WebDev #Programming #TechNews
-
-
Simplify Promise Handling in Vite with Eager Loading ⚙️ Join Steve Kinney to master Vite, the fast, zero-config build tool for modern web projects. Learn bundling, asset optimization, hot module reloading, plugins, and integration with React and Svelte to streamline development and build scalable, high-performance apps. https://lnkd.in/ejdQNjeu #Vite #WebDev #FrontendDev #Developers #Coding #JavaScript #TypeScript #DevLife #Programming #TechTips #WebDev #Programming #Coding #LearnToCode
-
🚀 Boost React Performance with useCallback! Tired of unnecessary re-renders slowing down your React components? Meet useCallback – your secret weapon for optimal performance! 🎯 Why useCallback matters: const handleClick = useCallback(() => { console.log('Button clicked!'); }, []); ✨ Key Benefits: • Memoizes functions to prevent recreation on every render • Reduces unnecessary child component re-renders • Optimizes performance in callback-heavy applications • Keeps your components lean and efficient 💪 Perfect for: ✅ Callbacks passed to optimized child components ✅ Dependency arrays in other hooks ✅ Performance-critical applications Pro Tip: Use useCallback strategically – it's not needed for every function, but can be a game-changer for expensive operations! #ReactJS #WebDevelopment #Frontend #JavaScript #PerformanceOptimization #CodingTips #WebDev #Programming #SoftwareEngineering #CleanCode #TechTips
-
Every frontend dev remembers the "div-ficult" struggle of centering an element. The Old Way: margin: 0 auto; ➡️ Only horizontal! 😩 The Flexbox Cheat Code: display: flex; justify-content: center; align-items: center; ➡️ Two-way perfection! The Grid Genius: display: grid; place-items: center; ➡️ One line, done! Stop the struggle! Flexbox and Grid made centering easy. Master these techniques and save your sanity! 💾 #frontend #programming #webdev
-
When someone asks me to manage their array of problems, I say "No problem, I've got a method for that!" 😉 Whether you're building a new app or just managing a list of tasks, you'll need these JavaScript Array Methods! The map() method is a superpower—it creates a new array by running a function on every item in the original array. Use filter() to create a new array with only the items that pass a specific test. reduce() takes your array down to a single output value, like calculating a total sum. forEach() is simple: it runs a function once for each element in the array. slice() gives you a shallow copy of a portion of the array—it doesn't change the original. concat() is how you join one array with other items or arrays to make a new, bigger array. These methods help you work with arrays easily and efficiently! Double-tap if you found this helpful! #JavaScript #WebDevelopment #CodingLife #Programming #SoftwareDevelopment #JSTips #ArrayMethods #CodeSnippets #FrontendDevelopment #LearnToCode
-
Diving DEEP into the Node.js event loop! ⏱️ Ever wondered how Node.js handles concurrency with a single thread? Understanding the event loop is CRUCIAL for writing efficient and scalable Node.js applications. It's where the MAGIC happens! Here are 3 KEY takeaways: 💡 Understand the difference between blocking and non-blocking I/O. Blocking I/O HALTS the event loop! ⚙️ Use `setImmediate` for callbacks that should execute AFTER each event loop iteration. `setTimeout(0)` can behave differently. 🧵 Tune your `UV_THREADPOOL_SIZE` for CPU-bound tasks. It defaults to 4, but you might need MORE! What's YOUR favorite Node.js optimization trick? Share below! 👇 #Nodejs #Javascript #EventLoop #Backend #Programming #Async #Concurrency
-
In React, changing the prop value itself doesn't rerender the component. Yes, it's a myth that the component will rerender when the prop value is changed. A prop value change will rerender components if that prop is associated with a state/context. When a state changes, the main component will rerender and, as a result, will also rerender the children. In the case of memoization, the prop values will be compared, and if changed, then they will trigger the rerendering of child components. If no state is associated, the parent component doesn't rerender and the prop value changes; React won't detect that, and the component will not rerender. Let's define a local variable and pass that as a prop. If you change that value, the child component won't rerender because the parent component didn't rerender and therefore has no effect on the child component. So, if the prop is not associated with a state or context, on changing its value, there is no rerender. Have you ever noticed this behavior? #react #javascript #frontend #programming
-
A React component is a function which returns JSX. When you use that component inside another component, the React creates an element. <Ali /> refers to element of Ali component. So, when React sees <Ali /> it gets it's JSX and internally call React.createElement with details of Ali component such as props, key and children. React.createElement creates an object which is basically description of what needs to be rendered. Then React adds that to the virtual DOM and gets added to real DOM. Tried my best to simplify this concept. Thinking of writing a blog on it. You can subscribe to my newsletter to read in-depth. link in comment. #react #javascript #frontend #programming
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development
Either wrong, or wrong exemple. Mutating directly userRef.current won't trigger useEffect. But the same as mutating a state won't trigger a re-render without a setState. Your exemple is wrong, because if the .current value is changed AND for another reason, the component is re-rendered, useEffect WILL compare previous and actual version of .current AND be triggered. If you don't want this behavior, userRef should be in dependency array, because its reference is stable among re-renders. (and because it's stable, you can exclude for the dependency array) Simple exemple for what i'm saying: A state with a counter, you assign the counter value to ref.current. A userEffect with ref.current as dependency array which simple do a console.log, and a button which increment the counter. useEffect is triggered at each re-render. https://codepen.io/hichtibidi/pen/myVYLLR?editors=1111 So correct answers are more 3 and 4 than 2 :)