Vasyl Oliinyk’s Post

🚨 Why rendering 10,000 items in React will destroy your performance Your React app works perfectly with 100 items. But suddenly becomes slow and laggy with 10,000 items. Why does this happen? The problem isn't React. The problem is the DOM. Every product you render creates DOM nodes. Example: products.map(product => ( <ProductCard key={product.id} {...product} /> )) If you have 10,000 products, React tries to render 10,000 DOM elements. This causes: ❌ Slow initial rendering ❌ Laggy scrolling ❌ High memory usage ❌ Poor user experience But here's the interesting part: The user can only see ~10–20 items on the screen at a time. So why render all 10,000 items? 💡 The solution is List Virtualization. Instead of rendering everything, virtualization only renders the visible items. Example: 10,000 products in the dataset But only 12 items rendered in the DOM As the user scrolls, React reuses DOM elements and loads new items. Libraries that solve this problem: • "react-window" • "react-virtualized" Example: import { FixedSizeList } from "react-window"; This technique dramatically improves: ✔ Performance ✔ Memory usage ✔ Scroll smoothness 💡 Good frontend engineering is not about rendering everything. It's about rendering only what the user needs to see. #reactjs #frontend #javascript #webperformance #softwareengineering

Small changes, big impact. ✨ I just pushed version 1.0.5 of my Personal Dashboard Chrome Extension to the store! This update was all about giving users more control without sacrificing the minimalist aesthetic. What’s new: - Settings Menu: A brand new Glassmorphism-style panel. - Time Customization: Toggle between 12h and 24h formats (featuring a sleek technical "h" suffix). - Manual Location: Override GPS to see weather anywhere in the world. - Performance: Enhanced caching for instant load times. It’s amazing how a few lines of Vanilla JavaScript can completely change the daily workflow 😀 Check it out here ⬇️ : https://lnkd.in/eZztV2wJ You have the code in the first comment, feel free to give me some feedback 👏 #WebDevelopment #JavaScript #ChromeExtension #Coding #OpenSource #Frontend #UIUX

Day 16/21: Building Interactive Auth UIs in React! Authentication is the gateway to almost every modern web application. For Day 16 of my challenge, I moved beyond the product display and built a fully responsive Login & Signup UI from scratch. 🛠️ What I Implemented: State-Driven Navigation: Used React useState to toggle between Login and Signup modes seamlessly within a single component. Dynamic Form Rendering: Practiced conditional rendering to change headings, input fields, and buttons based on the user's intent. Consistent Branding: Leveraged Tailwind CSS to maintain a cohesive dark-themed aesthetic that matches my product catalog. UX Focus: Added intuitive "Sign up" and "Sign in" toggles at the bottom to ensure a frictionless user experience. 💡 The Engineering Challenge: As a Computer Science Engineer, I focused on keeping the component logic clean and reusable. Managing form states and ensuring the modal remains centered and responsive across all viewports was a great exercise in CSS Flexbox and React's lifecycle. Rebuilding my React skills through these daily sprints is proving to be incredibly effective. Seeing a static design come to life with logic is what I love most about development! 🔗 GitHub Repo: https://lnkd.in/g4gUwsjX Live URL : https://lnkd.in/gvkYUNAh #ReactJS #TailwindCSS #FrontendDevelopment #AuthUI #UserExperience #21DaysOfLinkedIn #MERNStack #CodingChallenge #CSByHeart

I built a fun web app with a vintage vibe. Tech Stack: - React - Tailwind CSS - Motion - TypeScript The idea was simple: Bring back the nostalgic typewriter experience into a modern web interface. But technically, I focused on: • Clean component architecture with React • Type-safe logic using TypeScript • Utility-first styling with Tailwind • Smooth micro-interactions & motion effects • Lightweight, performance-first UI This project reminded me that: UI is not just about visuals. It’s about feeling. Combining modern frontend tools with retro design aesthetics was a fun challenge. try here: https://lnkd.in/g8k9ZEXD If you’re building something small, make it delightful. #React #TypeScript #TailwindCSS #Frontend #WebDevelopment #MotionDesign #BuildInPublic

🚀 Built a Custom OTP Input Field using React.js Excited to share my latest mini project — an interactive OTP (One-Time Password) input component built using React Hooks. 🔧 Features: ✔️ Auto focus to next input ✔️ Backspace moves to previous field ✔️ Arrow key navigation (Left & Right) ✔️ Only numeric input allowed ✔️ Clean and reusable component structure 🛠 Tech Used: React.js useState useRef useEffect JavaScript (Event Handling) This project helped me strengthen my understanding of: 👉 Controlled components 👉 DOM manipulation using useRef 👉 Keyboard event handling 👉 Better UX design practices Always learning and improving 🚀 #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #Learning #100DaysOfCode

🎉 Just built and excited to share my latest project: Media Vault! I created a React + Redux web application where you can search, explore, and save images & videos using the Pexels and Unsplash APIs. This project features a modern, interactive UI with smooth hover effects, media filtering, and a personal collection system saved in localStorage. Check out the video demo below to see it in action: - Search for any keyword like “flowers” or “cats” - View both Photos and Videos - Save your favorites and manage your collection - Remove items from your collection if needed This project helped me strengthen my frontend development, Redux state management, API integration, and UI/UX skills. You can also explore the full project on GitHub: https://lnkd.in/d982QgHh #ReactJS #Redux #FrontendDevelopment #WebDevelopment #PortfolioProject #JavaScript #WebApp

React useEffect vs useLayoutEffect — Stop Using Them Interchangeably As a Frontend Engineer, understanding when React runs your side effects is critical for performance and UI correctness. Many developers treat useEffect and useLayoutEffect as the same — but they are NOT. Let’s break it down 👇 🔹 1️ useEffect (Non-blocking, Async after paint) R Runs after the browser paints the UI e Does NOT block rendering aBest for: 1. API calls 2. Subscriptions 3. Logging 3. Timers 4. Updating non-visual state useEffect(() => {   fetchData(); }, []);  Use this in 90% of cases. Why? Because it keeps your app fast and smooth. 🔹 2️ useLayoutEffect (Blocking, Before paint) c Runs synchronously after DOM mutation but before browser paint t Blocks rendering until it finishes Best for: 1. Measuring DOM size 2. Calculating element position 3. Avoiding visual flicker 4. Sync DOM reads/writes useLayoutEffect(() => {   const height = ref.current.offsetHeight;   setHeight(height); }, []);  If you need to measure or modify the DOM before the user sees it — use this. Performance Rule If you misuse useLayoutEffect, you can: 1. Block the main thread 2. Cause performance drops 3. Hurt user experience So always ask:  Does this effect affect layout before the user sees it? If NO → useEffect If YES → useLayoutEffect Clean architecture isn't just about folder structure — it's about understanding execution timing. #React #Frontend #WebDevelopment #JavaScript #ReactJS #Performance #SoftwareEngineering

Day 72 of 2026 ♿ I used to think building for accessibility just meant adding `alt` tags to images so the linter warnings would go away. I was wrong. I was locking 15% of the internet out of my app. Status: Opening the Digital Doors 🚪 Early on, I built a beautiful, custom animated dropdown menu. I was so proud of it—until I tried to navigate my site using only my keyboard. I couldn't open the menu. I couldn't checkout. The site was completely broken for anyone not using a mouse. I stopped prioritizing aesthetics over usability and deployed the "Universal Access" Protocol: 🚫 1. The "Div-itis" Epidemic I used to style `tags to look like buttons because it was easier. The Fix: A screen reader doesn't know a` is clickable. If it triggers an action, it must be a `<button>`. Semantic HTML is the foundation of accessible code. 🎯 2. The Focus Ring Crime I hated the blue outline browsers put around clicked elements, so I would globally set `outline: none;` in my CSS. The Fix: This destroys keyboard navigation. Users literally cannot see where they are on the page. Never remove the default focus outline without replacing it with a custom, highly visible `:focus-visible` state. 🌗 3. The Contrast Trap I loved using light gray text on a white background for a "sleek, minimalist" look. The Fix: It’s unreadable for visually impaired users (or people outside in the sun). I now strictly run my color palettes through a contrast checker to ensure a minimum 4.5:1 ratio. ----- Resource 📚 👉 WAVE Web Accessibility Evaluation Tool: Run your site through this free browser extension. It highlights exactly where your code is failing visually impaired users. ----- 👇 Devs, what is the most common accessibility sin you see? (My Answer: A. Styling `tags as buttons is an epidemic in modern web dev). A: Styling` tags as buttons B: Removing focus outlines (`outline: none;`) C: Terrible, unreadable color contrast Powered by: 🧠 Mindset: Inclusive Engineering ⚡ Protocol: Universal Access #FrontendDev #WebAccessibility #CleanCode #ReactJS #BuildInPublic #Day72 : Avinash

Most developers think their mobile layout is broken… but the real bug is just "100vh". On mobile browsers, "100vh" doesn’t adjust when the address bar or bottom toolbar appears/disappears. Result? • Content gets cut off • Layout jumps • Weird blank spaces • Bad UX The fix is simple: "height: 100dvh;" "dvh" = Dynamic Viewport Height It always matches the actual visible screen height — even when the browser UI changes. Small CSS change. Massive improvement for mobile users. 📱 #webdevelopment #frontenddeveloper #css #javascript #webdev #programming #reactjs #coding

🚀 Built a **Product Filter & Search App** using **HTML, CSS, and JavaScript**. This web application allows users to dynamically search products, filter by category, and sort items by price. The project focuses on improving **JavaScript logic, DOM manipulation, and interactive UI development**. 🔹 Features: • Product search functionality • Category-based filtering • Price sorting (Low → High / High → Low) • Responsive product card layout This project helped me strengthen my understanding of **JavaScript array methods, event handling, and dynamic UI rendering**. 🔗 Live Demo: (https://lnkd.in/gfcuhEwt) 💻 GitHub Repo: (https://lnkd.in/g9YZBp3u) #FrontendDevelopment #JavaScript #WebDevelopment #FrontendDeveloper #LearningInPublic