🧩 Output Challenge #11 — The Batching Confusion This one catches even experienced devs in real interviews 😅 function App() { const [count, setCount] = React.useState(0); const logCount = () => { console.log("Before:", count); setCount(count + 1); setTimeout(() => console.log("After:", count), 0); }; return ( <div> <p>{count}</p> <button onClick={logCount}>Increment</button> </div> ); } 🧠 Question: You click the “Increment” button once. What gets printed in the console? And why? (Hint: think about closures, batching, and React’s async state updates) 💬 Drop your answer + reasoning in the comments 👇 This one sparks massive discussions 🔥 #React #JavaScript #Frontend #Nextjs #TypeScript #Hooks #useState #CleanCode #Performance #DeveloperCommunity #InterviewPreparation #WebDevelopment
"React useState async updates: What gets printed when you click the button?"
More Relevant Posts
-
React or Vue — both are great. But the “best” choice depends on your team, timeline, and product goals. We’ve simplified the decision for you in quick slides. Swipe through and discover what fits your next project best. #react #vue #reactjs #veujs #java #javascript #coding #app #tech #softwaredevelopment #techupdates #techstack #technology #appdevelopment #productdevelopment #datafortune
To view or add a comment, sign in
-
𝗥𝗲𝗮𝗰𝘁 𝗙𝗶𝗯𝗲𝗿🧵 is one of those interview questions that separates people who 𝘂𝘀𝗲 React from people who 𝘂𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱 React. Here’s the version you should know 👇 React Fiber (introduced in React 16) is the internal engine that controls how React updates the UI. Before Fiber, React rendered everything in one big blocking pass — no pausing, no prioritizing. Fine for small apps, terrible for real products. Fiber changed that by breaking rendering into tiny 𝘂𝗻𝗶𝘁𝘀 𝗼𝗳 𝘄𝗼𝗿𝗸 called fibers. That lets React: • pause work • resume later • prioritise urgent updates (like your typing) • keep the UI responsive even under heavy load This is the foundation for modern React features like Concurrent Rendering, Suspense, `useTransition`, etc. 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗮𝗻𝘀𝘄𝗲𝗿 𝘁𝗼 𝗸𝗲𝗲𝗽 𝗶𝗻 𝘆𝗼𝘂𝗿 𝗽𝗼𝗰𝗸𝗲𝘁: “React Fiber is React’s reconciliation engine. It turns rendering into small units of work so React can pause, resume, and prioritize updates instead of blocking the main thread. That’s why React apps stay smooth.” That’s not trivia. That’s architecture. #React #JavaScript #Frontend #ReactJS #WebDev #TechInterviews
To view or add a comment, sign in
-
👋 This is a great read! You really hit the nail on the head with your point about how fast the framework landscape is changing. It's easy to feel the "frontend fatigue" creeping in when a new library drops every other week! 😅 I particularly appreciated the insight on accessibility being a core responsibility, not an afterthought. That's a huge shift, and honestly, it makes us better developers. Curious to know: Which one tool or skill do you think will define a "modern" frontend developer in the next 1-2 years, beyond the typical React/Vue/Svelte? Is it more around tooling like Turborepo, or is it specialized knowledge like WebAssembly? Keep the awesome content coming! 💡 #FrontendDevelopment #WebDev #JavaScript #React #DeveloperLife #TechTrends
To view or add a comment, sign in
-
-
🚀 React.js & Next.js — Built Different, Yet Connected! Both share the same React DNA but serve different purposes. 💡 If you know React, you’re already halfway into mastering Next.js! Here’s what makes them alike 👇 ⚛️ JSX Syntax 🎨 Component-based UI 🧠 Hooks (useState, useEffect) 🌍 CSR support 🧱 Shared ecosystem 💪 TypeScript & Styling libraries 🧭 Routing & State Management options Perfect duo for building modern web apps 🔥 #ReactJS #NextJS #FrontendDevelopment #WebDevelopment #JavaScript #CodingLife #DevCommunity #LearnToCode #WebDev #ReactDevelopers #NextjsDevelopers #CodeNewbie #TechTrends #Programmers #UIDesign #DeveloperLife #JSX #ReactHooks #TypeScript #CleanCode
To view or add a comment, sign in
-
-
🚀 React Tip: Junior vs Pro Developers in useEffect ⚡ When working with React hooks — especially useEffect — even small mistakes can cause memory leaks or unnecessary API calls. 💡 Example: Many junior developers fetch data inside useEffect without handling component unmounts. This can result in updating state after the component is gone — a common source of bugs. A pro developer, however, prevents this issue by using an AbortController to cancel any pending requests when the component unmounts. 🧠 Junior vs Pro ❌ Junior: Fetches data directly inside useEffect ✅ Pro: Uses AbortController to safely abort fetch requests on cleanup By integrating AbortController, you ensure that no state updates happen after unmounting — keeping your app stable, efficient, and clean. ✨ Pro Tip: Always clean up your side effects in useEffect. This small step can make a huge difference in performance and reliability. 🛠️ Tech Stack: React.js | JavaScript | Frontend Optimization #ReactJS #ReactTips #ReactDeveloper #ReactHooks #useEffect #JavaScript #FrontendDevelopment #WebDevelopment #CleanCode #CodeQuality #microsoft
To view or add a comment, sign in
-
-
I’ve put together a curated collection of frequently asked React.js interview questions designed to help developers strengthen both their foundational understanding and advanced knowledge of React. Whether you’re revising core concepts like components, state, and props, or diving deeper into hooks, performance optimization, and real-world application design, this list will help you approach your next interview with clarity and confidence. Continuous learning and practice are key to staying ahead in frontend development — let’s keep growing together in the React ecosystem! ⚛️💼 #ReactJS #FrontendDevelopment #WebDevelopment #InterviewPreparation #JavaScript
To view or add a comment, sign in
-
✨How I Cracked a Next.js Developer Interview in Just 2 Days! so....I got an interview call for a Next.js Developer role. But here’s the twist — I was only confident in React.js. 😅 Instead of saying no, I decided to challenge myself. I had just 2 days — so I focused on understanding what truly makes Next.js different from React. Here’s how I approached it 👇 ✅ I realized that if you know React well, Next.js is not a big jump. All you need is clarity on these core concepts: ⚙️ SSR (Server-Side Rendering) vs CSR (Client-Side Rendering) 🗂️ File-based Routing 📦 API Routes in Next.js 🧠 getServerSideProps, getStaticProps, and getStaticPaths ⚡ App Router (app directory) and server components Once I understood these, everything started making sense — and I could confidently answer most questions. 2 days later... ✅ I cracked the interview and got selected as a Next.js Developer. 🎉 💡 Lesson learned: If you have a solid base in React, don’t fear Next.js. Just understand the “why” behind SSR, routing, and data fetching — and you’re already ahead of many developers. So if you’re preparing for your next opportunity — remember, sometimes 2 days of smart preparation can open big doors 🚪✨ #ReactJS #NextJS #WebDevelopment #FrontendDeveloper #CareerGrowth #LearningJourney #JavaScript #DeveloperStory
To view or add a comment, sign in
-
Choosing the right frontend framework can define how fast, scalable, and efficient your web application becomes. In this carousel, we’ve compared the most popular frameworks and libraries used in 2026 — including React, Angular, Vue, and Blazor. 💡 Inside you’ll learn: • Key differences between each framework • Learning curve and community support • Best use cases for each technology • Which one suits your project or career goals Whether you’re a student, developer, or corporate team — understanding these differences helps you make smarter tech decisions. 👉 Swipe through to explore the comparison and find your perfect frontend stack. #FrontendDevelopment #WebDevelopment #ReactJS #Angular #VueJS #Blazor #JavaScript #SkillDevelopment #CareerGrowth #OpportunityNearMe #ITEYONIKSERVICES
To view or add a comment, sign in
-
⚔️ Every React dev has fought this war at least once… Formik vs React Hook Form The battle that has divided frontend developers since… forever 😅 Here’s how it usually goes 👇 💬 Formik devs: “It’s simple, readable, and works fine for small forms.” 💬 React Hook Form devs: “One keystroke. Zero re-renders. That’s React Hook Form magic.” 🔥 React Hook Form ✅ Faster (uncontrolled inputs FTW) ✅ Cleaner syntax ✅ Works beautifully with MUI, Chakra, etc. ✅ Zero unnecessary re-renders ☄️ Formik ✅ Easy to start with ✅ Great for small forms, not for huge apps #React #WebDevelopment #ReactHookForm #Formik #Frontend #JavaScript #Nextjs #CleanCode
To view or add a comment, sign in
-
-
🧠 useState vs useReducer — How I Decide Which One to Use When I started working with React, I used useState for everything. It was simple, quick, and got the job done. But as the app grew, I found myself writing a lot of “state update logic” that didn’t belong in the component. Conditions, nested updates, and copy-pasted handlers — you know, the classic “if this, then that” chaos. That’s when I realized — useState is perfect for simple state. But when logic starts to grow, useReducer brings back sanity. Example: Let’s say you have a form with multiple fields and some dynamic validation. At first, you might go with useState: const [form, setForm] = useState({ name: '', email: '' }); const handleChange = (field, value) => { setForm(prev => ({ ...prev, [field]: value })); }; It works fine — until you start adding “if this, then clear that”, or “if valid, trigger X”. Then your component becomes a mess of callbacks and setForm calls. 😅 Here’s where useReducer shines: function formReducer(state, action) { switch (action.type) { case 'SET_FIELD': return { ...state, [action.field]: action.value }; case 'RESET': return { name: '', email: '' }; default: return state; } } const [form, dispatch] = useReducer(formReducer, { name: '', email: '' }); Now you have a single source of truth for how the state changes. Your component just dispatches intentions — it doesn’t manage the logic. My personal rule: If my state update can be described as “just set this value” — I use useState. If it sounds like a sentence (“when X happens, update Y and clear Z”) — it’s time for useReducer. Since switching to this mindset, my components feel lighter and more predictable. And debugging became way easier — the reducer tells me exactly what’s happening with state. How about you — are you more of a useState or useReducer person? #React #Frontend #JavaScript #TypeScript #WebDevelopment
To view or add a comment, sign in
Explore related topics
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
Log 0 , UI: 0 (because of stale closure)