React 19's use() Hook Fixes Fetching Bugs

I used to think “team generators” were simple… until I tried building one myself. Took a basic idea: 👉 Enter names 👉 Generate teams OR pick a random name And turned it into a working web app using JavaScript. Sounds easy, but I ran into real problems: Handling user input properly (empty lines were a mess) Figuring out how to split names into balanced teams Debugging weird issues (like functions not running because of this) Making the UI actually display results dynamically Built using: • HTML • CSS (Flexbox) • JavaScript (DOM manipulation, events, arrays) This project helped me understand how small ideas turn into real logic + real bugs. Next step: building something more complex (maybe with APIs). Code on GitHub: https://lnkd.in/dPEYSnqU #JavaScript #WebDevelopment #Frontend #LearningByDoing #100DaysOfCode

🚀 Day 36 - Random Joke Generator Today I built a fun and interactive Random Joke Generator using JavaScript and APIs.....! 😄 This project helped me understand how real-world apps fetch and display dynamic data. 🔍 What I explored today: • Making HTTP requests using fetch() • Handling API responses with .then() • Working with JSON data • DOM manipulation using getElementById() • Handling events with addEventListener() • Managing loading states using a Bootstrap spinner ⚡ App Features: ✅ Fetches a random joke from an API ✅ Displays joke dynamically on button click ✅ Shows loading spinner while fetching data ✅ Handles errors gracefully 💡 This was a great step towards understanding how frontend connects with APIs.....feels like building real apps now...! Project Links • GitHub Repo: https://lnkd.in/d7m94A7k • Live Demo: https://lnkd.in/ddBBnba2 Excited to keep improving and building more 🔥 #LearnInPublic #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #BuildInPublic

where does that 'e' or 'event' come from?? If you have ever wondered why that object magically appears in your 'onClick' handler, the answer lies in how React coordinates the bridge between the browser and your code. It isn't just a standard browser event. It is a very specific system designed to keep your UI consistent. When you pass a function reference like 'onClick={handleClick}', React automatically injects a SyntheticEvent as the first argument. You do not have to do anything. It is just there. This is a cross-browser wrapper that ensures your event logic works the same in every environment. Under the hood, React is doing the heavy lifting of mapping native DOM events to this consistent interface. The behavior changes slightly when you use arrow functions in your JSX. If you write 'onClick={() => handleClick()}', you lose that automatic injection. In this case, you are responsible for capturing the event from the anonymous wrapper and passing it down manually, like 'onClick={(e) => handleClick(e)}'. It is a small syntactic difference, but forgetting this is a common reason why 'event.target' suddenly comes back as undefined. Understanding this flow is crucial for writing clean code. Since React 17 removed event pooling, you no longer have to worry about the event object being nullified after the handler runs. You can now use the event inside asynchronous code without calling 'e.persist()'. It is a simpler and cleaner model that allows you to focus on logic rather than browser quirks. #ReactJS #SoftwareEngineering #WebDevelopment #Javascript #CodingTips #Frontend

🚀 Day 5/30 – State in React One of the most important concepts 🔥 Today I learned: ✅ State stores dynamic data inside a component → It allows components to manage and update their own data ✅ When state changes → React re-renders the UI → React automatically updates only the changed parts (efficient rendering ⚡) ✅ Managed using useState hook → The most commonly used hook in functional components ✅ State updates are asynchronous → React batches updates for better performance 💻 Example: import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); const handleClick = () => { setCount(prev => prev + 1); // safe update }; return ( <div> <h2>Count: {count}</h2> <button onClick={handleClick}>Increment</button> </div> ); } 🔥 Key Takeaway: State is what makes React components interactive, dynamic, and responsive to user actions. #React #State #FrontendDevelopment #JavaScript #WebDev #CodingJourney #LearnInPublic

WebAssembly Explained: Faster, Smarter Web Apps ~ I recently spent some time understanding WebAssembly (Wasm), and it completely changed how I think about performance on the web. WebAssembly is often described as a "low-level binary format," but in simpler terms—it’s a way to run super-fast code in the browser without relying only on JavaScript. What clicked for me is this: Wasm isn’t here to replace JavaScript. It works with it. Think of JavaScript as the brain handling UI and interactions, while WebAssembly acts like a high-performance engine doing the heavy lifting behind the scenes. Here’s why that matters: • You can write code in languages like Rust or C++ • Compile it into a .wasm file • Run it in the browser at near-native speed That opens up a whole new category of web applications. I’ve started noticing Wasm behind things like: • Browser-based games that feel like desktop apps • Video and image processing tools running smoothly online • Complex simulations and developer tools directly in the browser It’s basically shrinking the gap between web apps and native software. But it’s not perfect. Wasm still depends on JavaScript for many browser-level interactions, and debugging isn’t as straightforward yet. Also, for simple UI logic, JavaScript is still the better choice. So the real takeaway for me wasn’t "Wasm is better than JavaScript." It was this: Use the right tool for the right job. If performance becomes a bottleneck, WebAssembly is a powerful option to unlock the next level. I’m curious—have you come across a real-world app where WebAssembly made a noticeable difference? #WebAssembly #WebDevelopment #JavaScript #PerformanceEngineering #FrontendDevelopment #SoftwareEngineering #WebApps #TechLearning

🧩 Just built a Quiz Web App using HTML, CSS & JavaScript! I recently completed a fully functional quiz application that fetches real-time questions using an API and lets users attempt a 10-question MCQ quiz. 🔧 Features: Dynamic questions using Open Trivia API Randomized options each time Next / Previous navigation Answer selection with instant UI feedback Option restoration when navigating back Score calculation on submit Reset functionality 💡 What I learned while building this: Deep DOM manipulation Handling async API calls (fetch, async/await) Managing application state using arrays Debugging real UI bugs (event handling + DOM issues) Importance of clean HTML structure (IDs & labels matter a lot ) This project helped me understand how real-world frontend apps manage state and user interactions without frameworks. Next step: improving UI/UX and converting this into a React-based version. Feedback is welcome. #JavaScript #WebDevelopment #FrontendDevelopment #HTML #CSS #APIs #FetchAPI #AsyncJavaScript #DOMManipulation #Coding #Programming #WebDevJourney #100DaysOfCode #BuildInPublic #LearnToCode #StudentDeveloper #DeveloperJourney #Projects #FrontendEngineer #TechCommunity #SoftwareDevelopment

🚀 Day 12/30 – Conditional Rendering in React Building dynamic UIs based on conditions ⚡ Today’s focus was on Conditional Rendering — a core concept that makes React apps interactive and user-driven. 🔍 What I learned: ✅ Conditional Rendering allows UI to change based on state ✅ React relies on pure JavaScript logic (if, ternary, &&) inside JSX ✅ Essential for real-world features like authentication, loaders, and error handling 💻 Example: function App() { const isLoggedIn = true; return ( <> {isLoggedIn ? <h1>Welcome User</h1> : <h1>Please Login</h1>} </> ); } 🔥 Common Patterns: 1️⃣ Ternary Operator (Most Used) {condition ? <A /> : <B />} 2️⃣ Logical AND (&&) {isLoggedIn && <Dashboard />} 3️⃣ If Statement (Outside JSX) if (!user) return <Login />; 💡 Real-World Use Cases: ✔️ Showing a loader while fetching data ✔️ Displaying error messages ✔️ Rendering dashboard after login ⚡ Advanced Insight: React doesn’t introduce new syntax for conditions — it simply leverages JavaScript inside JSX, making it flexible and powerful. 🔑 Key Takeaway: 👉 Conditional Rendering = Controlling what users see based on application state. 💬 Curious — which approach do you use more: ternary or if/else logic? #React #FrontendDevelopment #JavaScript #WebDevelopment #LearningInPublic

Built a real DOM-based project today......a To-Do List And honestly, it taught me more than I expected. Here’s what it does: - You can type a task and add it using a button - Or simply press Enter on the keyboard to add it instantly - Each task gets added dynamically to the list - Task counters update in real time (In Progress + Completed) - You can delete tasks anytime - You can also mark tasks as completed and track progress What seemed like a “simple project” actually pushed me to understand how everything connects behind the scenes: - How DOM updates work in real time - How events like clicks and keyboard inputs interact with JavaScript - How dynamic UI changes without refreshing the page Even a basic To-Do app contains the core logic of real-world applications. Small steps. Real understanding. Constant building. 💻🔥 #WebDevelopment #JavaScript #DOM #FrontendDevelopment #BuildInPublic

I Just built and deployed a Weather App 🌤️ This project helped me understand how to work with APIs and handle real-time data using JavaScript… Features include: • Search weather by city • Real-time temperature and conditions • Weather icons • Clean and responsive UI (though basic) Try it here: 👉 https://lnkd.in/ea_SveTQ View code: 👉 https://lnkd.in/ervqjNiN More projects coming — currently building and improving daily 🚀 #FrontendDeveloper #JavaScript #WebDevelopment #BuildInPublic

Why does your page refresh the moment you hit submit? It is the browser's old-school behavior. In the pre-SPA era, browsers were designed to reload and send data to a server after a form submission. But in React, we handle that logic ourselves using state and APIs. This is where 'event.preventDefault()' comes in. By calling it in your 'onSubmit' handler, you tell the browser to stop that default reload. It allows your JavaScript to process the data, show a loading spinner, or update the UI without the user ever losing their place. It is the key to keeping your application feeling like a fast, seamless experience. It is not just for forms. You might use it on anchor tags to stop navigation when a link acts as a button, or on 'onContextMenu' to replace the standard right-click menu with a custom one. It is all about taking full ownership of the user experience and ensuring the browser doesn't step on your toes. #ReactJS #WebDevelopment #SoftwareEngineering #Javascript #Frontend #CodingTips