Why Hooks?: Hooks are functions that let us “hook into” state and lifecycle functionality in function components. Hooks allow us to: reuse stateful logic between components simplify and organize our code to separate concerns, rather allowing unrelated data to get tangled up together avoid confusion around the behavior of the this keyword avoid class constructors, binding methods, and related advanced JavaScript techniques Rules for Using Hooks There are two main rules to keep in mind when using hooks: Only call hooks from React function components. Only call hooks at the top level, to be sure that hooks are called in the same order each time a component renders. Common mistakes to avoid are calling hooks inside of loops, conditions, or nested functions. useEffect(() => { if (userName !== '') {   localStorage.setItem('savedUserName', userName); } }); Side Effects The primary purpose of a React component is to return some JSX to be rendered. Often, it is helpful for a ...

We're using React's useState and useEffect to manage and track two different emotional states in our component — a primary emotion and a secondary emotion . 1. Managing State We'll define two separate state variables: emotion (primary) secondary (secondary emotion, like background feelings) const [emotion, setEmotion] = useState("fatigue"); const [secondary, setSecondary] = useState("tired"); You can feel multiple emotions at once, like being both exhausted and grateful — so we model that with dual state. 2. Buttons to Change Emotions We add buttons to update each state using the corresponding setter functions. <button onClick={() => setEmotion("sad")}>Sad</button> <button onClick={() => setEmotion("excited")}>Excited</button> <button onClick={() => setSecondary("grateful")}>Grateful</button> 3. Tracking Changes with useEffect Now we want to react to ch...

⚛️ React useEffect Hook – Explained with Example 📌 What is useEffect ? The useEffect Hook lets you perform side effects in function components. 🧠 Side effects include: Data fetching Subscriptions Timer functions Manual DOM manipulations Logging 🧾 Syntax useEffect(<callback>, <dependencyArray>); callback : a function with the side effect logic. dependencyArray : optional, determines when to re-run the effect. ✅ Common useEffect Use Cases ✅ 1. Run on Every Render useEffect(() => { console.log("Component rendered or re-rendered"); }); No dependency array → runs after every render . ✅ 2. Run Only Once on Mount useEffect(() => { console.log("Component mounted"); }, []); Empty dependency array [] → runs only once after initial render. ✅ 3. Run When a State Changes useEffect(() => { console.log(`Emotion changed to: ${emotion}`); }, [emotion]); The effect will re-run only when the em...

🧠 React useState Hook – Complete Guide 🔍 What is useState ? The useState Hook lets you add React state to function components. State refers to data or properties your app needs to track or respond to. ✅ Steps to Use useState 🟢 Step 1: Import useState import { useState } from "react"; 🟢 Step 2: Initialize State in Your Component function FavoriteColor() { const [color, setColor] = useState(""); // initial state is an empty string } color → current state value setColor → function to update the state 🟢 Step 3: Use State in JSX function FavoriteColor() { const [color, setColor] = useState("red"); return <h1>My favorite color is {color}!</h1>; } 🟢 Step 4: Update State via User Interaction function FavoriteColor() { const [color, setColor] = useState("red"); return ( <> <h1>My favorite color is {color}!</h1> <button onClick={() => setColor("blue...