Understanding useEffect vs useLayoutEffect in React

How I Understood useEffect vs useLayoutEffect At first, both hooks felt the same. Same syntax. Same dependencies. Same confusion 😅 So I asked a human question: 👉 When does React do things? React does three things: 1️⃣ Render the UI 2️⃣ Paint it on the screen 3️⃣ Let the browser show it to users Now the difference became clear. useEffect says: 🧘 “Show the UI first. I’ll run after the screen is painted.” That’s why it’s perfect for: • API calls • Subscriptions • Logging, side effects useLayoutEffect says: ⏸️ “Wait. Don’t show the screen yet. Let me run before paint.” That’s why it’s used for: • Measuring DOM size • Fixing layout shifts • Reading positions (width, height, scroll) The lesson I learned 👇 📌 If the user can see the change later → useEffect 📌 If the user must not see the flicker → useLayoutEffect Now I don’t memorize rules. I just ask: 👉 Should this run before or after paint? Still learning. Still simplifying. 🚀 #ReactJS #useEffect #useLayoutEffect #FrontendDevelopment #LearningInPublic #JavaScript #WebDevelopment #DeveloperJourney #ReactHook

Breathing new life into an old project: Movie Catalog 🎬 I recently revisited an old movie catalog application I had built and used it as a playground to refactor, fix issues, and improve the overall architecture and UX. In this refactor of Movie Catalog, I focused on: 1 - Cleaning up legacy code and simplifying components Improving the movie search experience with debounced queries to avoid unnecessary requests. 2 - Refining the movie cards to highlight the most relevant details. 3 -Reviewing the authentication flow (sign up/sign in) and state persistence. 4 - Polishing the rating experience and how user ratings are stored and displayed. From a technical perspective: 1- Modernized the codebase with React + TypeScript best practices. 2 - Extracted and refined custom hooks (debounce, infinite scroll, auth, rating, etc.). 3 - Improved the service layer for API integration and local storage handling. 4- Added and updated tests with Vitest for hooks, services, and key pages to make the refactor safer. This work was a great exercise in: Maintaining and evolving existing code instead of starting from scratch. Incrementally improving architecture, readability, and type safety. Reinforcing test coverage to support continuous refactoring. If you’re interested in how I approached refactoring an existing React/TypeScript app, I’d be happy to share more details and discuss trade-offs and lessons learned. Website: https://lnkd.in/dt__sDpd Github: https://lnkd.in/dMiSHwKx #ReactJS #Vite #Tailwind #MovieCatalog #Learning #Dev #Programming #JavaScript #JS

🤔 Ever spent 2 hours debugging a layout issue… only to realize you misunderstood one DOM property? 💻 When multiple layers in the Ui and developers got stuck how to make the button acccurately center in third layer of the same containers input. 👉 That’s exactly what happens when we confuse offsetTop and offsetHeight. They look simple. They sound similar. But using the wrong one in scroll logic, animations, or layout calculations can completely break your UI behavior. ✅ Let’s simplify it: 🔹 offsetTop It tells you how far an element is from the top of its nearest positioned parent. Think: “Where does this element start vertically?” ✅ Used for: • Scroll-triggered animations • Sticky headers • Visibility detection • Position-based calculations 🔹 offsetHeight ✅ It tells you how tall the element is (including padding and borders). Think: “How much vertical space does it occupy?” ✅ Used for: • Dynamic dropdown sizing • Accordions • Scroll containers • Preventing layout shifts ✅ Real scenario: If you calculate scroll position using offsetHeight instead of offsetTop, your trigger points will be completely wrong — and debugging becomes painful. Frontend development isn’t just about writing code. It’s about understanding how the browser thinks. ❓ In Which scenario you have used it ? If breaking down complex DOM concepts like this helps you: 👉 Like this post 👉 Share it with your dev circle 👉 Comment which advanced topic you want simplified next #javascript #frontenddeveloper #webdevelopment #reactjs #programming #softwareengineering #developers #devlife

What if you could solve any Rubik's Cube just by pointing your camera at it? I built exactly that — a browser-based Rubik's Cube Solver that: - Scans each face using your device camera with real-time color detection - Lets you verify and fix colors on an interactive cube net - Renders your cube in interactive 3D so you can inspect every angle - Walks you through the solution step-by-step with smooth 3D animations Under the hood, it uses the Kociemba algorithm (the same approach used in competitive speedcubing solvers) running inside a Web Worker — so the UI stays responsive even during heavy computation. No backend. No installs. Just open and solve. Built with: React · Three.js (@react-three/fiber) · CubeJS · Vite - Live link in the comments — try it yourself! -  Drop your thoughts in the comments — I'd love to hear what you think! #JavaScript #React #ThreeJS #WebDevelopment #RubiksCube #FrontendDev

𝐃𝐨𝐧'𝐭 𝐭𝐫𝐞𝐚𝐭 `𝐮𝐬𝐞𝐑𝐞𝐟` 𝐥𝐢𝐤𝐞 `𝐮𝐬𝐞𝐒𝐭𝐚𝐭𝐞` — 𝐢𝐭'𝐬 𝐧𝐨𝐭 𝐠𝐨𝐢𝐧𝐠 𝐭𝐨 𝐫𝐞-𝐫𝐞𝐧𝐝𝐞𝐫 𝐲𝐨𝐮𝐫 𝐜𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭, 𝐚𝐧𝐝 𝐭𝐡𝐚𝐭'𝐬 𝐩𝐫𝐞𝐜𝐢𝐬𝐞𝐥𝐲 𝐢𝐭𝐬 𝐬𝐮𝐩𝐞𝐫𝐩𝐨𝐰𝐞𝐫! 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

✨𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗙𝗿𝗶𝗱𝗮𝘆 𝗖𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲 𝟮: 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝗼𝗻 𝗠𝗮𝗴𝗶𝗰 ✨ Small interactions can completely change how users experience a product. 𝗔 𝗵𝗼𝘃𝗲𝗿 𝗲𝗳𝗳𝗲𝗰𝘁, 𝗮 𝘁𝗼𝗴𝗴𝗹𝗲, 𝗮 𝘀𝘂𝗯𝘁𝗹𝗲 𝗮𝗻𝗶𝗺𝗮𝘁𝗶𝗼𝗻 these tiny details bring interfaces to life. For this week’s Frontend Queens challenge, we’re focusing on UI interactions and micro-interactions. 🗓 𝗦𝘁𝗮𝗿𝘁: 𝗠𝗮𝗿𝗰𝗵 𝟮  🗓 𝐒𝐮𝐛𝐦𝐢𝐭 𝐛𝐲: 𝐌𝐚𝐫𝐜𝐡 𝟏𝟑 You don’t need a brand-new project. Feel free to share: • a CodePen • a live demo • a short video or GIF • even an older project you’ve built before The goal is simple: 𝗲𝘅𝗽𝗲𝗿𝗶𝗺𝗲𝗻𝘁, 𝗹𝗲𝗮𝗿𝗻, 𝗮𝗻𝗱 𝘀𝗵𝗮𝗿𝗲 𝘄𝗶𝘁𝗵 𝘁𝗵𝗲 𝗰𝗼𝗺𝗺𝘂𝗻𝗶𝘁𝘆. 🏆 Focus categories • Micro-Interaction Magic – hovers, toggles, transitions • Innovation in Motion – clever animations • Creative Spark – unexpected interaction ideas CSS, JavaScript, GSAP, or any tool you love — surprise us. If you have great resources or tutorials, feel free to share them with the community as well. 𝗟𝗲𝘁’𝘀 𝗺𝗮𝗸𝗲 𝗶𝗻𝘁𝗲𝗿𝗳𝗮𝗰𝗲𝘀 𝗳𝗲𝗲𝗹 𝗮𝗹𝗶𝘃𝗲. ✨ 𝗝𝗼𝗶𝗻 𝘁𝗵𝗲 𝗰𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲 𝗼𝗻 𝗦𝗹𝗮𝗰𝗸: https://lnkd.in/eAskzKiG💜 #FrontendQueens #FrontendFriday #WebDevelopment #UI #MicroInteractions #CSS #JavaScript

## DAY 16 — Flappy Bird Day 16/30: Recreated Flappy Bird in the browser. Gravity, collision detection, pipe generation, score tracking, game loop — this was the most complex single-file project of the challenge so far. The game loop concept (update state → check collisions → render → repeat) completely changed how I think about interactive applications. It's not that different from how UI frameworks work under the hood. 🔗 Live: https://lnkd.in/gi3wbdCt 🔗 Code: https://lnkd.in/gu2pwGkj #30DaysOfCode #JavaScript #GameDev #WebDevelopment #BuildInPublic #WomenInTech

🚀 I thought my UI was slow. Turns out… my rendering strategy was. Most frontend performance issues aren’t about complex logic — they’re about unnecessary re-renders and too much DOM work. Here’s how to fix it: 🚀 Render only what’s needed 📦 Virtualize large lists 🧠 Memoize expensive calculations ⏳ Lazy load non-critical resources 🎛 Debounce heavy events 🎨 Prefer CSS animations over JS The DOM is expensive. Every update should be intentional. #Frontend #WebPerformance #JavaScript #UIEngineering #SoftwareEngineering

🚀 Decoding the Matrix: Cyberpunk Glitch Text Effect 🟢 Experimenting with DOM manipulation and CSS animations to create "glitch" effects is always fun! 💻✨ I recently built a dynamic, hacker-style text scramble using pure HTML, CSS, and JavaScript. No external libraries or frameworks—just vanilla web tech! 💡 Key Learnings & Features: ✅ Dynamic Scrambling: Used setInterval and array mapping to rapidly cycle through random characters before locking the correct text in place from left to right. ✅ Neon Glow Aesthetic: Leveraged layered CSS text-shadow properties to create a vibrant, realistic glowing terminal effect. ✅ DOM Manipulation: Seamlessly updating the UI character by character for that satisfying decode illusion. Building these mini-projects is a fantastic way to solidify core frontend concepts and understand how things work under the hood. One line of code at a time! 🌱 👇 Check out the code and try it yourself! 🔗 Live Demo: https://lnkd.in/gpQaG8ek Would love to hear your thoughts or feedback! 🙌 #WebDevelopment #JavaScript #CSS #Cyberpunk #Frontend #CreativeCoding #LearningJourney #SheryiansCodingSchool #Projects