React Performance Optimization with useMemo useCallback and React.memo

🚀 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 17 of My React Learning Journey Today I explored something that makes React apps feel fast, smooth, and professional ⚡ 💡 What I learned today: • Lazy Loading • Suspense & Fallback UI • A glimpse of TanStack Query 🧠 What clicked for me: Not everything should load at once. 👉 Load only what is needed… when it is needed. ⚙️ Key Concepts: 🔹 Lazy Loading → Load components only when required 🔹 Suspense → Handle loading states gracefully 🔹 Fallback UI → Show something meaningful while content loads 🌐 Glimpse of TanStack Query: This opened a new perspective 👀 👉 Data fetching can be: • Smarter • Cached • Managed efficiently 🔥 Big Realization: Performance is not just about speed… 👉 It’s about user experience 📈 Mindset Shift: Before: → “Load everything at once” Now: → “Load only what improves user experience” 🚀 What’s next: • Apply lazy loading in my projects • Create better loading experiences • Dive deeper into TanStack Query 💡 Every day I’m moving from: Building apps → Making them efficient & scalable If you’re also learning or building something exciting, let’s connect 🤝 Devendra Dhote Sheryians Coding School #React #JavaScript #FrontendDevelopment #WebDevelopment #Performance #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 8 of My React Learning Journey: useEffect & Side Effects Today I learned about useEffect, one of the most important React Hooks 👇 🔹 What is useEffect? useEffect is a React Hook used to perform side effects in functional components, such as fetching data, updating the DOM, or running code after rendering. 🔹 What are Side Effects? Side effects are operations that affect something outside the component, like API calls, timers, or logging. ⚔️ useEffect vs Side Effects useEffect Side Effects React Hook External operationsRuns after render Happens outside UI Controlled using dependency array Includes API calls, timers, etc. Manages lifecycle behavior Needs control to avoid bugs🔹 Simple Example (Using Both Concepts) import { useState, useEffect } from "react"; function App() { const [count, setCount] = useState(0); useEffect(() => { document.title = `Count: ${count}`; }, [count]); return ( <div> <h1>Count: {count}</h1> <button onClick={() => setCount(count + 1)}> Increment </button> </div> ); } export default App; 💡 My Takeaway: useEffect helps manage side effects in React and gives control over when code should run. 📌 Next, I’ll be learning about React Routing (React Router)! 👉 Follow my journey as I learn React step by step 🚀 #React #JavaScript #useEffect #Frontend #WebDevelopment #LearningInPublic #100DaysOfCode

Next.js Learning Journey with Hitesh Choudhary 🚀 Diving into Next.js — beyond just UI. Started learning Next.js and quickly realized… it’s not just frontend anymore 👀 🧱 What I explored: ✅ Folder structure (app router mindset 🧠) ✅ Building a proper dev routine ✅ Schema validation with Zod ✅ Understanding how DB actually works ✅ Connecting & writing backend logic ✅ Email service integration 📩 ✅ Clean code separation (finally making sense 💡) 🤯 Realization 👉 Real-world apps ≠ just UI & animations 👉 It’s about structure, flow, and scalability 📌 Current Focus Writing cleaner code Thinking like a system, not just a developer Connecting all moving parts together Still early, but things are starting to click ⚡ socials 🌍 🐈 GitHub - https://lnkd.in/dVdN4rsW webtree - https://lnkd.in/dbxaXy-Q X - https://lnkd.in/dDH7eBmh ig - https://lnkd.in/dGfyveGh #NextJS #WebDevelopment #FullStackJourney #ReactJS #LearningInPublic #Developers #BuildInPublic

🚀 Day 14 of My React Learning Journey Today was one of those classes where everything started to connect together 🔥 🌐 What I learned today: • Data Routing • Nested Routing • Dynamic Routing 🧠 What clicked for me: Routing is not just about switching pages… 👉 It’s about structuring your entire application. ⚡ Key Understandings: 🔹 Data Routing → Load data before rendering the page 🔹 Nested Routing → Build layouts inside layouts (real app structure) 🔹 Dynamic Routing → Create scalable pages using data 💡 Big Realization: These are not separate concepts… 👉 They work together to build real-world applications 📈 Mindset Shift: Before: → “How do I navigate between pages?” Now: → “How do I structure and scale my app?” 🚀 What’s next: I’m excited to: • Apply all of this in upcoming projects • Build more structured & scalable apps • Improve my understanding through real use cases 💭 Final Thought: Today wasn’t just a class… It was a step closer to becoming a better frontend developer If you’re also learning or building something exciting, let’s connect 🤝 Devendra Dhote Sheryians Coding School #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #100DaysOfCode #ReactRouter

🚀 Day 3 of My React Learning Journey: Components in React Today I learned about Components, the building blocks of React applications 👇 🔹 What is a Component? A component is a reusable and independent piece of UI. It can be anything like a button, header, or even a full page. 🔹 Why Components are Important? Makes UI reusable ♻️ Keeps code clean and organized Helps break complex UI into smaller parts Improves scalability of applications 🔹 Key Concept React applications are built by combining multiple components together. 🔹 Simple Example function Welcome() { return <h1>Hello, User 👋</h1>; } function App() { return <Welcome />; } 💡 My Takeaway: Components make React powerful by allowing us to build reusable and modular UI. 📌 Next, I’ll be learning about Props in React! 👉 Follow my journey as I learn React step by step 🚀 #React #JavaScript #Frontend #WebDevelopment #LearningInPublic #100DaysOfCode

🔁 Flutter Learning: Code Reusability Matters One thing I improved in my development process: 👉 Avoid writing the same code again and again. Earlier, I used to duplicate code for similar UI and logic. But in real projects, this creates: * Hard-to-maintain code * More chances of bugs * Slower development ✅ What I follow now: * Create reusable widgets * Write common utility functions * Keep code modular 👉 Result: * Faster development * Cleaner codebase * Easier maintenance 🚀 Good developers don’t just write code, they reuse it smartly 👍 #Flutter #CleanCode #Reusability #MobileDevelopment #Developers

💡 Flutter Learning: Writing Clean Code Matters While working on projects, I realized one thing: 👉 Code should be easy to read, not just work. Sometimes we focus only on making things work, but ignore readability. ✅ What I follow now: * Use meaningful variable and function names * Break large widgets into smaller reusable widgets * Keep UI and logic separate 👉 Result: * Easier to maintain code * Faster debugging * Better team collaboration Clean code is not extra work, it saves time in the long run 🚀 #Flutter #CleanCode #BestPractices #MobileDevelopment #Developers