𝗜𝗻𝗹𝗶𝗻𝗲 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 𝗔𝗿𝗲 𝗡𝗼𝘁 𝗔𝗹𝘄𝗮𝘆𝘀 𝗮 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 You’ve probably heard this before: “Don’t use inline functions in JSX. It causes re-renders.” Example: <button onClick={() => setCount(count + 1)}> Increment </button> Yes — this creates a new function on every render. But here’s the important part: Creating a new function is usually very cheap. In most applications, this is not your performance bottleneck. The real issue happens when: • The function is passed to a memoized child • The child relies on reference equality • The component tree is large For example: <Child onClick={() => setCount(count + 1)} /> If the child is wrapped with React.memo, the changing function reference can trigger re-renders. That’s when useCallback might make sense. But adding useCallback everywhere “just in case” adds complexity. A better rule: 📌 𝙊𝙥𝙩𝙞𝙢𝙞𝙯𝙚 𝙬𝙝𝙚𝙣 𝙞𝙩 𝙖𝙛𝙛𝙚𝙘𝙩𝙨 𝙗𝙚𝙝𝙖𝙫𝙞𝙤𝙧 — 𝙣𝙤𝙩 𝙗𝙚𝙘𝙖𝙪𝙨𝙚 𝙖 𝙧𝙪𝙡𝙚 𝙨𝙖𝙮𝙨 𝙨𝙤. Most performance issues in React are architectural, not about small function allocations. Day 11/100 — sharing practical frontend engineering lessons. Do you avoid inline functions, or only optimize when needed? #ReactJS #FrontendEngineering #JavaScript #WebPerformance #SoftwareArchitecture

𝗪𝗵𝘆 𝗠𝗼𝘀𝘁 𝗥𝗲𝗮𝗰𝘁 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 𝗕𝗲𝗰𝗼𝗺𝗲 𝗛𝗮𝗿𝗱 𝘁𝗼 𝗠𝗮𝗶𝗻𝘁𝗮𝗶𝗻 One mistake I see often in React codebases: Components are trying to do everything. For example: • Fetching data • Managing state • Handling UI logic • Rendering complex layouts • Handling side effects All inside a single component. At first, it works. But as features grow, the component becomes harder to: • Understand • Test • Debug • Reuse What helped me improve this was a simple rule: 𝗢𝗻𝗲 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 = 𝗢𝗻𝗲 𝗿𝗲𝘀𝗽𝗼𝗻𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆. Instead of putting all responsibilities inside one component, Split them based on what they are responsible for. This creates clearer boundaries in the codebase. Which makes the code easier to: • Understand • Maintain • Extend in the future Good React code is not about fewer components. It’s about clear responsibilities between components. Day 4/100 — sharing practical frontend engineering lessons from real projects. How do you usually decide when to split a component? #ReactJS #FrontendArchitecture #JavaScript #SoftwareEngineering #CleanCode

Today, I stopped building "Prop-Heavy" components and started building Systems. I’ve officially implemented the Compound Component Pattern in my React frontend. The Architectural Shift: Prop-Drilling Extinguished: By using React Context within my component families, I no longer have to pass state through layers of unnecessary props. Developer Experience (DX): My components are now much more intuitive to use. They read like HTML, making the UI structure clear at a glance. Maximum Flexibility: I can now reorder titles, buttons, or status badges inside my Task Cards without touching the underlying component logic. Scalability: This is how the pros build UI libraries. It makes the codebase significantly easier to maintain as the project complexity increases. The Aha! Moment: A good component isn't just one that works; it is one that is a joy for other developers to use. Moving from "Rigid Props" to "Flexible Compounds" is like moving from a fixed menu to a buffet - you get exactly what you need, exactly where you want it. Clean code is a competitive advantage. #ReactJS #WebArchitecture #FrontendEngineering #100DaysOfCode #CleanCode #JavaScript #Day82 #Adityanandan #Theadityanandan

After reviewing dozens of portfolios and codebases from junior developers here are the mistakes I see over and over again 👇 1. Building before planning. They open VS Code before they've thought through the structure. A few minutes of planning saves hours of refactoring. 2. Ignoring mobile-first design. They build a beautiful desktop layout then try to squeeze it into a phone screen. It is always better to start small then scale up. 3. Copy-pasting code they don't understand. Stack Overflow and AI tools are powerful but if you can't explain what the code does line by line, you don't own it yet. 4. Skipping version control on solo projects. "It's just me, I don't need Git." Until you break something at 11pm and can't undo it. 🙂 5. Chasing every new framework. React, Vue, Svelte, HTMX, Astro you want them all but just pick one. Go deep. Breadth means nothing without depth. 6. Treating accessibility as optional. It's not a bonus feature. It's a baseline. And yes, it affects your SEO too. The developers who grow fast aren't the ones who know the most tools, they're the ones who understand why they're using them. 💬 I would like to hear from you: What's the ONE HTML element that's technically a button but most beginners wrongly use a `<div>` for instead and why does it matter? Drop your answer below. Bonus points if you explain the accessibility reason. 🧠 #WebDevelopment #FrontendDev #WebDesign #FesborneStudios #DeveloperTips #JuniorDeveloper #LearnToCode

Most beginners think Frontend Development is just about coding. It’s not. Frontend development is about creating smooth, fast, and engaging user experiences that people actually enjoy using. If you’re starting your frontend journey, focus on these core technologies first: • HTML – The structure of every webpage • CSS – The design, layout, and visual styling • JavaScript – The logic that makes websites interactive But learning only theory won’t make you a developer. The real growth comes from building small projects like: ✔ Login Forms ✔ Landing Pages ✔ Dashboards ✔ Profile Cards Every small project improves your skills and confidence. Start small. Build consistently. Improve every day. That’s how developers grow. 🚀 #FrontendDevelopment #WebDevelopment #HTML #CSS #JavaScript #FrontendDeveloper #Coding #Programming #WebDesign #LearnToCode #DeveloperCommunity #TechLearning #CodingJourney #SoftwareDevelopment #DigitalSkills

🚀 Day 2 of My Frontend Development Journey After understanding the basics of frontend development yesterday, today I focused on the core technologies that power every website we use. Every webpage is built using three fundamental building blocks: 🧱 HTML (HyperText Markup Language) This is the backbone of any website. It defines the structure—headings, paragraphs, images, links, and more. Without HTML, there’s literally nothing to display. 🎨 CSS (Cascading Style Sheets) CSS is what makes a website visually appealing. It controls colors, layouts, spacing, and responsiveness. I learned how even small styling changes can completely transform the look and feel of a page. ⚡ JavaScript This is where things get interesting. JavaScript adds life to a website—handling user interactions like clicks, animations, and dynamic content updates. It turns a static page into an interactive experience. 💡 Key takeaway from today: Frontend development is not just about coding—it’s about how users experience a product. Even the smallest details like spacing, colors, or button behavior can make a big difference. Right now, I’m focusing on strengthening these fundamentals before moving on to frameworks like React. Slowly building, one step at a time 💻✨ #FrontendDevelopment #WebDevelopment #LearningInPublic #Day2 #CodingJourney #100DaysOfCode

Every few months someone asks the same question in frontend circles: “Why doesn’t anyone use #Stencil?” Which is funny… because technically #Stencil solves a lot of problems. It compiles to #WebComponents, ships tiny bundles, works with #React, #Angular, #Vue, and lets you write components in a modern #TypeScript + #JSX style. On paper it sounds perfect. So why isn’t it everywhere? After digging into this, a few uncomfortable truths show up: • #WebComponents never got a massive ecosystem • #ShadowDOM complicates styling and theming • Most developers already live inside #React, #Angular, or #Vue ecosystems • #Libraries grow where the developers are — and most developers didn’t move #Stencil ended up in a strange place. It’s excellent for #designsystems, internal component libraries, and cross-framework UI packages. But as a general-purpose frontend framework, it never reached escape velocity. Which is a shame, because the idea behind it is pretty elegant: Write #components once → #ship them everywhere → let the #browser do the work. I wrote a deeper breakdown of why #Stencil is technically great but rarely used in the wild. Full article here: https://lnkd.in/ed3e4D-y Curious what people think. Have you actually used #StencilJS in production? #Stencil #StencilJS #WebComponents #FrontendDevelopment #JavaScript #Angular #React #Vue #DesignSystems #FrontendArchitecture #WebDevelopment #SoftwareEngineering

Most developers use JavaScript events every day… but many don’t actually understand how events travel in the DOM. When you click a button inside a div, which runs first? The button? The parent div? The document? The answer depends on Event Bubbling vs Event Capturing. ⚡ Event Bubbling (default) The event starts from the target element and moves upward through its parents. Example flow: button → div → body → document ⚡ Event Capturing The event starts from the top parent and moves down to the target. Example flow: document → body → div → button 💡 Most applications rely on bubbling, which also powers event delegation. Understanding this concept helps you: • Debug event issues faster • Write cleaner event delegation • Control complex UI interactions Frontend engineering is not just about writing code — it’s about understanding how the browser actually works. Follow for more JavaScript & Frontend deep dives. #javascript #frontenddeveloper #webdevelopment #100daysofcode #learninpublic #softwaredevelopment #coding

A while ago, I was working on a frontend project. At the beginning, everything felt simple. A few components. Some basic state management. Nothing too complex. But as the project started growing, the frontend slowly became more complicated. New features were added. More conditions were introduced. Props kept getting passed deeper into components. State logic started spreading everywhere. Everything worked… until one day it didn’t. A small change in one component unexpectedly affected several other parts of the UI. That’s when something clicked for me. The issue wasn’t the feature itself. The real issue was how the code was structured earlier. Good frontend development isn’t about quickly adding more code. It’s about organizing your code in a way that stays manageable as the project grows. Since then, I try to focus more on: • Structuring code around features instead of random folders • Keeping UI components separate from business logic • Thinking about performance before introducing more state • Handling loading and error states intentionally Frontend development isn’t just about building screens. It’s about creating systems that stay maintainable over time. Still learning. Still improving. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #BuildInPublic 🚀