I built a small interactive React component while learning useState. This step-based UI helped me understand how state drives the entire UI flow in React. In this project, I worked with: • multiple state variables  • updating state based on previous state • conditional rendering • reusable components  Even though the UI is simple, it clearly shows how React updates the UI when state changes. Learning React by building small interactive pieces like this has been really helpful. #React #JavaScript #FrontendDevelopment #ReactHooks #LearningInPublic

Understanding React Components React applications are built using components, which are reusable and independent pieces of UI. Instead of writing one large file, we break the UI into smaller parts Types of Components  1)Functional Components 2)Class Components In modern React, we mainly use functional components, which are simple JavaScript functions that return JSX. Core Rules of React Components Component Name Must Start with Uppercase Must Return a Single Parent Element Do Not Modify Props Understanding components made React feel more structured and practical. Building step by step and strengthening fundamentals 🚀 #ReactJS #FrontendDevelopment #WebDevelopment #LearningJourney #JavaScript

💡 𝗧𝗶𝗽 𝗼𝗳 𝘁𝗵𝗲 𝗗𝗮𝘆 — 𝗥𝗲𝗮𝗰𝘁 𝗗𝗶𝗱 𝘆𝗼𝘂 𝗸𝗻𝗼𝘄? Keys in React are 𝗻𝗼𝘁 𝗷𝘂𝘀𝘁 𝗳𝗼𝗿 𝗿𝗲𝗺𝗼𝘃𝗶𝗻𝗴 𝘄𝗮𝗿𝗻𝗶𝗻𝗴𝘀 — they control how React 𝗶𝗱𝗲𝗻𝘁𝗶𝗳𝗶𝗲𝘀 𝗮𝗻𝗱 𝗿𝗲𝘂𝘀𝗲𝘀 𝗲𝗹𝗲𝗺𝗲𝗻𝘁𝘀. Using unstable keys (like array indexes in dynamic lists) can cause: - Broken animations - Lost input focus - Incorrect component state 🔧 𝗕𝗲𝘀𝘁 𝗽𝗿𝗮𝗰𝘁𝗶𝗰𝗲: Always use 𝘀𝘁𝗮𝗯𝗹𝗲, 𝘂𝗻𝗶𝗾𝘂𝗲 𝗜𝗗𝘀 from your data whenever possible. Good keys = predictable UI behavior. #React #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #CodingTips #BestPractices #FullstackDeveloper

Why useEffect feels unpredictable (but isn’t) Most frustration with useEffect comes from three JavaScript behaviors: 1️⃣ Objects are compared by reference New object → new reference → effect runs again 2️⃣ Functions close over values If you don’t understand closures, dependency arrays feel confusing 3️⃣ State updates are scheduled They don’t run immediately, they’re batched None of this is React magic. It’s "JavaScript". When JS fundamentals are clear, useEffect becomes boring. And boring is good. #reactjs #javascript #frontend #softwareengineering #careeradvice

useEffect is one of the most misunderstood hooks in React. Most bugs I’ve seen weren’t because React is complex — they were because the mental model was wrong. Here’s a practical breakdown with real examples. Day 2/100 — sharing practical frontend engineering lessons from real-world projects. What’s the most confusing useEffect bug you’ve faced? #ReactJS #FrontendEngineering #JavaScript #WebPerformance #SoftwareArchitecture

Today I learned how useEffect cleanup actually works in React — and it completely changed how I think about side effects. When we use useEffect, it runs after render. But what many beginners ignore is the cleanup function. Why is cleanup important? Prevents memory leaks Stops unnecessary API calls Removes event listeners properly Clears intervals and timeouts Example: When you add an event listener inside useEffect, you must remove it when the component unmounts. Otherwise, it keeps running in the background. That’s where cleanup comes in. useEffect(() => { const handleResize = () => console.log("Resized"); window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, []); The function returned inside useEffect runs: Before the next effect runs When the component unmounts Small detail. Big difference in performance. React is simple — until you understand the details. #ReactJS #FrontendDeveloper #JavaScript #WebDevelopment #LearningInPublic #100DaysOfCode

DAY 16 OF POSTING REACT CONTENT ⚛️ React didn’t start with Hooks. Earlier, React components were written using classes. They worked, but understanding this, lifecycle methods, and structure took time. In 2018, React introduced Hooks. Hooks allowed developers to write components as simple functions, manage state without classes, and avoid this completely. Classes are still supported. But Hooks became the preferred way because they made React easier to read, write, and maintain. React didn’t remove classes — it just found a simpler way forward. #ReactJS #ReactBasics #JavaScript #FrontendDevelopment #LearnInPublic #WebDevelopment #CodingJourney

Today I focused on improving my understanding of: ⚡ React component structure ⚡ Reusable UI patterns ⚡ Proper folder organization in large projects ⚡ Clean Tailwind styling without messy class overload One small improvement I made: Instead of writing repetitive UI code, I created reusable components and passed props dynamically. It made my code cleaner and easier to scale. Learning this made me realize: Good frontend development is not about making it work — it's about making it maintainable. Building consistently. Improving daily. 💻🔥 #ReactJS #FrontendDeveloper #JavaScript #TailwindCSS #WebDevelopment #LearningInPublic #SheryiansCodingSchool #FullstackDevelopment

While starting to learn React, I decided to keep things simple. I built the same Todo List twice with the same UI design: First using pure JavaScript, Then rebuilding it with React. This helped me clearly see the difference between: • JavaScript DOM manipulation • React’s component-based thinking Project features: • Add new tasks • Delete tasks • Toggle task completion • Search tasks • Filter tasks (All / Completed / Not Completed) Small project, but a big learning step for me. Live Demo: JS version: https://lnkd.in/ebWQRNar React version: https://lnkd.in/eJt2Svj7 #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #TodoApp

🚨 Stop using useEffect for everything in React. If you're still using useEffect to: • Derive state from props • Transform data for rendering • Handle simple computations You're probably writing more bugs than you think. 💡 React tip: 1️⃣ Derived data belongs in useMemo, not useEffect 2️⃣ Event-driven logic belongs in handlers 3️⃣ Effects are for synchronization with external systems The less useEffect you write, the more predictable your component becomes. Clean React code is about eliminating unnecessary effects. What’s one place you removed useEffect and simplified your code? #ReactJS #FrontendDevelopment #JavaScript #SoftwareEngineering #CleanCode