𝐃𝐨𝐧'𝐭 𝐭𝐫𝐞𝐚𝐭 `𝐮𝐬𝐞𝐑𝐞𝐟` 𝐥𝐢𝐤𝐞 `𝐮𝐬𝐞𝐒𝐭𝐚𝐭𝐞` — 𝐢𝐭'𝐬 𝐧𝐨𝐭 𝐠𝐨𝐢𝐧𝐠 𝐭𝐨 𝐫𝐞-𝐫𝐞𝐧𝐝𝐞𝐫 𝐲𝐨𝐮𝐫 𝐜𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭, 𝐚𝐧𝐝 𝐭𝐡𝐚𝐭'𝐬 𝐩𝐫𝐞𝐜𝐢𝐬𝐞𝐥𝐲 𝐢𝐭𝐬 𝐬𝐮𝐩𝐞𝐫𝐩𝐨𝐰𝐞𝐫! I recently helped a junior dev debug an animation issue where they were trying to trigger a re-render by updating `myRef.current`. It's a common misconception. `useRef` is designed to hold mutable values that persist across renders but don't trigger new renders themselves. This makes it perfect for: 1. Accessing DOM elements directly: `const inputRef = useRef(null); <input ref={inputRef} />` 2. Storing a mutable value that doesn't need to be reactive: Think timeouts, interval IDs, or previous state values. `const countRef = useRef(0); countRef.current++; // updates without re-render` The key takeaway: `useRef.current` updates synchronously, but React won't re-render unless state or props change. If you need UI updates, `useState` is your friend. If you need a persistent, mutable reference without the render cycle overhead, `useRef` is your ace in the hole. What's your most clever use case for `useRef`? Or a time it totally stumped you? #React #Frontend #JavaScript #WebDevelopment #ReactHooks
Common Misconception: useRef in React
More Relevant Posts
-
One line of CSS most frontend devs forget: scroll-behavior: smooth; Add it to your html selector. That's it. Every anchor link, every scrollTo(), every "back to top" button, instantly smooth. No JavaScript. No libraries. No 12KB animation package. Works in every modern browser. Sometimes the best UX upgrade is one line you didn't overthink. #FrontendDevelopment #CSS #WebDevelopment #UXTips
-
-
𝐘𝐨𝐮 𝐚𝐫𝐞 𝐜𝐫𝐞𝐚𝐭𝐢𝐧𝐠 𝐦𝐨𝐝𝐚𝐥𝐬 𝐭𝐡𝐞 𝐰𝐫𝐨𝐧𝐠 𝐰𝐚𝐲. Most React devs just drop a modal component inside their current tree and slap a z-index on it. It works. Until it doesn't. The real problem? - Your modal lives inside a 𝐝𝐞𝐞𝐩𝐥𝐲 𝐧𝐞𝐬𝐭𝐞𝐝 𝐃𝐎𝐌 𝐧𝐨𝐝𝐞. - 𝐂𝐒𝐒 𝐨𝐯𝐞𝐫𝐟𝐥𝐨𝐰: 𝐡𝐢𝐝𝐝𝐞𝐧 from a parent? Your modal gets clipped. - 𝐳-𝐢𝐧𝐝𝐞𝐱 𝐬𝐭𝐚𝐜𝐤𝐢𝐧𝐠 𝐜𝐨𝐧𝐭𝐞𝐱𝐭 from a wrapper? Your modal loses the battle. - 𝐒𝐜𝐫𝐞𝐞𝐧 𝐫𝐞𝐚𝐝𝐞𝐫𝐬? Confused by where the dialog actually lives. That's not a modal. That's a 𝐝𝐢𝐯 𝐰𝐞𝐚𝐫𝐢𝐧𝐠 𝐚 𝐝𝐢𝐬𝐠𝐮𝐢𝐬𝐞. 𝐄𝐧𝐭𝐞𝐫 𝐜𝐫𝐞𝐚𝐭𝐞𝐏𝐨𝐫𝐭𝐚𝐥. Instead of rendering inside the component tree, 𝐜𝐫𝐞𝐚𝐭𝐞𝐏𝐨𝐫𝐭𝐚𝐥 𝐭𝐞𝐥𝐞𝐩𝐨𝐫𝐭𝐬 𝐲𝐨𝐮𝐫 𝐦𝐨𝐝𝐚𝐥 𝐝𝐢𝐫𝐞𝐜𝐭𝐥𝐲 𝐭𝐨 𝐝𝐨𝐜𝐮𝐦𝐞𝐧𝐭.𝐛𝐨𝐝𝐲 — outside every stacking context, outside every overflow trap. Here's what that unlocks: - 𝐍𝐨 𝐳-𝐢𝐧𝐝𝐞𝐱 𝐰𝐚𝐫𝐬 - 𝐍𝐨 𝐜𝐥𝐢𝐩𝐩𝐢𝐧𝐠 from parent overflow rules - Proper 𝐟𝐨𝐜𝐮𝐬 𝐭𝐫𝐚𝐩𝐩𝐢𝐧𝐠 and accessibility - Clean animation transitions 𝐰𝐢𝐭𝐡𝐨𝐮𝐭 𝐥𝐚𝐲𝐨𝐮𝐭 𝐬𝐢𝐝𝐞 𝐞𝐟𝐟𝐞𝐜𝐭𝐬 And the best part? It still behaves like a 𝐫𝐞𝐠𝐮𝐥𝐚𝐫 𝐑𝐞𝐚𝐜𝐭 𝐜𝐡𝐢𝐥𝐝. State, props, context — all connected to the parent. The logic stays in your component tree. 𝐎𝐧𝐥𝐲 𝐭𝐡𝐞 𝐃𝐎𝐌 𝐧𝐨𝐝𝐞 𝐦𝐨𝐯𝐞𝐬. I combined 𝐜𝐫𝐞𝐚𝐭𝐞𝐏𝐨𝐫𝐭𝐚𝐥 with 𝐫𝐞𝐪𝐮𝐞𝐬𝐭𝐀𝐧𝐢𝐦𝐚𝐭𝐢𝐨𝐧𝐅𝐫𝐚𝐦𝐞 - based state to get smooth enter/exit animations — no flash, no layout jank, just clean transitions synced to the browser's paint cycle. That's what 𝐩𝐫𝐨𝐝𝐮𝐜𝐭𝐢𝐨𝐧-𝐠𝐫𝐚𝐝𝐞 𝐦𝐨𝐝𝐚𝐥 𝐛𝐞𝐡𝐚𝐯𝐢𝐨𝐫 looks like. If you're not using 𝐜𝐫𝐞𝐚𝐭𝐞𝐏𝐨𝐫𝐭𝐚𝐥 for modals, overlays, or tooltips — you're 𝐟𝐢𝐠𝐡𝐭𝐢𝐧𝐠 𝐭𝐡𝐞 𝐃𝐎𝐌 instead of working with it. Are you using createPortal in your projects? Or still doing it the hard way? 👇 #React #Frontend #WebDevelopment #JavaScript #SoftwareEngineering
-
-
#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day36 🚀 Project: Animated Star Rating System 📌 What I built Today I built an Animated Star Rating UI using HTML, CSS, and JavaScript. Users can rate from 1 to 5 stars, see instant feedback messages based on their rating, and edit their rating after submitting. The interface includes smooth hover effects, glowing stars, and pop animations for a more interactive user experience. 🛠 Technologies Used HTML5 CSS3 (Animations, Transitions, Gradient UI) JavaScript (DOM Manipulation & Event Handling) ⚠ Challenge I faced Creating a dynamic rating system where stars react visually on hover and click while also displaying different feedback messages for each rating. ✅ How I solved it Used radio inputs with CSS selectors to control star highlighting and combined them with JavaScript DOM manipulation to toggle between the rating widget and the thank-you message. 💬 Open to feedback and suggestions 🚀 🔗 Project link in comments 👇 🙏 Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #HTML5 #CSS3 #JavaScript #WebDevelopment #100DaysOfCode #DeveloperJourney #UIDesign #StarRating
-
Built a 3D loader with pure CSS. No JavaScript. No libraries. Most users view a loader as a necessary interruption. I view it as an opportunity to craft a meaningful experience. 6 faces 6 independent glow cycles 1 seamless 3D rotation 0 lines of JavaScript Under 5KB 60fps on mobile In an era dominated by heavy frameworks, pure CSS continues to demonstrate remarkable capability. Watch the loader in action in the video attached. Explore the code on GitHub: https://lnkd.in/gZ-wPsug Simple spinner or intentional animation — which approach better respects the user’s time? #CSSArt #WebDevelopment #Frontend #3DAnimation #PureCSS #CreativeCoding
-
Over the past few months, I came across into a JavaScript library called Three.js. You know those fancy 3D storytelling websites and creative portfolios? Yep, Three.js is basically the magic behind them. While I’d love to build a full game with it's own set of rules and logic one day, for now, I decided to settle for this. I'd like to call it a sailing experience. I'd be thrilled if you gave it a try and shared some feedback. You can check it out here: https://lnkd.in/eSwaTjmQ Just a quick heads-up: it might freeze or lag for a moment right at the beginning because the 3D models are a bit heavy to load. Just give it a few seconds to catch its breath, and then you can sail the seas as much as you want.
-
Just launched apologie.band — built this as a side project for a friend's band. Wanted it to feel like a worn VHS tape, not a generic music site. Film grain, scanlines, vignette — all pure CSS and SVG noise. No heavy assets, loads fast, just looks delightfully busted. The ransom note logo was the most fun part. Every letter is a different font, color, rotation, and offset — five Google Fonts doing crime together, stitched up with tape strip overlays. Stack: Next.js 16 / React 19 / TypeScript Tailwind CSS 4 Framer Motion for scroll animations Edge Runtime for dynamic OG images Go check it out: www.apologie.band #webdev #nextjs #react #typescript #tailwindcss #framermotion #frontend #musictech #indieband
-
CSS conic gradients. Custom properties. Zero JavaScript. I built a login page where the border rotates continuously—on hover, the card expands smoothly and the form appears. The animation runs entirely on CSS, no frameworks, no scripts. The effect relies on a custom property '--a' animated from 0deg to 360deg, applied to two overlapping 'repeating-conic-gradient' layers. On hover, the inner container transitions inset values, giving the illusion of a seamless reveal. Every detail gradient angle, transition curve, inset shift—was tuned to feel intentional, not just decorative. Video of the interaction is attached. GitHub: https://lnkd.in/g9cZXF8F If you were to push a CSS property to its limit, which one would you choose and why? #CSS #FrontendDevelopment #WebDesign #HTMLCSS #CreativeCoding #WebDevelopment #Coding #Developer
-
Happy St. Patrick's Day! ☘️ I built a small interactive web experience for the occasion — a pot of gold you can actually click. What I practiced with this project: • CSS keyframe animations & physics-style coin arcs • Dynamic DOM manipulation with vanilla JS • SVG illustration entirely in code • Deployed via GitHub Pages in under 5 minutes Sometimes the best way to sharpen your skills is to build something fun and ship it. Try it here →[https://lnkd.in/g3jcGzcn] #WebDevelopment #JavaScript #FrontendDev #BuildInPublic #StPatricksDay #100DaysOfCode #OpenSource
-
🚀 Just Built an Escape Room Game using HTML & JavaScript! 🎮🔥 Excited to share my latest project – a fully interactive Escape Game developed using core web technologies! 🧠💡 In this game, players must solve puzzles, unlock clues, and make smart decisions to escape within a limited time. It’s designed to challenge logical thinking, problem-solving skills, and creativity. 🔧 Tech Used: • HTML for structure • CSS for styling & UI • JavaScript for game logic & interactivity ✨ Key Features: ✔️ Interactive puzzles & challenges ✔️ Timer-based gameplay ⏳ ✔️ Dynamic clues & user responses ✔️ Smooth and engaging UI This project helped me strengthen my concepts in DOM manipulation, event handling, and logic building in JavaScript. 💭 Building this game was not just fun, but also a great learning experience in creating real-world interactive applications. 🎥 Check out the demo video below and let me know your feedback! #WebDevelopment #JavaScript #HTML #Coding #GameDevelopment #FrontendDeveloper #Projects #LearningByDoing #TechWithArjun
-
Your code is only as fast as your fingers. Built a typing speed trainer that tracks WPM and accuracy in real-time — with high scores, celebratory animations, and a deliberately simple UI that gets out of your way. • React 19 + Vite 6 for a snappy, modern build pipeline • Canvas Confetti + Framer Motion for feedback that actually feels rewarding • Vitest + React Testing Library for solid unit coverage • Tailwind CSS v4 for responsive layout that works on any screen Adding high score persistence was the feature that changed everything. Suddenly it wasn't just a utility — it was a game. Small state decisions can completely shift how users engage with a tool. What's your current WPM? And what are you targeting? #Frontend #React #WebDev #OpenSource #Hacktoberfest
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