Sulegjan Sasikumar’s Post

React has a really elegant pattern that many developers don’t take advantage of. Instead of controlling components with dozens of props, React allows you to compose components using smaller building blocks. This pattern is often called compound components. The idea is simple: instead of configuring a component through many props, the parent component exposes smaller components that you can combine however you want. It actually took me some time working with React to realize this pattern existed, so this post is mostly for those who are earlier in their journey. If you didn’t know about this concept, you’ve probably already seen it in component libraries like Material UI, Radix UI, etc... It’s a simple idea, but it makes components much more flexible and easier to scale. Here’s a small example. #React #JavaScript #Frontend #WebDevelopment #SoftwareEngineering

🚀 Leveling up my Frontend Game! 🕹️ I spent my day building a Neon-Themed Tic-Tac-Toe from scratch! 💻 It’s not just a game; it was a deep dive into DOM manipulation and win-logic. What I learned: State Management: Handling "X" vs "O" turns without bugs. Win Logic: Implementing the 8 winning combinations (rows, columns, diagonals). UI/UX: Using CSS pseudo-elements (::before/::after) to create those glowing neon symbols. The "Aha!" moment: Getting the draw logic to trigger perfectly only when all cells are filled and no winner is found. Check out the clean layout! It’s all built with HTML5, CSS Grid, and Vanilla JavaScript. What was your first JS project? Let's chat in the comments! 👇 #WebDevelopment #JavaScript #CodingJourney #Frontend #BuildingInPublic

Writing Performant CSS in React Global CSS works… until your app scales. Then you get: • Class name collisions • Specificity wars • Unused styles piling up • Hard-to-trace overrides Performance isn’t just bundle size. It’s predictability and maintainability. That’s why I like CSS Modules. ✔ Locally scoped by default ✔ No global leakage ✔ No runtime style injection ✔ Pure CSS, compiled at build time You write normal CSS. Your classes get unique identifiers automatically. No naming gymnastics. No surprises. Clean architecture. Minimal overhead. Scales well. What’s your go-to styling approach in React? #React #FrontendEngineering #CSSModules #WebPerformance #JavaScript

How React Remembers State Between Renders? When a component re-renders, the function runs again from top to bottom. So how does useState not reset every time? 🤔 function Counter() { const [count, setCount] = React.useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; } Every render: The function runs again and Variables are recreated. So why doesn’t count go back to 0? What Actually Happens Internally React stores state outside the component function. Behind the scenes: 1) Each component has a Fiber node 2) React keeps a linked list of Hooks 3) It tracks Hooks based on call order State is not stored in your function. It’s stored in React’s internal Fiber system. The function is just a way for React to describe UI. Understanding this makes Hooks feel much less magical. #ReactJS #ReactInternals #ReactHooks #FrontendDevelopment #SoftwareEngineering #JavaScript

I built the tool I needed for my Web Component library. 🚀 If you’ve ever built a Web Component library, you know the struggle: How do you show your users that your components work seamlessly in React, Angular, Vue, and Lit without the overhead of a massive monorepo? I needed a way to provide instant, editable demos that just work. So, I built UWC Playground. It’s an in-browser codepen specifically for showcasing how components behave across the ecosystem. What makes it a game-changer for library authors? 🛠️ Multi-Framework Side-by-Side: One playground to compare how your custom elements handle props/attributes in React vs. Angular vs. Vue. ⚡ Embedded Demos: Use the <uwc-render> tag in your documentation. It feels as light as a static image but provides a full, live-coding experience. 🧩 Real Compilation: No "smoke and mirrors." TypeScript and SCSS are compiled in a Web Worker, ensuring your users see exactly how the code will perform in production. 🔗 Server-to-Playground: Use the Form POST API to generate a pre-filled playground session directly from your docs or a server-rendered page. Stop shipping static code snippets. Start shipping interactive experiences. 👇 Check the first comment for the link to try it out! #WebComponents #DesignSystems #StencilJS #LitElement #React #Angular #Vue #FrontendDev

⚛️ This small design decision makes modern UIs feel smooth. React doesn’t update the DOM directly. And honestly… that’s a good thing. Instead, it creates something called the Virtual DOM — a lightweight copy of the real DOM living in memory. When the state changes, React doesn’t panic. It compares the old Virtual DOM with the new one, finds the difference, and updates only what actually changed. No full reload. No unnecessary updates. The DOM isn’t fast. React is just smart about touching it.🧠 That small design decision is what makes modern UIs feel smooth. #ReactJS #FrontendDevelopment #JavaScript #SoftwareEngineering #WebDevelopment

🤯 Frontend bug that’s driving me crazy… I’m working on a React project using react-slick, and I’ve run into a strange mobile behavior. Everything works perfectly on desktop. Responsive breakpoints are set correctly. But on mobile first load: 📱 Slider shows multiple cards (as if desktop layout is applied) Then something weird happens… 🔄 The moment I rotate the phone once → the slider instantly fixes itself and shows the correct mobile layout. After that, everything works perfectly. So basically: First load ❌ Rotate phone → magically works ✅ Things I already tried: • Verified breakpoints (3 → 2 → 1) • Triggered window.resize() after mount • Forced slider re-render using a changing key • Imported slick styles • Disabled adaptiveHeight • Checked container width Still happening only on the initial mobile render. My guess: react-slick might be calculating container width incorrectly during the first render. Has anyone faced this issue with react-slick / slick-carousel before? Would really appreciate any insights #ReactJS #FrontendDevelopment #JavaScript

Something I ran into while working with React was a component re-rendering again and again even though nothing on the screen seemed to change. At first it’s confusing. The UI looks perfectly fine, but the component keeps rendering in the background. When this happens, the first thing I usually do is add a small console.log("component rendered") inside the component. It’s a very simple trick, but it immediately tells you how often React is actually re-rendering. Then I start checking what might be triggering it. Sometimes it’s a state change happening higher up in the component tree. When the parent re-renders, the child components re-render too, even if their props didn’t really change. Other times the issue comes from passing new objects or functions as props every time the parent renders. React sees them as new values and triggers another render. In cases like that, tools like React.memo, useMemo, or useCallback can help stabilize things and avoid unnecessary work. Another thing that really helps is the React DevTools Profiler. It shows which components are rendering and why, which makes debugging much easier. These kinds of small observations taught me that React performance is often not about big optimizations, but about understanding why something is rendering in the first place. #reactjs #javascript #frontenddevelopment #webdevelopment #softwareengineering #reactdevelopers #devcommunity #learninginpublic

Ever wondered why changing one small thing in React doesn’t re-render the entire UI? 🤔 That’s reconciliation. In React, every update creates a new virtual DOM. But instead of updating everything, React compares the new tree with the previous one - and updates only what changed. Sounds simple, but small mistakes can break performance. 😬 • Missing or unstable keys ➡️ unnecessary re-renders • Recreating objects/functions ➡️ diffing becomes expensive • Large component trees ➡️ slower updates React is fast. But only if we help it. Reconciliation is not magic - it’s an optimization strategy based on assumptions. Understanding it changes how you structure components. 😉 Have you ever fixed a performance issue just by adding proper keys or memoization? #reactjs #frontend #webperformance #javascript #learninginpublic