React Event Handling: Interactive UI with onClick, onChange & onSubmit

Common React Events Every Developer Should Know If you're learning React, understanding event handling is essential for building interactive user interfaces. Here are some of the most commonly used React events and when to use them. 1. onClick: Triggered when a user clicks an element. Commonly used for buttons, menus, and triggering actions. 2. onChange: Fires when the value of an input field changes. Mostly used in forms to capture user input. 3. onFocus: Occurs when an input field becomes active. Helpful for highlighting fields or showing hints. 4. onBlur: Happens when an input field loses focus. Often used for validation after the user leaves a field. 5. onMouseOver: Executes when the mouse moves over an element. Useful for hover effects, tooltips, or previews. 6. onMouseOut Triggered when the mouse leaves an element. Commonly paired with hover interactions. 7. onSubmit Invoked when a form is submitted. Used to handle form data before sending it to a server. 8. onKeyDown: Triggered when a keyboard key is pressed down. Useful for shortcuts or detecting specific keys. 9. onKeyUp: Fires when a keyboard key is released. Often used for live search or input validation. Why these events matter: React events allow developers to create dynamic and responsive applications by responding to user actions in real time. If you're learning React, mastering these events will make your UI much more interactive and user-friendly. #React #WebDevelopment #FrontendDevelopment #JavaScript #Coding #ReactJS #Programming

React Learning Series | Contd... #Day20: React 19 Activity Component (Canary/Experimental) Tired of losing component state when using conditional rendering? Or killing performance by hiding elements with CSS? 🚀 React 19 introduces Activity Component It Offers: ✅ State Preservation: <Activity mode="hidden"> keeps your component in the background. If a user typed in an input or moved a slider, that data stays exactly where they left it. ✅ Low-Priority Background Updates: While a component is hidden, React still allows it to re-render in response to prop changes, but it does so at a lower priority. ✅ Instant Restorations:  Because the DOM and state are preserved, switching back to visible feels nearly instant—no "loading" states or re-fetching data from scratch. ✅ Automatic Effect Cleanup:  When hidden, React automatically calls cleanup functions for useEffect and useLayoutEffect. This stops active subscriptions, timers, or video/audio playback while the user isn't looking, but "resumes" them instantly when made visible again. Best Use Cases: 👉 Tabbed Interfaces: Switch between "Home" and "Settings" without losing the user’s progress or form data. 👉 Modals & Sidebars: Hide transient UI without resetting scroll positions or open dropdowns. 👉 Pre-rendering: Silently render a page the user is likely to visit next in a hidden state so it's ready the moment they click. 👉 Media Previews: Pause background video/audio when hidden while keeping the playback position exactly where the user left off. #ReactJS #WebDevelopment #Frontend #React19 #Javascript #ProgrammingTips #WebDev

💡 Understanding action.payload in React useReducer When learning useReducer in React, one concept that often confuses beginners is action.payload. Once you understand it, your state management becomes much clearer. Let’s break it down simply. 📌 The Structure of an Action In useReducer, when we want to update state, we dispatch an action. An action is usually an object with two main properties: dispatch({ type: "deposit", payload: 100 }); type → describes what happened payload → contains the data needed to update the state Think of it like sending a message: 👉 type = the instruction 👉 payload = the information needed to execute that instruction 📌 Example in a Reducer function reducer(state, action) { switch (action.type) { case "deposit": return { ...state, balance: state.balance + action.payload }; case "withdraw": return { ...state, balance: state.balance - action.payload }; default: throw new Error("Unknown action"); } } When we dispatch: dispatch({ type: "deposit", payload: 200 }); The reducer receives the action and uses action.payload (200) to update the balance. 📌 Why payload Matters Without payload, the reducer wouldn't know what data to use when updating the state. payload can contain: Numbers Strings Objects Arrays Example: dispatch({ type: "addUser", payload: { name: "Tobi", role: "Developer" } }); 🚀 Key Takeaway A simple way to remember this: action.type → What happened action.payload → The data needed to handle it Understanding this pattern makes useReducer far more powerful and helps you write cleaner and more predictable state logic in React. 💬 What concepts in React took you the longest to understand when you started? #React #JavaScript #FrontendDevelopment #ReactHooks #WebDevelopment #LearningInPublic

🚀 Day 13 of My #React Learning Journey – #EventBindingMethods Today I explored different Event Binding Methods in React Functional Components and how they make handling user interactions simple and flexible. 🧩 Different Event Binding Methods 1️⃣ #Inline Function <button onClick={() => alert("Clicked!")}>Click</button> 💡 Quick and easy, but not recommended for complex logic. 2️⃣ #External Function (Recommended) const handleClick = () => alert("Clicked!"); <button onClick={handleClick}>Click</button> 💡 Clean, reusable, and best practice for real projects. 3️⃣ #Passing Arguments const greet = (name) => alert(`Hello, ${name}`); <button onClick={() => greet("Sharath")}>Greet</button> 💡 Useful when you need to pass dynamic data. ⚡ Key Insight ✔ Functional components don’t have “this” binding issues (unlike class components) ✔ Code becomes simpler and easier to maintain ✔ Makes React apps more interactive and dynamic Learning how to handle events properly is a big step toward building real-world React applications 💻✨ Excited to keep going deeper into React 🚀 #React #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #LearningJourney #10000 Coders

🚀 Day 16 of My JavaScript Journey Today was a powerful learning day 💻🔥 I explored some core JavaScript concepts that are extremely important for real-world applications. ✨ Topics I Covered: 🔹 Synchronous vs Asynchronous code 🔹 How the JavaScript Event Loop works 🔁 🔹 Why Callback Hell is a problem 😵 🔹 Creating Promises using "resolve" and "reject" 🤝 🔹 ".then()", ".catch()", ".finally()" methods 🔹 Sequential vs Parallel Promise execution ⚡ 🔹 Comparison of Promise utility methods 🔹 Real-world example: Food Delivery App (Zomato Clone 🍔) 🔹 API fetching using Promises 🌐 🔹 Error handling patterns 🚨 💡 Key Learning: Understanding asynchronous JavaScript is a game-changer 💯 Concepts like the Event Loop and Promises help write cleaner, more efficient, and scalable code. 🍽️ The food delivery app example helped me understand how multiple tasks like ordering, payment, and delivery can run efficiently using async concepts. 🔥 Growing step by step every day! Consistency is the key 🔑 #JavaScript #WebDevelopment #CodingJourney #DaysOfCode #AsyncJS #Promises #Learning #DeveloperLife

React Learning Series | Contd... #Day18: userEvent vs fireEvent (Stop Writing Unrealistic Tests) 🔺 While testing React apps using Jest + React Testing Library, choosing the right event utility matters more than you think. 👉 Two commonly used APIs: ✔️ fireEvent ✔️ userEvent Let’s understand with examples: Example 1: const input = screen.getByRole('textbox'); fireEvent.change(input, { target: { value: 'Hello' } }); 🔴 Problem: 👉 Directly mutates value 👉 Skips real user behavior 👉 No key events (keydown, keyup, etc.) This can lead to false-positive tests ❌ ====================================================== Example 2: const input = screen.getByRole('textbox'); await user.type(input, 'Hello'); ✅ Why this is better: 👉 Simulates real typing behavior 👉 Triggers full event sequence 👉 Handles async interactions naturally 🧠 Key Difference: fireEvent 👉 Low-level (manual event trigger) userEvent 👉 High-level (real user simulation) ✴️ When to use what? 🚀 Prefer userEvent for: 👉 typing 👉 clicking 👉 tab navigation 👉 accessibility testing 🚀 Use fireEvent only when: 👉 you need granular control 👉 simulating edge/rare DOM events #React #JavaScript #Frontend #Testing #Jest #RTL #WebDevelopment #CleanCode

🚀 Day 15 of My #React Learning Journey – #Functional vs #Class #Components Today I explored the difference between Functional Components and Class Components in React. 🧠 #FunctionalComponents ✔ Simple JavaScript functions that return JSX ✔ No render() method required ✔ Use React Hooks for state & lifecycle ✔ Less code, easier to read and maintain ✔ Preferred in modern React development 🧠 #ClassComponents ✔ Must extend React.Component ✔ Requires a render() method ✔ Uses this.state for state management ✔ Lifecycle methods like componentDidMount() ✔ More boilerplate and complex structure ⚡ Key Differences 🔹 State Management Functional → useState (Hooks) Class → this.state 🔹 Lifecycle Handling Functional → useEffect Class → lifecycle methods 🔹 Code Complexity Functional → Simple & clean Class → More complex 🔹 Performance & Usage Functional → More efficient & widely used today Class → Older approach (still useful but less common) 💡 My Takeaway: Functional components with Hooks have become the standard way of building React applications due to their simplicity and flexibility. Excited to keep learning and building more with React! 💻✨ #React #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #LearningJourney #10000 Coders

🚀 Day 20 of My #React Learning Journey – The #useEffect Hook Today I went deeper into one of the most important React Hooks — useEffect. 🧠 What is useEffect? useEffect() allows us to perform side effects in functional components such as: ✔ Fetching data from APIs ✔ Setting up timers ✔ Updating the DOM ✔ Cleaning up resources 💡 It runs after the component renders (after JSX is returned). ⚙️ Syntax useEffect(() => { // side effect code return () => { // cleanup code (optional) }; }, [dependencies]); 🧩 Parameters Explained 🔹 Effect Function 👉 Code that runs after rendering (your side effect) 🔹 Cleanup Function (Optional) 👉 Runs before component unmounts or before the next effect runs 👉 Useful for clearing timers, canceling API calls, etc. 🔹 Dependency Array 👉 Controls when the effect runs [] → Runs only once (on mount) [value] → Runs when value changes No dependency → Runs on every render ⚡ Key Takeaway The useEffect Hook is essential for handling real-world tasks like API calls, subscriptions, and cleanup logic in React apps. Excited to build more real-world features using useEffect! 💻✨ #React #JavaScript #ReactHooks #useEffect #FrontendDevelopment #WebDevelopment #LearningJourney #10000 Coders

🚀 Day 12 of My #React Learning Journey – #EventHandling in #FunctionalComponents Today I learned how event handling works in React functional components. React handles events similar to HTML, but with a few differences: 👉 Event names use camelCase (like onClick, onChange) 👉 We pass functions instead of strings 🔑 Common React Events 🔹 #onClick → Triggered when an element is clicked 🔹 #onChange → Triggered when input value changes 🔹 #onSubmit → Triggered when a form is submitted 🧩 Example 1 – onClick Event function ClickExample() { const handleClick = () => { alert("Button clicked!"); }; return <button onClick={handleClick}>Click Me</button>; } 💡 When the button is clicked, the handleClick function executes. 🧩 Example 2 – onChange Event import { useState } from "react"; function InputExample() { const [name, setName] = useState(""); const handleChange = (event) => { setName(event.target.value); }; return ( <div> <input type="text" placeholder="Enter name" onChange={handleChange} /> <p>Hello, {name}</p> </div> ); } 💡 As the user types, React updates the state and reflects it instantly in the UI. React event handling makes applications interactive and dynamic by connecting user actions with component logic. Excited to keep learning and building more interactive React applications! 💻✨ #React #JavaScript #ReactJS #FrontendDevelopment #WebDevelopment #LearningJourney #10000 Coders

One of the biggest realizations in my JavaScript journey so far — logic is not built by memorizing solutions. It is built by recognizing patterns. 💡 For a long time I thought good developers just ‘think better’. But the truth is simpler than that. They have seen enough patterns to recognize what a problem is really asking. Here is what I noticed: 🔹 Once you see a pattern once — your brain starts spotting it everywhere 🔹 Studying solutions is not cheating — it is pattern training 🔹 The more patterns you absorb, the faster your logic responds 🔹 Problem solving becomes less about intelligence and more about exposure This changed how I study completely. Now instead of just trying to solve every problem alone, I also study well-written solutions — not to copy, but to train my eye. To understand why that approach worked. To store that pattern. Logic is a language. And like any language — the more you read it, the better you speak it. Alhamdulillah for every realization that makes the path clearer. 🤍 #JavaScript #LogicBuilding #Algorithms #ProblemSolving #FrontEndDevelopment #freeCodeCamp #LearningInPublic #GrowthMindset #InterviewPrep #CareerGrowth