React Perf Tip: Deferred Value Works

𝐘𝐨𝐮 𝐦𝐢𝐠𝐡𝐭 𝐛𝐞 𝐨𝐯𝐞𝐫𝐭𝐡𝐢𝐧𝐤𝐢𝐧𝐠 𝐬𝐭𝐚𝐭𝐞 𝐮𝐩𝐝𝐚𝐭𝐞𝐬 𝐢𝐧 𝐑𝐞𝐚𝐜𝐭 𝟏𝟖. Remember the days of `ReactDOM.unstable_batchedUpdates` or manually wrapping multiple `setState` calls to prevent excessive re-renders? Good news: React 18 made those mostly obsolete with automatic batching. Now, pretty much any updates—inside event handlers, promises, or `setTimeout`—are batched together into a single re-render. It's a huge win for performance out of the box! However, there's always an escape hatch: `ReactDOM.flushSync()`. This function forces React to process any pending state updates synchronously and update the DOM immediately. While powerful, it's rarely needed and should be used with extreme caution. **When might you reach for `flushSync`?** * **Immediate DOM measurements:** If you need to read the updated DOM layout right after a state change (e.g., for complex animations or integrating with non-React UI libraries) before the browser paints the next frame. * **Controlling browser painting:** For very specific, imperative UI sequences where you need a synchronous render cycle. For 99% of use cases, React's automatic batching handles performance beautifully. Reaching for `flushSync` is usually a sign you might be fighting React's reconciliation process, not working with it. What's the most obscure React API you've had to use for a specific UI challenge? #React #ReactJS #Performance #Frontend #WebDev #JavaScript

Everyone is experimenting with this new text engine. Here is what it actually looks like in a real UI. Text reflows around moving elements in real time. Smooth, no layout breaks. I built an interactive demo 👇 https://lnkd.in/ezshxrKB Built with Pretext by Cheng Lou: https://lnkd.in/eex7dUWH Would you use this in production? #Frontend #JavaScript #WebDev #BuildInPublic #Pretext

https://pretextjs.dev A new frontend library called Pretext (March 2026) is trying to change how we handle text layout. Current approach: Render → Measure → Re-render Pretext approach: Calculate → Render once Instead of using DOM measurements like getBoundingClientRect(), it lets you: • Predict text size before rendering • Avoid layout shifts • Reduce re-renders Useful for: • Chat/message UIs • Infinite scroll lists • Dynamic cards • Multilingual layouts It works without the DOM and can run on the server as well. Still new, but interesting direction for performance-focused UIs. #frontend #javascript #reactjs #webperformance

useRef doesn't trigger re-renders. Here's why - useRef just returns this: { current: value } A plain object. Nothing reactive about it. Changing ref.current = newValue is like editing a JS object property. React has no idea it happened. useState is different — setState notifies React's scheduler. That notification is what causes a re-render. useRef skips that notification entirely. By design. Use it for: ✅ DOM refs (input.focus()) ✅ Timer IDs (clearInterval) ✅ Previous values ✅ Anything your logic needs but the UI doesn't Simple mental model: useState → remember + re-render useRef  → remember silently #React #JavaScript #Frontend #ReactHooks

2025 was the year CSS started replacing your JavaScript. Customizable <select> -- no more Radix or Headless UI dropdowns. Invoker commands -- open a dialog with zero JS. CSS carousels -- native dots and arrows with ::scroll-marker. Scroll-state queries -- detect if a sticky header is stuck, in CSS. Each of these features eliminates a JS library you're probably still importing. Here are the 6 CSS features from 2025 that change how you build UIs. Which one are you most excited to use in production? Prepare for front end interviews with questions and solutions written by ex-FAANG engineers: https://lnkd.in/gqcS3Fbv #CSS #FrontEnd #WebDevelopment #Chrome #JavaScript #GreatFrontEnd

💡 How do you implement dark mode in your projects? I recently built a simple dark/light mode toggle using CSS variables and JavaScript in my portfolio. In this carousel, I’m sharing the exact steps I used. Sometimes, small features like this make a huge difference in user experience. 🔗 Check out my portfolio here: https://lnkd.in/d5PJ_nj8 Curious to know 👇 How do you handle theming in your projects? #WebDevelopment #JavaScript #CSS #Frontend #UIUX #DevCommunity #Jameskamz

While working on a recent project, I ran into an issue where CSS changes weren’t being applied especially when the project started getting heavier or when I was rapidly updating the UI. This seems to happen quite often in older Tailwind CSS projects as well, where styles don’t reflect properly or files appear to be missing. In those cases, this simple command usually fixes it: "rm -rf .next && npm run dev" It clears the build cache and restarts the development server from scratch. A small command, but a very useful one when things start behaving unexpectedly. #nextjs #tailwindcss #webdevelopment #frontenddeveloper #softwareengineering #buildinpublic #javascript #devtips #webdevUK

🚀 Stop Re-rendering Your Components! Understanding useRef in React If you are coming from a JavaScript background, you might be used to grabbing DOM elements using document.getElementById(). In React, we have a much cleaner, more powerful way to handle this: the useRef hook. 🔍 What is useRef? Think of useRef as a "secret storage box" that stays with your component. You can put a value in it, and it will stay there even when the component re-renders. The magic part? Changing the value inside a ref does NOT trigger a re-render. 🏗️ Why is it Important? In React, using useState is great for things that should update the UI (like a counter or a form input). But sometimes, you need to store data without refreshing the screen. ----> This is where useRef shines: Direct DOM Access: Need to focus an input field, scroll to a specific element, or trigger an animation? useRef gives you direct access to the DOM node. Storing Mutable Values: You can keep track of previous state values or timer IDs without causing unnecessary performance overhead. Performance Optimization: Since it doesn't trigger a re-render, it’s much faster for background calculations or tracking variables. 💻 How to Use It  Key Takeaway Use useState if the information is used for rendering the UI. Use useRef if you need to "remember" something or interact with the DOM directly without affecting the render cycle. Devendra Dhote Ritik Rajput Are you using useRef in your projects? Let’s discuss in the comments! 👇 #ReactJS #WebDevelopment #Frontend #CodingTips #JavaScript #MERNStack

Most websites feel static. Scroll… nothing happens. No feedback. No motion. No life. So developers try to fix it: ❌ Add one library for scroll ❌ Another for parallax ❌ Another for counters ❌ Another for text effects Now the site is heavy and messy. There should be a simpler way. ✅ One setup ✅ Multiple effects ✅ Lightweight ✅ Easy to use That’s exactly what I built 👇 👉 MotionFlow.dev Turn static websites into smooth experiences — without complexity. #motionflow #webdev #frontend #buildinpublic #javascript

I built a fully functional calculator using HTML, CSS, and JavaScript. You can try it here: https://lnkd.in/eMK35_N9 Features: • Performs basic arithmetic operations • Clean and responsive interface • Interactive button functionality What I learned: - Handling user input with JavaScript - Structuring logic for calculations - Improving UI for better user experience It’s a simple project, but a solid step in my frontend journey. More projects coming 🚀 #frontenddeveloper #javascript #webdevelopment #buildinpublic