React Event Binding Methods: Inline, External, and Passing Arguments

🚀 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 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 17 of My #React Learning Journey – #Conditional_Rendering Today I learned about Conditional Rendering in React, a powerful concept used to display UI based on conditions. 🧠 What is Conditional Rendering? Conditional Rendering means showing different UI elements based on certain conditions. React supports: ✔ #if / #else ✔ #Ternary_operator (? :) ✔ #Logical_AND (&&) 🧩 i) Using if/else function UserStatus({ isLoggedIn }) { if (isLoggedIn) return <h2>Welcome Back!</h2>; else return <h2>Please Login!</h2>; } 🧩 ii) Using Ternary Operator function UserStatus({ isLoggedIn }) { return <h2>{isLoggedIn ? "Welcome Back!" : "Please Login!"}</h2>; } 💡 Most commonly used method in React! 🧩 iii) Using Logical AND (&&) function Notification({ hasMessage }) { return ( <div> <h2>Dashboard</h2> {hasMessage && <p>You have new notifications!</p>} </div> ); } 💡 Renders content only if condition is true. 🧩 Example – Toggle Login import { useState } from "react"; function LoginExample() { const [loggedIn, setLoggedIn] = useState(false); return ( <div> <h2>{loggedIn ? "Welcome User!" : "Please Login!"}</h2> <button onClick={() => setLoggedIn(!loggedIn)}> {loggedIn ? "Logout" : "Login"} </button> </div> ); } ⚡ Key Takeaway Conditional rendering helps build dynamic and interactive UIs by updating what users see based on logic. Excited to keep building smarter React apps! 💻✨ #React #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #LearningJourney #10000 Coders

🚀 Day 16 of My #React Learning Journey – #State_vs_Props Today I learned the difference between State and Props, two core concepts that control how data flows in React applications. 🧠 State vs Props (Quick Comparison) 🔹 Purpose State → Manage internal component data Props → Pass data from parent to child 🔹 Mutability State → Mutable (can be updated) Props → Immutable (read-only) 🔹 Ownership State → Owned by the component Props → Owned by the parent component 🔹 Access State → [state, setState] using Hooks Props → props or destructured {name} 🔹 Re-render State → Component re-renders when state updates Props → Re-render only when props change 🧩 Example – Using Props & State Together import { useState } from "react"; function User(props) { const [age, setAge] = useState(props.initialAge); return ( <div> <h2>Name: {props.name}</h2> <h3>Age: {age}</h3> <button onClick={() => setAge(age + 1)}>Increase Age</button> </div> ); } // App.jsx function App() { return <User name="Sharath" initialAge={22} />; } export default App; 💡 Here, props provide initial data, and state manages dynamic updates. ⚡ Key Takeaway 👉 Props = Data passed from parent (read-only) 👉 State = Data managed inside component (changeable) Understanding this difference is essential for building dynamic and scalable React applications. Excited to continue my React journey! 💻✨ #React #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #State #Props #LearningJourney #10000 Coders

🚀 Day 14 of My #React Learning Journey – #Props in #FunctionalComponents Today I learned about Props (Properties), a core concept in React used to make components dynamic and reusable. 🧠 What are Props? Props are inputs passed from a parent component to a child component. ✔ They are read-only ✔ Help in reusing components with different data ✔ Make UI dynamic and flexible 🧩 Example – #RegularProps function Greeting({ name }) { return <h2>Hello, {name}!</h2>; } // App.jsx function App() { return ( <> <Greeting name="Sharath" /> <Greeting name="React Student" /> </> ); } 💡 Same component, different outputs using props! 🧩 Example – #ChildrenProps props.children allows passing JSX or elements inside component tags. function Card({ children }) { return ( <div style={{ border: "1px solid gray", padding: "10px", margin: "10px" }}> {children} </div> ); } // App.jsx function App() { return ( <Card> <h2>This is inside a Card!</h2> <p>Children props allow flexible UI layouts.</p> </Card> ); } 💡 This makes components more flexible and customizable. Excited to keep learning and building more dynamic UIs with React! 💻✨ #React #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #Props #LearningJourney 10000 Coders 🚀

𝐃𝐚𝐲 𝟑 𝐨𝐟 𝐥𝐞𝐚𝐫𝐧𝐢𝐧𝐠 𝐫𝐞𝐚𝐜𝐭 Recently, I’ve been learning about 𝐑𝐞𝐚𝐜𝐭 𝐇𝐨𝐨𝐤𝐬, and it’s been a game changer for how I understand React. Hooks allow us to use React features inside functional components no need for class components. Here are three important hooks I’ve learned so far: - 𝐮𝐬𝐞𝐒𝐭𝐚𝐭𝐞() This is used to manage state (data) inside a component. Think of it as a way to store values that can change over time and when they change, React automatically updates the UI. Example: toggling a password field, updating form inputs, counters, etc. - 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭() This hook runs code after a component renders (either when it is created or updated). It takes two parameters: 𝟏) A function (what should run) 𝟮) A dependency array (controls when it runs) - If the dependency array is empty [] it runs only once (when the component is created) - If it has values, it runs whenever those values change This is useful for things like fetching data, running side effects, or reacting to changes in state. - 𝘂𝘀𝗲𝗥𝗲𝗳() This is used to directly access or reference a DOM element without manually selecting it. Instead of using methods like document.querySelector, React provides useRef to safely interact with elements. It can also store values without causing a re-render. Still learning and building, taking it one concept at a time #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #ReactHooks #LearnInPublic #CodingJourney #TechJourney

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

🚀 Learning Update | Consistency & Growth Here’s what I’ve been working on yesterday: 🔹 Improved Self-Introduction Refined my self-introduction based on feedback from an AI mock interview — focusing on clarity, structure, and impact. 🔹 React Application Development Built a React-based application using: Zustand for state management ShadCN for clean and modern UI components React Query for efficient data fetching & caching 🔹 JavaScript Practice Practiced problems ranging from basic to advanced concepts to strengthen core fundamentals 💪 🔹 Personal Growth Read 3 pages of The Power of Subconscious Mind to improve communication and mindset 🧠 Small improvements every day lead to big results over time. #ReactJS #JavaScript #WebDevelopment #LearningInPublic #GrowthMindset

𝐃𝐚𝐲 𝟏𝟓 𝐨𝐟 𝐦𝐲 𝟑𝟎-𝐃𝐚𝐲 𝐑𝐞𝐚𝐜𝐭.𝐣𝐬 𝐂𝐡𝐚𝐥𝐥𝐞𝐧𝐠𝐞 🚀 𝗣𝗲𝗿𝘀𝗶𝘀𝘁𝗲𝗻𝘁 𝗧𝗵𝗲𝗺𝗲 Today I implemented one of the most powerful concepts in React Custom Hooks and reusable logic. As part of my React.js learning, I built a 𝗣𝗲𝗿𝘀𝗶𝘀𝘁𝗲𝗻𝘁 𝗧𝗵𝗲𝗺𝗲 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝘂𝘀𝗶𝗻𝗴 𝗖𝗼𝗻𝘁𝗲𝘅𝘁 𝗔𝗣𝗜 + 𝗹𝗼𝗰𝗮𝗹𝗦𝘁𝗼𝗿𝗮𝗴𝗲. 𝗪𝗵𝗮𝘁 𝗜 𝗹𝗲𝗮𝗿𝗻𝗲𝗱: - Creating reusable logic in React - Managing global state using Context API - Persisting data using localStorage - Improving user experience with theme memory - Writing cleaner and scalable code 𝗣𝗿𝗼𝗷𝗲𝗰𝘁 𝗛𝗶𝗴𝗵𝗹𝗶𝗴𝗵𝘁𝘀: - Light/Dark mode toggle - Theme persistence after page refresh - Context-based global state management - Clean component-based architecture - Fully responsive UI This project helped me understand how real-world applications handle user preferences and global state efficiently. Step by step, I’m improving and moving closer to building production-ready React applications. #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #ReactHooks #CustomHooks #LearningInPublic #30DayReactChallenge

🚀 Day 19 of My #React Learning Journey – #Lifecycle_in_Functional_Components Today I explored how lifecycle methods work in functional components using the #useEffect Hook. 🧠 What is Lifecycle in React? In class components, we use lifecycle methods like: ✔ componentDidMount ✔ componentDidUpdate ✔ componentWillUnmount But in functional components, all these phases are handled using the powerful useEffect Hook. ⚛️ useEffect Handles 3 Phases 🔹 #Mounting (Component Created) Runs when the component loads for the first time. 🔹 #Updating (State/Props Change) Runs whenever state or props change. 🔹 #Unmounting (Component Removed) Used for cleanup like clearing timers or canceling API calls. 💡 Why useEffect is Important? ✔ Handles side effects (API calls, timers, subscriptions) ✔ Replaces multiple lifecycle methods with a single Hook ✔ Makes code cleaner and more manageable 🔥 Real-world Usage 👉 Data Fetching (API calls) 👉 Loading & Error Handling 👉 Cleanup using AbortController & intervals ⚡ Key Takeaway The useEffect Hook is the heart of lifecycle management in modern React and is essential for building real-world applications. Excited to go deeper into data fetching, cleanup logic, and advanced hooks! 💻✨ #React #JavaScript #ReactHooks #useEffect #FrontendDevelopment #WebDevelopment #LearningJourney #10000 Coders