Understanding React Component Constructors and 'super(props)'

Why do we specifically pass 'props' into 'super(props)' in a React component constructor? It is one of those things many developers do out of habit without realizing the actual mechanism behind it. While calling 'super()' is a JavaScript requirement to initialize the 'this' keyword, passing 'props' is a very specific React requirement for the constructor phase. The reason is simple: visibility. When you call 'super(props)', you are telling the parent 'React.Component' class to initialize 'this.props' for you immediately. If you only call 'super()' without the argument, 'this.props' will be undefined inside the constructor. React eventually assigns props to the instance anyway, but that happens after the constructor has finished running. If your logic requires you to access a property or compute a state based on a prop right inside the constructor, forgetting the 'props' argument will crash your logic. You would be trying to read from a variable that hasn't been wired up to the instance yet. Even though modern React code bases have shifted to Functional Components where this ceremony is gone, the underlying logic of when data becomes available to an instance is a core part of the library’s history. It is a small detail that perfectly illustrates how React works under the hood. #ReactJS #Javascript #SoftwareEngineering #FrontendDevelopment #WebDev #CodingTips

One of the most underrated JavaScript features: Destructuring. Not because it's complex,but because once you truly get it, your code never looks the same again. Here's the shift it creates: BEFORE: const a = arr[0]; const b = arr[1]; const name = user.name; const age = user.age; AFTER: const [a, b] = arr; const { name, age } = user; Same logic.But destructuring goes deeper than just shorthand: ✦ Skip indexes in arrays using commas ✦ Rename variables on extraction ✦ Set default values for missing properties ✦ Use ...rest to capture everything remaining ✦ Destructure directly inside function parameters These patterns come up daily, in React, in Node.js, in any codebase that handles real data. I just published a full blog post breaking all of this down with visuals, before/after comparisons, and practical examples. Blog-link: https://lnkd.in/giGUXq7C #JavaScript #JS #WebDev #ProgrammingTips #CleanCode #SoftwareDevelopment

A lot of people constantly ask me what React Hooks actually are, and the best way to think about Hooks and JavaScript concepts in general is to look at what problem they were trying to fix. For example, before React Hooks, people would create a Container Component and a Presentational Component. The Container Component would retrieve data, like making a fetch request, and then pass that data down to the Presentational Component, which was usually a pure function that returned some UI, like a div with styling, and accepted that data as props. This pattern helped create a standard for how data was retrieved in React and enforced separation of concerns, but it ended up being too boilerplate heavy for most people. So Hooks were introduced to let us hook into components directly, allowing us to load data as a side effect inside a function while still maintaining separation of concerns without needing extra components. #ReactJs #JavaScript #JavaScriptHooks

I just published a new article breaking down some of the most important React fundamentals that finally clicked for me. https://lnkd.in/df7igt6X It covers: - Declarative vs Imperative thinking - Components and Props - State and why it actually matters - The real reason React re-renders - Common mistakes with event handling One of the biggest takeaways for me was understanding this: React doesn’t “update variables” — it re-runs your component, and only state survives between renders. That small shift in thinking makes a huge difference when working with React. If you’re learning React or struggling with concepts like state and re-renders, this might help clarify things. I’d appreciate any feedback or thoughts. #React #JavaScript #Frontend #WebDevelopment #LearningInPublic

How much JavaScript do you really need before jumping into libraries? 🤔 A common mistake beginners make is rushing into frameworks like React, Vue, or Angular without a solid JavaScript foundation. Here’s the truth 👇 You don’t need to master everything, but you should be comfortable with: ✅ Variables, Data Types, and Operators ✅ Functions (Arrow functions, callbacks) ✅ Arrays & Objects (very important) ✅ DOM Manipulation (selecting, updating elements) ✅ Events (click, input, submit, etc.) ✅ ES6+ Concepts (let/const, destructuring, spread operator) ✅ Asynchronous JavaScript (Promises, async/await, fetch API) 💡 If you can build small projects using vanilla JavaScript (like a to-do app, calculator, or form validation), you are ready to move to libraries. 🚀 Libraries don’t replace JavaScript — they use JavaScript. Strong basics = Faster learning + Better debugging + Clean code Don’t rush the process. Build your foundation first, then scale up. #JavaScript #WebDevelopment #Frontend #CodingJourney #MERN #LearnToCode

Most React Native codebases become a mess by month 3. Not because the developer was bad. Because nobody agreed on a structure from day one. Here's the folder structure I use on every project 👇 src/ ├── components/  → reusable UI only ├── screens/   → one file per screen ├── navigation/  → all route config here ├── hooks/    → useAuth, usePlayer, useBooking ├── store/    → Redux slices ├── services/   → ALL API calls live here ├── utils/    → helpers & constants ├── types/    → TypeScript interfaces └── assets/    → images & fonts 3 rules I never break: 🔴 API calls never go inside components 🟡 Every colour lives in theme.ts — nowhere else 🟢 Types folder grows with the project — never skip it Junior me put everything in /components. 6 months later it had 60 files and zero logic separation. Never again. Save this before your next project 👇 #ReactNative #TypeScript #CleanCode #MobileDev #JavaScript #2026

Back to Basics: Building a High-Performance Project in Vanilla JS! Recently, I worked on a project with a very specific client requirement: No Frameworks. Just Vanilla HTML, CSS, and JavaScript. Coming from a React.js background, where everything is component-based and state-managed, going back to the basics was both a challenge and a massive learning experience! Here’s what I realized during this build: The "Manual" Struggle: Managing the DOM manually and handling state without hooks like useState or useEffect definitely feels more "boring" and time-consuming at first. Optimization is a Real Test: Without React’s Virtual DOM, optimizing for speed and performance in plain JS is much harder. It forced me to write cleaner, more efficient scripts to keep the UI snappy. The Power of Control: While React makes everything "easy," Vanilla JS gives you absolute control over every single pixel and event listener. The Lesson? Frameworks like React are productivity powerhouses, but a strong grip on the fundamentals is what makes a developer truly "Future-Proof." It was a great experience delivering exactly what the client needed while sharpening my core engineering skills. Developers, do you think we rely too much on frameworks today? Let’s talk in the comments! 👇 #WebDevelopment #VanillaJS #JavaScript #CodingFundamentals #ClientSuccess #MERNStack #SoftwareEngineering #CareerGrowth

✨ Just wrapped a class on React — and my perspective on frontend dev has completely shifted. Before class, I thought React was just "fancy JavaScript." After class? I realize it's a whole new way of thinking about UIs. 🧠 Here's what clicked for me: 🔹 Components are like LEGO blocks Everything in React is a reusable piece — buttons, navbars, cards. You build once, use everywhere. No more copy-pasting the same HTML 10 times. 🔹 The Virtual DOM is React's superpower Instead of updating the entire page on every change, React creates a virtual copy of the DOM, compares it, and only updates what changed. Blazing fast. Incredibly smart. 🔹 State = the memory of your UI useState taught me that UI is just a function of data. Change the data → UI updates automatically. No manual DOM manipulation. No document.getElementById headaches. 🙌 🔹 Props make components talk to each other Data flows down through props, and events bubble up through callbacks. Once you get this parent-child relationship, React just makes sense. 🔹 JSX is not scary — it's beautiful HTML inside JavaScript? Sounds weird. But JSX lets you co-locate your logic and markup, making components self-contained and readable. 💡 The biggest lesson? React teaches you to think in components, not in pages. It's not just a library — it's a mental model for building modern UIs. If you're learning web development, don't skip React. It will change how you think about code. 🚀 What was YOUR "aha moment" with React? Drop it in the comments 👇 #React #WebDevelopment #Frontend #JavaScript #Learning #TechEducation #100DaysOfCode #ReactJS #CodingJourney

What Are React Hooks? ⚛️ React Hooks changed the way we build components making code cleaner, more reusable, and easier to manage. In simple terms, React Hooks let you use state and other React features without writing a class component. 🔹 Common Hooks: • useState – Manage state in functional components • useEffect – Handle side effects (API calls, updates) • useContext – Share data across components • useRef – Access DOM elements directly 🔹 Why Hooks Matter: • Cleaner and more readable code • Better logic reuse • Simplified state management • Faster development Hooks aren’t just a feature they’re a shift toward modern React development. If you’re still relying on class components… it’s time to upgrade 🚀 #ReactJS #WebDevelopment #JavaScript #Frontend #Programming #ReactHooks

most React developers have too many useEffects. i did too. until i read this rule and couldn't unsee it: if you're using useEffect to sync state with another state you don't need useEffect. here's what i mean. (the pattern 1 .. i see everywhere) but pattern 2 give same result . no effect. no extra render cycle. useEffect is for syncing React with something outside React. - fetching data from an API - setting up a subscription - manually touching the DOM not for calculating values you could just... calculate. every unnecessary useEffect is a hidden render cycle your users pay for. before you write useEffect ask one question: am i syncing with something outside React, or am i just doing math? if it's math delete the effect. #reactjs #typescript #webdevelopment #buildinpublic #javascript