Reski Abbas’ Post

When building reusable React components with TypeScript, a common trap is making conflicting props optional. For example, a <Button /> component shouldn't be allowed to have both primary and destructive boolean flags set to true simultaneously. Instead of relying on runtime checks, use Discriminated Unions to catch impossible states at compile time. // ❌ The Anti-Pattern (Allows impossible states) type ButtonProps = { primary?: boolean; destructive?: boolean; label: string; }; // ✅ The Senior Pattern (Mutually exclusive props) type BaseProps = { label: string }; type PrimaryButton = BaseProps & { variant: 'primary' }; type DestructiveButton = BaseProps & { variant: 'destructive'; confirmText: string }; type ButtonProps = PrimaryButton | DestructiveButton; Now, if a developer types variant="destructive", TypeScript will force them to also provide confirmText, and prevents them from mixing up styles. #TypeScript #ReactJS #CleanCode #FrontendDev #WebDevelopment"

Most devs add TypeScript to React by putting types on everything. Expert TypeScript has fewer annotations, not more. The real power isn't string and number on your props. It's discriminated unions that make impossible states unrepresentable, generic components that scale without duplication, and a useRef overload that most people have never seen explained properly. Here are 5 patterns that will change how you write TypeScript in React - from the basics most people get wrong to the advanced patterns that separate senior from mid-level code. Which pattern was new to you? Practice TypeScript interview questions with detailed solutions: https://lnkd.in/gUAHwVkm #TypeScript #React #JavaScript #FrontEnd #WebDevelopment #GreatFrontEnd #CodingInterview

REACT NOTES — PART 1 (Foundations) After understanding how JavaScript works, the next step is building interfaces that scale. React simplifies complex UIs by breaking them into small, reusable components. This post covers the core foundations: • Components and component structure • JSX and how React renders UI • Virtual DOM and efficient updates • Props for passing data • State for dynamic UI behavior • Event handling in React Before learning advanced patterns or frameworks, these fundamentals must be clear. 📌 Save this if you're starting with React or revising the basics. #React #FrontendDeveloper #WebDevelopment #JavaScript #InterviewPrep #LearningInPublic #Consistency

🚨 A small TypeScript mistake I still see in React projects Many developers type their state setters as - (val: number) => void. It looks correct - but it silently breaks a core React feature. React state setters don't just accept a value - they also accept a function. This is essential when your next state depends on the previous one. If you type the setter wrong, functional updates won't typecheck. You've locked yourself out of a feature React gives you for free - and opened the door to subtle bugs. Typing setters correctly means: React's full API stays intact, refactors are safer across your codebase, and state bugs from stale closures become much harder to introduce. It's one line of types. But in a large codebase, it's the difference between code that works and code that works until it doesn't. If you use TypeScript with React, don't throw this away. #TypeScript #React #JavaScript #Frontend #CodingTips

⚛️ React 19 finally killed the worst API in React 👇 . It is time to delete forwardRef from your codebase. If you have ever tried to pass a ref to a custom <Input /> or <Button /> component, you hit the classic React error: "Function components cannot be given refs." The solution for the last 5+ years was forwardRef. It was arguably one of the clunkiest APIs in React. It required wrapping your component in a higher-order function, it made component definitions harder to read, and it caused major headaches when trying to use TypeScript generics. React 19 fixes this forever. ❌ The Old Way (forwardRef): An awkward wrapper that changes how you write your component function. You had to declare (props, ref) instead of just passing ref inside the props object. ✅ The Modern Way (ref as a prop): ref is now just a standard prop. • Zero Wrappers: Define your component exactly like normal. • Cleaner Destructuring: Just pull ref out of your props object alongside everything else: function MyInput({ ref, value }) • TypeScript Friendly: No more struggling with ForwardedRef utility types. The Shift: We are dropping boilerplate wrappers in favor of intuitive, standard JavaScript patterns. Are you ready to delete forwardRef from your codebase? 👇 #ReactJS #React19 #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #ReactJSTips #Tips #FrontendDeveloper #ReactJSDeveloper #Hooks #Developer #ProblemSolving

🚀 𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗕𝗮𝗯𝗲𝗹 – 𝗧𝗵𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗼𝗺𝗽𝗶𝗹𝗲𝗿 Babel is a powerful JavaScript compiler that allows developers to write modern JavaScript (ES6+) while ensuring cross-browser compatibility. It transforms your cutting-edge code into versions that work reliably across all environments, making your web applications more robust and future-proof. Why Babel is essential for developers: ● Write modern JS features like arrow functions, classes, async/await safely. ● Use JSX with React for building dynamic UIs. ● Integrate with Webpack, Vite, or Rollup for efficient bundling. ● Extend JavaScript capabilities with plugins and presets. Understanding Babel empowers you to write modern, maintainable code and ensures your apps run smoothly across browsers, which is critical for frontend and full-stack developers. #JavaScript #Babel #JSCompiler #FrontendDevelopment #WebDevelopment #ReactJS #ES6 #WebDevTools #Coding #TechLearning #FullStackDeveloper #ModernJS

Tiny JS functions, huge code clarity wins! Complex JavaScript? Break it down. Small, single-responsibility functions are your best friends. They're easier to test, debug, and reuse across your React components or Node.js modules. 🚀 Think of them as tiny, dependable machines. Each does one job perfectly. This approach builds confidence in your system, making future refactors a breeze. ✨ Consistent, descriptive naming for variables and functions also pays dividends. It clarifies intent and drastically improves readability for anyone (including future you!) touching the codebase. 💡 Follow me for more insights on simplifying complex dev work and building robust systems. 🌱 #JavaScript #WebDevelopment #CodeQuality #JuniorDeveloper #JrToSr

Hot take: Full-stack TypeScript with tRPC — end-to-end type safety is changing faster than most teams can adapt. Here's what I've seen work in production: 1. Start small — prototype with the simplest approach first 2. Measure before optimizing — gut feelings are usually wrong 3. Invest in developer experience — fast feedback loops compound The teams that ship fastest aren't using the newest tools. They're using the right tools for their specific constraints. What's your experience been? Drop a comment below. #WebDevelopment #TypeScript #Frontend #JavaScript

💡 Why is TypeScript important in React? If you are building applications with React, using TypeScript can make your code more powerful, safer, and easier to maintain. 🔹 Better Error Detection TypeScript catches errors during development before they reach production. 🔹 Improved Code Readability With defined types, your code becomes easier for developers to understand. 🔹 Better IDE Support Autocomplete, suggestions, and refactoring become much easier. 🔹 Scalable Applications When your React project grows, TypeScript helps manage large codebases efficiently. 🔹 Team Collaboration Type definitions make it easier for teams to understand and work on the same codebase. 🚀 In short: React + TypeScript = More reliable and maintainable applications. #ReactJS #TypeScript #WebDevelopment #FrontendDevelopment #JavaScript gourav041999@gmail.com 79*09393359

Most Developers Use TypeScript… But don’t fully understand the difference between: - type & interface. And that’s where confusion starts. Let’s fix that 👇 🔵 type vs interface They look similar. But they’re not the same. 🧠 interface → Best for Object Shapes interface User { id: number; name: string; } ✔ Extends easily ✔ Merges automatically ✔ Great for OOP-style modeling ✔ Ideal for APIs & class contracts You can extend it: interface Admin extends User { role: string; } 👉 Think: “Structure for objects.” 🟣 type → More Flexible type User = { id: number; name: string; }; But here’s the superpower: type ID = string | number; type Status = "loading" | "success" | "error"; ✔ Unions ✔ Intersections ✔ Primitives ✔ Tuples ✔ Function types 👉 Think: “Composition & advanced types.” 🎯 When To Use What? ✔ Use interface → API response shapes, class contracts ✔ Use type → unions, utility types, complex logic Pro Insight:- There is no “better”. There is only: 👉 Better for THIS use case. Senior developers choose intentionally. Not habitually. 💬 What do you prefer — type or interface? Let’s discuss 👇 #TypeScript #JavaScript #FrontendDevelopment #WebDevelopment #CleanCode #SoftwareEngineering #LearnInPublic #ReactJS 🚀