Why does this log 1, not 2? Most people say: “Because React batches updates.” That’s only half the story. The real reason? Stale closures. Inside this render, count is 0. Both setCount(count + 1) calls use that same captured value. So React receives: 1) set to 1 2) set to 1 Not: 1) set to 1 2) set to 2 This question isn’t about memorizing hooks. It tests whether you understand how React renders create new function scopes — and how state updates are queued. #react #javascript #frontend
Siarhei Fedasenka’s Post
More Relevant Posts
-
🚀Render Props in React! 🚀 Instead of hardcoding what a component renders, you pass a function as a prop and let the component call it. Simple idea. Powerful results. 💡 So, that's why I implemented a short example to show you how some component passes between a parent and another child component. Here is a link for it: https://lnkd.in/d5NqDjEK One component. Endless possibilities. #React #Frontend #WebDevelopment #JavaScript
To view or add a comment, sign in
-
⚡ Lazy Loading in React — a quick visual breakdown → Before: 3.7 MB loaded on page open → After: 405 KB loaded on page open → Result: 4.3× faster First Contentful Paint 🚀 All of this with just 2 lines of code using React.lazy() + Suspense. This is a small but often underestimated concept that can significantly improve performance. Swipe to see the network panel & Lighthouse scores 👉 #ReactJS #WebPerformance #Frontend #JavaScript #React
To view or add a comment, sign in
-
Today I want to share an amazing React feature that many developers don't know about. It allows you to create components using a class instead of a function. This gives you access to powerful tools like lifecycle methods, this.state, and this.setState(). 2026 is the new 2016 🤣 #React #JavaScript #Frontend #WebDevelopment #SoftwareEngineering
To view or add a comment, sign in
-
-
Day 82 / 365 👨💻 Started understanding React state. 🧠 Problem that useState solves ⚙️ How useState works step by step 🔄 Why re-rendering happens ⏳ Why state updates aren’t immediate 🔁 Updater function vs direct value #365DaysOfCode #React #JavaScript #Frontend
To view or add a comment, sign in
-
If this snippet makes you pause 🤔 - what gets logged in the console, then it’s a sign to revisit the core fundamentals of React Hooks. This isn’t about memorizing hooks, It’s about truly understanding: • How closures affect useCallback • And why dependency arrays can quietly break your logic React isn’t hard but misunderstanding these basics is where most bugs come from. Take a minute. Predict the output and let me know in the comments. That’s how you level up 🚀 #React #Frontend #JavaScript #WebDevelopment #SoftwareEngineering #ReactHooks #LearnInPublic
To view or add a comment, sign in
-
-
If this snippet makes you pause 🤔 - what gets logged in the console, then it’s a sign to revisit the core fundamentals of React Hooks. This isn’t about memorizing hooks, It’s about truly understanding: • How closures affect useCallback • And why dependency arrays can quietly break your logic React isn’t hard but misunderstanding these basics is where most bugs come from. Take a minute. Predict the output and let me know in the comments. That’s how you level up 🚀 #React #Frontend #JavaScript #WebDevelopment #SoftwareEngineering #ReactHooks #LearnInPublic
To view or add a comment, sign in
-
-
🔒 React sanitizes user input automatically. But one line can break everything. Normal rendering? You're safe. <p>{userInput}</p> // React escapes this. Always . The moment you do this — you're on your own: dangerouslySetInnerHTML={{ __html: userInput }} The word "dangerous" is literally in the name. React is warning you. Always pair it with DOMPurify. And never trust user-controlled URLs — a javascript: href executes on click. React is secure by default. Just don't fight against it. Ever used dangerouslySetInnerHTML in production? 👇 #ReactJS #WebSecurity #Frontend #JavaScript
To view or add a comment, sign in
-
-
I just deleted 30 lines of code from a React component. no refactor. no library. just one hook in React 19. it's called use() — and it changes how you handle async data and context in your components. most devs haven't heard of it yet. swipe through ↓ broke it down simply what's the most boilerplate you've deleted in a single React upgrade? 👇 #react #react19 #javascript #webdev #frontend
To view or add a comment, sign in
-
⚛️ React 19.2 : Smarter State, Less Hassle In this Q&A, Faris Aziz explains how React 19.2 enables background rendering—so you can keep component state even when it’s not visible, simplifying state management. ✨ What you’ll learn: • Keep state without complex workarounds • Render components in the background • Reduce lifecycle & cleanup complexity Don’t miss this if you want to stay ahead with modern React 👀 👉 Explore the full program: https://lnkd.in/dfSdRXcX #React #JavaScript #WebDevelopment #Frontend #TechTalk #iJSConf
To view or add a comment, sign in
-
💡 𝗧𝗶𝗽 𝗼𝗳 𝘁𝗵𝗲 𝗗𝗮𝘆 — 𝗥𝗲𝗮𝗰𝘁 𝗗𝗶𝗱 𝘆𝗼𝘂 𝗸𝗻𝗼𝘄? In React, 𝗳𝗿𝗮𝗴𝗺𝗲𝗻𝘁𝘀 "(<>...</>)" 𝗹𝗲𝘁 𝘆𝗼𝘂 𝗴𝗿𝗼𝘂𝗽 𝗲𝗹𝗲𝗺𝗲𝗻𝘁𝘀 𝘄𝗶𝘁𝗵𝗼𝘂𝘁 𝗮𝗱𝗱𝗶𝗻𝗴 𝗲𝘅𝘁𝗿𝗮 𝗻𝗼𝗱𝗲𝘀 𝘁𝗼 𝘁𝗵𝗲 𝗗𝗢𝗠. Instead of wrapping elements in unnecessary "<div>" tags, fragments keep your markup 𝗰𝗹𝗲𝗮𝗻𝗲𝗿 𝗮𝗻𝗱 𝗹𝗶𝗴𝗵𝘁𝗲𝗿. 🔧 𝗘𝘅𝗮𝗺𝗽𝗹𝗲 𝘂𝘀𝗲 𝗰𝗮𝘀𝗲𝘀: - Returning multiple elements from a component - Avoiding unnecessary DOM nesting - Keeping layouts easier to style Cleaner DOM = simpler layouts and better performance. #React #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #CodingTips #CleanCode #FullstackDeveloper
To view or add a comment, sign in
-
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