React 19 Simplifies Code with use() Hook

any vs unknown vs Generics in TypeScript Most developers know these exist. Very few know when to use which. Let’s break it down clearly 👇 🔴 1️⃣ any — The TypeScript Killer let value: any = "Hello"; value.toFixed(); // ✅ No error Why ? --> Because any disables type checking. No safety. No IntelliSense. No protection. 👉 any = “Trust me bro.” Use it too much… You’re back to JavaScript. 🟡 2️⃣ unknown — The Safe any let value: unknown = "Hello"; value.toUpperCase(); // ❌ Error TypeScript says: “Prove what it is first.” You must narrow it: if (typeof value === "string") { value.toUpperCase(); // ✅ Safe } ✔ Type-safe ✔ Forces validation ✔ Best for external/unsafe data 👉 unknown = “I don’t know yet — prove it.” 🟢 3️⃣ Generics — Flexible AND Safe function identity<T>(value: T): T { return value; } Now: const result = identity("Hello"); result.toUpperCase(); // ✅ result.toFixed(); // ❌ Type is preserved. Flexible. Reusable. Fully typed. 👉 Generics = “I don’t know the type yet, but I’ll preserve it.” 🧠 Core Difference:-> Feature | any | unknown | GenericType safety-> |❌ None | ✅ Yes | ✅ Yes Requires narrowing->| ❌ | ✅ | ❌ Preserves type info -> | ❌ | ❌ | ✅ Best for -> | Quick hacks | External data | Reusable logic 🎯 When To Use What? ✔ Use any → Rarely (migration, temporary fixes) ✔ Use unknown → API responses, user input, unsafe data ✔ Use Generics → Libraries, reusable functions, scalable systems 💎 Senior Developer Insight any - avoids the problem. unknown - forces you to handle the problem. Generics - solve the problem elegantly. That’s the maturity ladder in TypeScript. Be honest… How often do you still reach for any? 👀 Let’s discuss 👇 #TypeScript #JavaScript #FrontendDevelopment #CleanCode #SoftwareEngineering #WebDevelopment #LearnInPublic #ReactJS 🚀

When I started working with APIs in React, async/await made the code much easier to understand. Instead of chaining multiple .then() methods, async/await lets us write asynchronous code in a way that looks more like normal synchronous code. In API calling, async is used to define a function that returns a promise, and await pauses the execution of that function until the promise is resolved. Example: const fetchUsers = async () => { try { const response = await fetch("https://lnkd.in/dDNE8kTr"); const data = await response.json(); console.log(data); } catch (error) { console.error("Error fetching data:", error); } }; Here’s what happens: fetchUsers is an asynchronous function. await fetch(...) waits for the API response. await response.json() waits for the JSON data to be converted. try/catch helps handle errors gracefully. Why use async/await in React API calling? Cleaner and more readable code Easier error handling Better flow when working with multiple async operations Understanding async/await is a small step that makes a big difference in writing better React code. #ReactJS #JavaScript #WebDevelopment #FrontendDevelopment #API #AsyncAwait #Programming #Coding

🟨 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗗𝗮𝘆 𝟱𝟰: 𝗧𝗵𝗲 .sort() 𝗠𝘂𝘁𝗮𝘁𝗶𝗼𝗻 𝗧𝗿𝗮𝗽 (𝗥𝗲𝗮𝗰𝘁 𝗦𝘁𝗮𝘁𝗲 𝗕𝘂𝗴) In JavaScript, .sort() looks harmless — but in React apps it can break your UI with a confusing error. 🔹 𝗧𝗵𝗲 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 𝗜 𝗙𝗮𝗰𝗲𝗱 While rendering a list, I sorted the data directly before mapping. Everything worked… until this error appeared: ❌ 𝘊𝘢𝘯𝘯𝘰𝘵 𝘢𝘴𝘴𝘪𝘨𝘯 𝘵𝘰 𝘳𝘦𝘢𝘥 𝘰𝘯𝘭𝘺 𝘱𝘳𝘰𝘱𝘦𝘳𝘵𝘺 '0' 𝘰𝘧 𝘰𝘣𝘫𝘦𝘤𝘵 '[𝘰𝘣𝘫𝘦𝘤𝘵 𝘈𝘳𝘳𝘢𝘺]' 🔹 𝗪𝗵𝘆 𝗧𝗵𝗶𝘀 𝗛𝗮𝗽𝗽𝗲𝗻𝘀 .sort() mutates the original array. In React: • State and props are treated as immutable • Libraries like Redux / React Query may freeze data • Mutating them directly can cause runtime errors 🔹 𝗧𝗵𝗲 𝗕𝘂𝗴 𝘵𝘳𝘢𝘯𝘴𝘢𝘤𝘵𝘪𝘰𝘯𝘴.𝘴𝘰𝘳𝘵((𝘢, 𝘣) => 𝘯𝘦𝘸 𝘋𝘢𝘵𝘦(𝘣.𝘥𝘢𝘵𝘦) - 𝘯𝘦𝘸 𝘋𝘢𝘵𝘦(𝘢.𝘥𝘢𝘵𝘦)); Here: • transactions came from state/props • .sort() tried to modify it in-place • React blocked the mutation → 💥 error 🔹 𝗧𝗵𝗲 𝗙𝗶𝘅 Always clone before sorting. [...transactions].sort((a, b) => new Date(b.date) - new Date(a.date)); Now: • Original state stays untouched • Sorting happens on a new array • React stays happy ✅ 🔹 𝗠𝘂𝘁𝗮𝘁𝗶𝗻𝗴 𝗠𝗲𝘁𝗵𝗼𝗱𝘀 𝘁𝗼 𝗪𝗮𝘁𝗰𝗵 𝗢𝘂𝘁 𝗙𝗼𝗿 • sort() • reverse() • push() / pop() • splice() 🔹 𝗞𝗲𝘆 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆 .sort() mutates. React state should not. Immutability in React isn't optional — it's the rule. 💬 GitHub example in the comments. #JavaScript #React #Frontend #100DaysOfCode #Day54

𝗪𝗵𝘆 𝗰𝗮𝗻’𝘁 𝘄𝗲 𝘂𝘀𝗲 async/await 𝗱𝗶𝗿𝗲𝗰𝘁𝗹𝘆 𝗶𝗻𝘀𝗶𝗱𝗲 useEffect? Most of them try writing useEffect like this: useEffect(async () => {  const data = await fetchData();  setData(data); }, []); At first glance, it looks perfectly fine. But React will show a warning. What’s the reason? The function passed to useEffect must return either: • 𝗡𝗼𝘁𝗵𝗶𝗻𝗴 • 𝗔 𝗰𝗹𝗲𝗮𝗻𝘂𝗽 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 E̲x̲a̲m̲pl̲e̲ ̲o̲f̲ ̲a̲ ̲c̲l̲e̲a̲n̲u̲p ̲f̲u̲n̲c̲t̲i̲o̲n̲:̲ useEffect(() => {  const id = setInterval(() => {   console.log("running...");  }, 1000);  return () => clearInterval(id); }, []); React uses the cleanup function to 𝗿𝗲𝗺𝗼𝘃𝗲 𝘀𝗶𝗱𝗲 𝗲𝗳𝗳𝗲𝗰𝘁𝘀 when: • the component unmounts • the effect runs again The problem with async When you write:useEffect(async () => {}) The function automatically returns a 𝗣𝗿𝗼𝗺𝗶𝘀𝗲. But React expects a 𝗰𝗹𝗲𝗮𝗻𝘂𝗽 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻, not a Promise. So React doesn’t know how to handle it. C̲o̲r̲r̲e̲c̲t̲ ̲P̲a̲t̲t̲e̲r̲n̲ Instead, define the async function 𝗶𝗻𝘀𝗶𝗱𝗲 𝘁𝗵𝗲 𝗲𝗳𝗳𝗲𝗰𝘁: useEffect(() => {  const fetchData = async () => {   const data = await getUsers();   setUsers(data);  };  fetchData(); }, []); Now the useEffect function itself remains 𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀, which is exactly what React expects. Key Takeaway Instead of memorizing the workaround, understand 𝗵𝗼𝘄 𝗥𝗲𝗮𝗰𝘁 𝗺𝗮𝗻𝗮𝗴𝗲𝘀 𝘀𝗶𝗱𝗲 𝗲𝗳𝗳𝗲𝗰𝘁𝘀 𝗮𝗻𝗱 𝗰𝗹𝗲𝗮𝗻𝘂𝗽 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀. That small concept helps avoid many bugs in real-world applications. #React #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CodingInterview #SoftwareEngineering

The difference between a good React developer and a great one? Knowing when to extract logic — and what pattern to reach for. Here's what I've been learning about React composition 👇 🔗 Custom hooks share logic — Every component calling useFetch gets its own independent state. If you want a shared state, that's Context or a state manager. Custom hooks are about reusing behaviour — not syncing data. ⚡ useFetch — three things most engineers miss. Never make the effect itself async. Always check res.ok — fetch doesn't throw on 404 or 500. Use AbortController to cancel stale requests when the URL changes. 🎯 useDebounce — the cleanup IS the magic. The return () => clearTimeout(timer) isn't just cleanup. It's the mechanism that makes debouncing work. Every keystroke resets the timer. Without that cleanup function, it's not debouncing, it's just a delayed call. 🧩 Compound Components — built for design systems. A props blob tries to predict every use case upfront. Compound components let teams compose exactly what they need — zero changes to internals. The secret? Context sharing state between the parent and its sub-components. ⚖️ The decision framework I use Props for 1-2 levels. Context for slow-changing shared data — but split by concern or every consumer re-renders on every change. State manager for complex, frequent updates. React Query for anything that comes from an API. The best platform libraries give teams superpowers without making them think about the internals. Sharing one deep dive at a time. 🚀 #React #CustomHooks #FrontendEngineering #JavaScript #PlatformEngineering #WebPerformance

Understanding CRUD in React: The Real Connection Between useState, map(), and filter() When building any React project, especially a CRUD application, three things become your best friends: 🔹 useState() 🔹 map() method 🔹 filter() method But how are they connected? Let’s break it down. 👇 🧠 useState() – The Brain This stores and manages your data. Example: a list of tasks, users, products, etc. Without state, there is no dynamic UI. 📋 map() – The Display Engine (READ) When you want to show data on the screen, you use map(). It loops through your state array and renders each item dynamically. No map() → No dynamic rendering. ❌ filter() – The Cleaner (DELETE) When you delete an item, you don’t remove it manually. You filter it out and update the state with a new array. This keeps React immutable and predictable. React NEVER modifies the original array. It always creates a new array. That’s called 👉 immutability. UPDATE? We combine map() + useState() to modify specific items inside the array. CREATE? We add a new item into the state array using setState. So in simple terms: useState → Stores Data map() → Displays Data filter() → Removes Data Together, they form the core foundation of CRUD operations in React projects. Master the basics. The advanced stuff becomes easy. 💪 #ReactJS #WebDevelopment #FrontendDeveloper #JavaScript #LearningInPublic

🧠 𝗪𝗵𝘆 𝗖𝘂𝘀𝘁𝗼𝗺 𝗛𝗼𝗼𝗸𝘀 𝗠𝗮𝗸𝗲 𝗥𝗲𝗮𝗰𝘁 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀 𝗖𝗹𝗲𝗮𝗻𝗲𝗿 As React applications grow, components can quickly become cluttered with repeated logic like data fetching, form handling, or authentication checks. This is where 𝗖𝘂𝘀𝘁𝗼𝗺 𝗛𝗼𝗼𝗸𝘀 become incredibly powerful. Custom Hooks allow developers to extract reusable logic from components and place it into a dedicated function. Instead of duplicating code across multiple components, the logic can be reused wherever needed. For example: ✔ useFetch() for API requests ✔ useAuth() for authentication logic ✔ useDebounce() for optimized input handling Benefits of using Custom Hooks: • Reusable logic across components • Better separation of concerns • Cleaner and more readable components By moving complex logic into hooks, components stay focused on 𝗨𝗜 𝗿𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴, making the codebase easier to maintain and scale. Clean code is not just about writing less code — it's about writing 𝗯𝗲𝘁𝘁𝗲𝗿 𝘀𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲𝗱 𝗰𝗼𝗱𝗲. #ReactJS #FrontendDevelopment #CustomHooks #JavaScript #WebDevelopment #ReactDeveloper

🚀 Debounce vs Throttle — Every React Developer Must Know If you’re working with search inputs, scroll events, or API calls… Understanding Debounce and Throttle is mandatory. Let’s break it down simply 👇 🔵 DEBOUNCE 🧠 Definition: Executes a function only after the event has stopped triggering for a specified time. 👉 It waits for silence. 💻 Real-Time Example: Search Input in React D→ Da→ Deb→ Debo→ Debou→ Deboun→ Debounc→ Debounce Without debounce → 8 API calls ❌ With debounce (500ms) → 1 API call after typing stops ✅ 🎯 Best Use Cases: Search bars Form validation Auto-save Filtering data API calls while typing 💡 Simple Analogy: Teacher waits until the class becomes silent before speaking. 🟢 THROTTLE 🧠 Definition: Executes a function at regular intervals, no matter how many times the event fires. 👉 It controls execution frequency. 💻 Real-Time Example: Scroll Event User scrolls continuously. Without throttle → Function runs 100+ times ❌ With throttle (1 second) → Runs once every second ✅ 🎯 Best Use Cases: Scroll tracking Window resize Button click prevention Mouse move events Updating scroll position 💡 Simple Analogy: Traffic signal allows vehicles every 30 seconds. 🏆 One Line Difference Debounce waits for inactivity. Throttle limits frequency. #ReactJS #JavaScript #FrontendDeveloper #WebDevelopment #PerformanceOptimization #Debounce #Throttle #CodingTips #ReactDevelopers

-> React 19 just made Context… cleaner. No new library. No complex pattern. Just less boilerplate. If you're still wrapping everything like this 👇 <ThemeContext.Provider value={theme}> <App /> </ThemeContext.Provider> React 19 says: “You don’t need .Provider anymore.” ⚡ What Changed in React 19? Now you can use the context object directly as a provider. <ThemeContext value={theme}> <App /> </ThemeContext> Yes. That’s it. Cleaner. Shorter. More readable. 🧠 Why This Matters ✔ Less nesting noise ✔ Cleaner JSX ✔ Better DX (developer experience) ✔ More intuitive API React is slowly simplifying patterns we’ve used for years. 🔍 Quick Comparison Before React 19: <AuthContext.Provider value={user}> <Dashboard /> </AuthContext.Provider> React 19: <AuthContext value={user}> <Dashboard /> </AuthContext> Same power. Less ceremony. ⚠ Important You still create context the same way: const AuthContext = createContext(null); Only the provider usage syntax changed. Consumers (useContext) stay exactly the same. 🚀 Small Change. Big DX Upgrade. React isn’t just adding features — It’s removing friction. And honestly? This is the kind of upgrade I love. 💬 Have you tried React 19 yet? Do you like this cleaner provider syntax — or do you prefer the old explicit .Provider? Let’s discuss 👇 #ReactJS #React19 #FrontendDevelopment #JavaScript #WebDevelopment #CleanCode #DX #SoftwareEngineering #LearnInPublic 🚀