Hritwik Tiwary’s Post

Day 14/30 — React Journey React ⚛️ - Top 5 Mistakes Beginners Make 🚫 (I made all of them…) 1. Thinking React = HTML + JS 😵 React is not just syntax — it’s a component-based architecture + state-driven UI. If you don’t understand how state drives rendering, you’ll keep patching bugs instead of building systems. 👉 Shift mindset: UI = function(state) 2. Overusing State Everywhere 🔥 Beginners store everything in state → leads to unnecessary re-renders + messy logic. 👉 Rule: If it doesn’t change → don’t use state If it can be derived → compute, don’t store 3. Ignoring Component Reusability 🧩 Writing large, copy-pasted components kills scalability. 👉 Think like this: Break UI into small reusable blocks Each component = single responsibility 4. Misunderstanding useEffect ⚠️ Using useEffect for everything = biggest trap. 👉 Reality: It’s for side effects only (API calls, subscriptions) Not for basic logic or derived state Wrong use = bugs + infinite loops 5. Not Understanding Keys in Lists 🔑 Using index as key = silent performance + UI bugs. 👉 Why it matters: React uses keys to track changes efficiently Bad keys = wrong updates + broken UI behavior ⚡ Final Insight Most React struggles aren’t syntax issues… They’re thinking problems. Master these → you jump ahead of 90% 🚀 Save this before your next bug hunt 🔖

I noticed I was writing the same useEffect fetch logic in five different places. It made my components messy and hard to read. Today, I’m documenting how to build my own tools: Custom React Hooks. Instead of cramming 50 lines of logic into a visual component, I’m learning to extract that logic into its own function. Here is how I’m thinking about it: 1) Logic vs. UI: A component’s main job is rendering the interface. By moving the heavy lifting (like API fetching or form handling) into a custom hook, the UI code stays clean and readable. 2) The "use" Rule: These are just JavaScript functions, but they must start with the word "use" (like useFetch or useAuth). This tells React to follow the official rules of hooks. 3) Building a Toolbox: I practiced with a useWindowSize hook. It tracks the screen width and height using useState and useEffect, then returns those values so I can use them anywhere with just one line of code. Why professionals love this: It makes code reusable across different projects and much easier to test. I am still learning the ropes, but modular thinking is making my projects feel way more advanced. Tomorrow, I’m looking at the "bank of logic": Mastering useReducer! Question for you: What is the one piece of logic you find yourself copy-pasting the most? Is it a fetch call, a form handler, or something else? #CodeWithWajid #ReactJS #WebDevelopment #30DaysOfCode #LearningToCode #BuildingInPublic #CustomHooks #CleanCode

🚀 Memoization in React — When useMemo & useCallback Actually Matter Most developers learn useMemo and useCallback… 👉 But very few understand when to use them correctly And that’s where performance is won (or lost). 💡 What is Memoization? Memoization is an optimization technique: 👉 Cache the result → Avoid recomputation In React, it helps prevent: Expensive calculations Unnecessary re-renders Function re-creations ⚙️ The Real Problem Every render in React: ❌ Recreates functions ❌ Recomputes values ❌ Triggers child re-renders 👉 Even if nothing actually changed 🔥 Where useMemo Helps const filteredData = useMemo(() => { return data.filter(item => item.active); }, [data]); ✅ Avoids expensive recalculations ❌ But useless for cheap operations 🔥 Where useCallback Helps const handleClick = useCallback(() => { console.log("Clicked"); }, []); 👉 Useful only when: Passing to child components Used with React.memo 🧠 The Real Optimization Rule 👉 Memoization only matters when: ✔ Expensive computation exists ✔ Reference equality affects rendering ✔ Component re-renders are costly ⚠️ Biggest Mistake Developers Make // ❌ Over-optimization const value = useMemo(() => count + 1, [count]); 👉 You added complexity without benefit 🔥 When NOT to use Memoization ❌ Simple calculations ❌ Small components ❌ No performance issue 👉 Premature optimization = bad code 💬 Pro Insight (Senior-Level Thinking) React is already optimized. 👉 Your job is NOT to optimize everything 👉 Your job is to optimize bottlenecks only 📌 Save this post & follow for more deep frontend insights! 📅 Day 16/100 #ReactJS #FrontendDevelopment #JavaScript #PerformanceOptimization #ReactHooks #SoftwareEngineering #100DaysOfCode 🚀

Why Lifting State Up is Important in React? In React, one of the most powerful concepts you’ll come across is "Lifting State Up". It might sound complex at first, but once you get it, your component design improves instantly. 1️⃣What is Lifting State Up? Lifting state up means moving state from a child component to its closest common parent so that multiple components can share and stay in sync with the same data. 2️⃣ Why is it Important? 1️⃣ Single Source of Truth When state is managed in one place, your data stays consistent across components. No more bugs caused by mismatched states. 2️⃣ Better Data Flow React follows a unidirectional data flow (parent ➝ child). Lifting state up helps you stay aligned with React’s core philosophy. 3️⃣ Easier State Management Instead of managing multiple states in different components, you centralize it, making your app easier to debug and maintain. 4️⃣ Component Communication Made Easy Sibling components can’t talk directly. But if you lift the state to a parent, they can communicate via props. 3️⃣Simple Example Imagine two components: -SearchBar -ResultsList Both need access to the same search query. 🔍Instead of keeping state inside SearchBar, lift it up to the parent: -Parent holds query -Pass query & setQuery to SearchBar -Pass query to ResultsList -Now both components stay perfectly in sync. 4️⃣When NOT to Lift State When the state is only used in one component When lifting makes your component tree unnecessarily complex Rule of thumb: Lift state only as much as needed, not more. Final Thoughts Mastering this concept will make you a better React developer. It’s not just about writing code, it’s about designing clean, scalable systems. What do you think? Have you faced issues that were solved by lifting state up? Let’s discuss #React #Frontend #WebDevelopment #JavaScript #ReactJS #Coding

🤔 Wait… shouldn’t variables be deleted? How is it possible that a function still remembers a variable…even after the function where it was created has already finished executing? 😳 👉 Sounds impossible, right? 🚀 JavaScript’s one of the most powerful concepts: Closures 🧠 What is a Closure? A closure is created when a function is defined inside another function, and the inner function can access variables from its parent scope — even after the parent function has finished execution. ⚡Shouldn’t variables be deleted? Normally, yes ✅ 👉 Once a function finishes, its local variables are removed from memory (thanks to garbage collection) But closures change the game 👇 👉 If an inner function is still using those variables, JavaScript keeps them alive in memory 🔍 What’s really happening? The inner function “closes over” its parent’s variables 💡 That’s why it’s called a closure Even though the outer function is done… the inner function still has access to its scope 😮 🔐 Why Closures Matter (Real Use Cases) Closures aren’t just theory — they’re used everywhere: 👉 Encapsulation (Private Variables) Keep data hidden from global scope 👉 Debouncing & Throttling Control function execution (very common in React apps) 👉 State management patterns Maintain data across function calls 💡 Real Developer Insight Closures are powerful… but can be tricky 👉They can also hold memory longer than expected 👉 Misuse can lead to memory leaks 🚀 Final Thought: Most developers use closures unknowingly… But great developers understand how and why they work. #JavaScript #FrontendDevelopment #WebDevelopment #Closures #CodingTips #LearnJavaScript #BuildInPublic #100DaysOfCode #LearnInPublic

⚛️ Zustand: A Simpler Way to Manage State in React While exploring state management beyond Context API and Redux, I recently came across Zustand. It’s a lightweight state management library that feels surprisingly simple. Here’s what stood out to me 👇 🔹 What is Zustand? Zustand is a minimal state management library for React that allows you to create a global store without boilerplate. 🔹 Simple example import { create } from "zustand"; const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), })); Now you can use it anywhere: const count = useStore((state) => state.count); 🔹 Why it feels different ✅ Very minimal setup ✅ No providers needed ✅ Easy to understand ✅ Less boilerplate compared to Redux 🔹 When to use it • Small to medium projects • When Redux feels too heavy • When you want simple global state 💡 One thing I’ve learned: Not every project needs complex state management — sometimes simpler tools lead to better developer experience. Curious to hear from other developers 👇 Have you tried Zustand or any other modern state management tools? #reactjs #frontenddevelopment #javascript #webdevelopment #softwareengineering #developers

🚀 **State Management in React — Explained with a Real-Life Example** Imagine your home 🏠 Now think: * Your fridge stores food 🍎 * Your wardrobe stores clothes 👕 * Your wallet stores money 💰 Everything has its own place, and you know exactly where to find it when needed. 👉 That’s exactly what State Management in React is. --- 🔍 What is State? 👉 State = Data that changes over time and controls your UI 📌 Example: * User login status * Cart items * Theme (dark/light mode) --- ⚡ The Problem (Without Proper State Management) Imagine: ❌ You keep everything randomly in one room ❌ You forget where things are ❌ You keep asking others again and again 👉 That’s what happens when state is messy in React: * Props drilling 😓 * Unnecessary re-renders * Hard to debug --- ✅ The Right Approach 1. Local State (useState) 👉 Like keeping things in your own room const [count, setCount] = useState(0); 💡 Best for small, component-level data --- 2. Lifting State Up 👉 Like keeping shared items in a common room 💡 When multiple components need same data --- 3. Global State (Redux / Zustand) 👉 Like a central storage (locker) for the whole house 💡 Best for: * Auth data * User profile * App-wide settings --- ⚠️ Common Mistakes ❌ Storing everything in global state ❌ Too much prop drilling ❌ Not structuring state properly --- 🔥 Pro Tip 👉 Ask yourself before storing state: “Who needs this data?” * Only this component → Local state * Few components → Lift state * Whole app → Global state --- 🔍 🎯 Final Thought Good state management = Clean code + Better performance 🚀 Because in real life: 👉 Organized home = Peaceful life 👉 Messy home = Daily stress 😅 --- 💬 What do you prefer for state management — Context API, Redux, or Zustand? #ReactJS #StateManagement #FrontendDevelopment #JavaScript #WebDev #CodingTips

𝗥𝗲𝗮𝗰𝘁 𝟮𝟬𝟮𝟲 𝗥𝗼𝗮𝗱𝗺𝗮𝗽: 𝗙𝗿𝗼𝗺 𝗝𝗦 𝘁𝗼 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻 Stop asking what React is. Learn what to ship. Modern apps need more than basic hooks. Follow this roadmap in 4 to 12 weeks. Step 1: Modern JavaScript React punishes poor JS skills. Learn these: - ES Modules - Async and await - map, filter, reduce - Destructuring and spread - Immutability - Basic DOM events Task: Build a data dashboard in plain JS. Fetch JSON and render a list. Step 2: Core React Build predictable UI. Focus on: - Props and composition - useState and derived state - useEffect for external sync - Stable keys for lists - Controlled forms - Custom hooks Task: Build a CRUD app for notes or tasks. Step 3: Frameworks Learn why frameworks exist. Study: - Nested routing - Caching and optimistic updates - CSR vs SSR vs streaming - Server Components Task: Build an app skeleton with auth and a dashboard. Step 4: Production Quality Make code maintainable. Use: - TypeScript for props and APIs - Component tests for behavior - Linting for consistency - Code-splitting for speed Task: Add TypeScript and tests to your CRUD app. Build these for your portfolio: - Admin dashboard with filters - Content editor with autosave - E-commerce cart and checkout Learning Tip: Pick one course. Use docs to build. Projects build judgment. Source: https://lnkd.in/g3qmZs6e

⚛️ 𝗜𝗺𝗽𝗿𝗼𝘃𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 — 𝗨𝘀𝗶𝗻𝗴 𝗖𝗼𝗱𝗲 𝗦𝗽𝗹𝗶𝘁𝘁𝗶𝗻𝗴 As React applications grow, bundle size increases — which directly impacts initial load time. Common problem: • large JS bundle • slow first load • unnecessary code loaded upfront A better production approach is 𝗖𝗼𝗱𝗲 𝗦𝗽𝗹𝗶𝘁𝘁𝗶𝗻𝗴. ❌ 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝗖𝗼𝗱𝗲 𝗦𝗽𝗹𝗶𝘁𝘁𝗶𝗻𝗴 𝘪𝘮𝘱𝘰𝘳𝘵 𝘋𝘢𝘴𝘩𝘣𝘰𝘢𝘳𝘥 𝘧𝘳𝘰𝘮 "./𝘋𝘢𝘴𝘩𝘣𝘰𝘢𝘳𝘥"; 𝘪𝘮𝘱𝘰𝘳𝘵 𝘙𝘦𝘱𝘰𝘳𝘵𝘴 𝘧𝘳𝘰𝘮 "./𝘙𝘦𝘱𝘰𝘳𝘵𝘴"; 𝘪𝘮𝘱𝘰𝘳𝘵 𝘚𝘦𝘵𝘵𝘪𝘯𝘨𝘴 𝘧𝘳𝘰𝘮 "./𝘚𝘦𝘵𝘵𝘪𝘯𝘨𝘴"; All components load upfront — even if not used immediately. ❌ 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝗖𝗼𝗱𝗲 𝗦𝗽𝗹𝗶𝘁𝘁𝗶𝗻𝗴 𝘪𝘮𝘱𝘰𝘳𝘵 { 𝘭𝘢𝘻𝘺, 𝘚𝘶𝘴𝘱𝘦𝘯𝘴𝘦 } 𝘧𝘳𝘰𝘮 "𝘳𝘦𝘢𝘤𝘵"; 𝘤𝘰𝘯𝘴𝘵 𝘋𝘢𝘴𝘩𝘣𝘰𝘢𝘳𝘥 = 𝘭𝘢𝘻𝘺(() => 𝘪𝘮𝘱𝘰𝘳𝘵("./𝘋𝘢𝘴𝘩𝘣𝘰𝘢𝘳𝘥")); 𝘤𝘰𝘯𝘴𝘵 𝘙𝘦𝘱𝘰𝘳𝘵𝘴 = 𝘭𝘢𝘻𝘺(() => 𝘪𝘮𝘱𝘰𝘳𝘵("./𝘙𝘦𝘱𝘰𝘳𝘵𝘴")); 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘈𝘱𝘱() {   𝘳𝘦𝘵𝘶𝘳𝘯 (     <𝘚𝘶𝘴𝘱𝘦𝘯𝘴𝘦 𝘧𝘢𝘭𝘭𝘣𝘢𝘤𝘬={<𝘱>𝘓𝘰𝘢𝘥𝘪𝘯𝘨...</𝘱>}>       <𝘋𝘢𝘴𝘩𝘣𝘰𝘢𝘳𝘥 />       <𝘙𝘦𝘱𝘰𝘳𝘵𝘴 />     </𝘚𝘶𝘴𝘱𝘦𝘯𝘴𝘦>   ); } Now components load 𝗼𝗻𝗹𝘆 𝘄𝗵𝗲𝗻 𝗻𝗲𝗲𝗱𝗲𝗱. 📌 Where this helps most: • large dashboards • admin panels • multi-page apps • heavy third-party libraries 📌 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻 𝗕𝗲𝗻𝗲𝗳𝗶𝘁𝘀: • faster initial load • reduced bundle size • better performance • improved user experience 📌 𝗕𝗲𝘀𝘁 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲𝘀: • split at route level • avoid over-splitting • use meaningful fallbacks • monitor bundle size Loading everything at once works — but splitting wisely improves performance significantly. 💬 Curious — do you apply code splitting at route level or component level? #ReactJS #CodeSplitting #Performance #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #Optimization

Understanding the Practical Role of Hooks and Utils in React Development. When building scalable applications in React, organizing your logic properly is just as important as writing functional code. Two key concepts that help achieve this are Hooks and Utils — and understanding their roles can significantly improve your codebase. 🔹 Hooks: Reusable Stateful Logic Hooks allow you to extract and reuse logic that involves state or lifecycle behavior across multiple components. Instead of duplicating code, you encapsulate it into a custom hook. This leads to: - Cleaner components; - Better separation of concerns; - Easier testing and maintenance; Example use cases: - Fetching data from APIs; - Managing form state; - Handling authentication logic; 🔹 Utils: Reusable Pure Functions Utils are simple helper functions that do not depend on React. They are typically stateless and focused on performing specific tasks. This makes them ideal for: - Formatting data (dates, currency, strings); - Performing calculations; - Validating inputs; Key difference: If your logic depends on React features like state or effects → use a Hook. If it's a generic, reusable function → use a Util. Why this matters: Separating logic this way keeps your codebase modular, readable, and easier to scale — especially in larger projects where maintainability becomes critical. How do you usually organize your React projects? Do you rely heavily on custom hooks, or keep things simple with utils? #React #JavaScript #WebDevelopment #Frontend #CleanCode #SoftwareEngineering