React useEffect Hook and Side Effects Explained

𝗗𝗮𝘆 𝟰 𝗼𝗳 𝗹𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 Lately, I’ve been diving into React and I wanted to share a bit of what I’ve learned so far One of the first things that clicked for me was how to properly structure a React project. Instead of dumping everything in one place, I now organize my code into components and pages: - The components folder holds reusable UI pieces (like Navbar, Buttons, Cards, etc.) - The pages folder contains components that are specific to a particular page (like Home, Checkout, Orders) This makes the codebase cleaner and easier to scale as the project grows. I also started learning React routing, which is a game changer. It allows you to create multiple “pages” in a single-page application without needing multiple HTML files. - Routes act as a container that holds all your route definitions - Route is used to define a specific path and what component should render for that path For example, you can define different views like /, /checkout, /orders — all within the same app. Another interesting thing I learned is navigation using the Link component. Instead of using the normal <a> tag (which reloads the page), React Router provides <Link>: -It uses to instead of href -It allows smooth navigation without reloading the page This makes the app feel faster and more like a real application rather than a traditional website. Still early in my React journey, but things are starting to make more sense step by step. Looking forward to building more and improving 💪 #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #LearningInPublic #BeginnerDeveloper #BuildInPublic

🚀 Day 9 of My React Learning Journey: React Router & Navigation Today I learned how to handle navigation in React using React Router 👇 🔹 What is React Router? React Router is a library used to handle routing in React applications. It allows navigation between different pages without reloading the browser. 🔹 What is Navigation? Navigation means moving between different pages or components in an application using links. ⚔️ React Router vs Navigation React RouterNavigationLibrary for routingAction of moving between pagesUses components like BrowserRouter, RouteUses links like <Link>Enables SPA behaviorImproves user experienceHandles URL-based routingSwitches UI without reload🔹 Simple Example (Using Both Concepts) import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; function Home() { return <h1>Home Page 🏠</h1>; } function About() { return <h1>About Page ℹ️</h1>; } function App() { return ( <BrowserRouter> <nav> <Link to="/">Home</Link> |{" "} <Link to="/about">About</Link> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </BrowserRouter> ); } export default App; 💡 My Takeaway: React Router helps build single-page applications by enabling smooth navigation without page reloads. 📌 Next, I’ll be learning about API Calls in React! 👉 Follow my journey as I learn React step by step 🚀 #React #JavaScript #ReactRouter #Frontend #WebDevelopment #LearningInPublic #100DaysOfCode

🚀 Day 4 of My React Learning Journey: Props in React Today I learned about Props, which help components communicate with each other 👇 🔹 What are Props? Props (short for properties) are used to pass data from a parent component to a child component. They make components dynamic and reusable. 🔹 Why Props are Important? Enable data sharing between components 🔄 Make components reusable and flexible Help build dynamic UI Follow one-way data flow (parent → child) 🔹 Key Concept Props are read-only (immutable) and cannot be modified by the child component. 🔹 Simple Example function Greeting(props) { return <h1>Hello, {props.name} 👋</h1>; } function App() { return <Greeting name="Sanket" />; } 💡 My Takeaway: Props make components more powerful by allowing them to display different data based on input. 📌 Next, I’ll be learning about State in React! 👉 Follow my journey as I learn React step by step 🚀 #React #JavaScript #Frontend #WebDevelopment #LearningInPublic #100DaysOfCode

🚀 Day 11 of My React Learning Journey: Custom Hooks & Code Reusability After completing React basics, today I stepped into a slightly advanced concept — Custom Hooks 👇 🔹 What are Custom Hooks? Custom Hooks are reusable functions in React that allow us to extract and reuse logic across multiple components. 🔹 Why Code Reusability? Instead of repeating the same logic in different components, we can create a custom hook and reuse it anywhere—making code cleaner and maintainable. ⚔️ Custom Hooks vs Code Reusability Custom HooksCode ReusabilityUser-defined HooksConcept of reusing logicUses built-in Hooks (useState, useEffect)Reduces duplicate codeStarts with use (naming convention)Improves maintainabilityEncapsulates logicMakes code scalable🔹 Simple Example (Using Both Concepts) import { useState, useEffect } from "react"; // Custom Hook function useUsers() { const [users, setUsers] = useState([]); useEffect(() => { fetch("https://lnkd.in/dJhk5k3v") .then((res) => res.json()) .then((data) => setUsers(data)); }, []); return users; } // Component function App() { const users = useUsers(); return ( <div> <h1>Users 👥</h1> <ul> {users.map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> </div> ); } export default App; 💡 My Takeaway: Custom Hooks help reuse logic efficiently and make React applications cleaner and more scalable. 📌 Next, I’ll explore more advanced patterns and best practices in React! 👉 Follow my journey as I continue learning React 🚀 #React #JavaScript #CustomHooks #Frontend #WebDevelopment #LearningInPublic #100DaysOfCode

⚛️ React Rendering Made Simple 🚀 If you’re learning React and confused about 👉 “Where does React show my code?” Here’s the simple answer 👇 💡 Core Concept: React renders everything inside a root container 👉 <div id="root"></div> And then 👇 ⚡ createRoot() tells React where to display your app 🔥 What Happens Behind the Scenes: ✔ React finds the root element ✔ Renders your components inside it ✔ Updates UI automatically when data changes 🧠 Why This Matters: 👉 Cleaner structure 👉 Faster updates 👉 Better performance 💡 Pro Tip: Don’t just learn React… 👉 Understand how rendering works = next level 🔥 ❓ Question for you: Did you know React renders everything inside a root container? 💬 Comment “REACT” if you’re learning ❤️ Like if this helped 🔁 Share with your dev friends 👀 Follow me for daily coding & tech content 📌 More React basics coming — don’t miss it! #ReactJS #WebDevelopment #Frontend #JavaScript #LearnCoding #Developers #CodingJourney #100DaysOfCode #TechIndia 🚀

🚀 Day 5 of My React Learning Journey: State in React Today I learned about State, which makes React applications dynamic and interactive 👇 🔹 What is State? State is a built-in object in React used to store data that can change over time. When the state changes, the UI automatically updates (re-renders). 🔹 Why State is Important? Makes UI dynamic and interactive ⚡ Triggers re-render when data changes Helps manage component-specific data Used for user actions (clicks, inputs, etc.) 🔹 Key Concept State is mutable and managed inside the component using Hooks like useState. 🔹 Simple Example import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Count: {count} </button> ); } function App() { return <Counter />; } 💡 My Takeaway: State is what makes React apps come alive by updating the UI based on user interactions. 📌 Next, I’ll be learning about Event Handling in React! 👉 Follow my journey as I learn React step by step 🚀 #React #JavaScript #Frontend #WebDevelopment #LearningInPublic #100DaysOfCode

🚀 Starting My React Learning Journey This week I started Phase 2 of my MERN roadmap — React development. Instead of jumping straight into libraries or complex features, I'm focusing on understanding how React actually works under the hood. Two important ideas clicked for me in the first two days. 🧠 1. UI = Function of State In traditional JavaScript, we often manipulate the DOM manually. But React takes a different approach. When state changes → React re-runs the component → the UI updates automatically. This shifted my thinking from: “How do I update the DOM?” to “What state should the UI represent?” 🧩 2. React Apps Are Built as Component Trees Rather than writing one large UI file, React encourages breaking interfaces into small reusable components. Example structure: App ├ Header ├ NotesList │ └ NoteCard └ Footer Each component has a single responsibility, which makes applications easier to maintain and scale. For now I'm focusing on building a strong mental model of React before moving forward. Next step in my roadmap: JSX and Props. #React #WebDevelopment #MERNStack #LearningInPublic

⚡Day 1 of My React Learning Journey: What is React? I've started learning React today, and here's a simple breakdown What is React? React is a JavaScript library used to build dynamic and interactive user interfaces, especially for single-page applications (SPAs). Why is React so popular? Component-based architecture (reusable Ul parts) Virtual DOM for faster performance Easy to build scalable applications Strong community support Key Concept Instead of updating the entire page, React updates only the parts that change - making apps faster and smoother Simple Example function App() { } return <h1>Hello, React!</h1>; My Takeaway: React makes Ul development more structured and efficient compared to plain JavaScript. This is just the beginning-next I'll be learning about JSX!⚡ + Follow my journey as I learn React step by step #React #JavaScript #WebDevelopment #Frontend #LearningInPublic #100DaysOfCode

🚀 Day 6 of My React Learning Journey: Event Handling, Conditional Rendering & Lists Today I explored three important concepts that make React apps more dynamic and scalable 👇 🔹 What is Event Handling? Event handling allows React apps to respond to user actions like clicks, typing, etc., using events such as onClick, onChange. 🔹 What is Conditional Rendering? Conditional rendering lets us display different UI based on conditions (like login status or data). 🔹 What are Lists in React? Lists allow us to render multiple items dynamically using methods like map(). Each item should have a unique key. ⚔️ Concept Comparison Event HandlingConditional RenderingLists (map & keys)Handles user actionsControls what UI to showRenders multiple itemsUses events (onClick)Uses conditions (ternary)Uses map()Updates stateDepends on state/propsNeeds unique keyMakes app interactiveMakes UI dynamicMakes UI scalable🔹 Simple Example (Using All 3 Concepts) import { useState } from "react"; function App() { const [show, setShow] = useState(false); const users = ["Sanket", "Rahul", "Amit"]; return ( <div> {/* Event Handling */} <button onClick={() => setShow(!show)}> {show ? "Hide Users" : "Show Users"} </button> {/* Conditional Rendering + List */} {show && ( <ul> {users.map((user, index) => ( <li key={index}>{user}</li> ))} </ul> )} </div> ); } export default App; 💡 My Takeaway: Event handling makes apps interactive, conditional rendering controls what users see, and lists help render dynamic data efficiently. 📌 Next, I’ll be learning about Forms & Controlled Components in React! 👉 Follow my journey as I learn React step by step 🚀 #React #JavaScript #Frontend #WebDevelopment #LearningInPublic #100DaysOfCode

Where to Start with Next.js? Starting your journey with Next.js might feel confusing at first — but it’s actually simple when you follow the right steps! ✨ Step 1: Learn the Basics Make sure you understand HTML, CSS, and JavaScript. Knowing React is a big plus! ⚙️ Step 2: Set Up Your Environment Install Node.js, then create your app with: npx create-next-app@latest 📁 Step 3: Understand the Structure Explore folders like pages, app, and components to see how everything works. 🌐 Step 4: Learn Routing Next.js has built-in routing — just create files, and routes are ready! 🚀 Step 5: Build Small Projects Start with a simple blog, portfolio, or landing page to practice. 💡 Step 6: Explore Advanced Features Learn about Server-Side Rendering (SSR), Static Site Generation (SSG), and API routes. 🔥 The best way to learn Next.js is by building. Don’t wait for perfection — just start coding! 💬 So, when are you starting your Next.js journey? #NextJS #React #WebDevelopment #Coding #LearnToCode