Controlled vs Uncontrolled Components in React

5 custom hooks I copy to every React project. Not from a library. Not from a tutorial. From production. Here's my starter kit: 𝟏. 𝘂𝘀𝗲𝗗𝗲𝗯𝗼𝘂𝗻𝗰𝗲() Search inputs, resize handlers, API calls — without re-render storms. I've seen apps making 40+ API calls per keystroke. This hook kills that. 𝟐. 𝘂𝘀𝗲𝗣𝗿𝗲𝘃𝗶𝗼𝘂𝘀() Tracks the previous value of any state or prop. Essential for debugging re-renders and building "changed from X to Y" logic. 𝟑. 𝘂𝘀𝗲𝗟𝗼𝗰𝗮𝗹𝗦𝘁𝗼𝗿𝗮𝗴𝗲() useState, but persistent. Survives page refresh. The catch most people miss: SSR safety. window doesn't exist on the server. 𝟒. 𝘂𝘀𝗲𝗠𝗲𝗱𝗶𝗮𝗤𝘂𝗲𝗿𝘆() Responsive logic in JS without CSS hacks. Show/hide components, change layouts, adjust behavior — all reactive, all clean. 𝟓. 𝘂𝘀𝗲𝗔𝗯𝗼𝗿𝘁𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗿() Auto-cancels fetch requests on component unmount. Nobody writes this hook. Until production breaks with a race condition at 2 AM. The pattern I've noticed after 8+ years: Senior engineers don't write more code. They carry better defaults. These 5 hooks are ~150 lines total. They prevent thousands of lines of bug fixes. What's in your starter kit? #React #JavaScript #TypeScript #CustomHooks #WebDevelopment #FrontendDevelopment #ReactHooks #CleanCode #SoftwareArchitecture #CodingTips

💡 A simple JavaScript trick that saved me hours of debugging While working on a web application recently, I ran into a frustrating issue where my API responses looked correct, but the UI kept behaving unexpectedly. After spending too much time checking the logic, I realized the problem was actually coming from how the object was being copied. In JavaScript, using simple assignment on objects doesn’t create a real copy — it only creates a reference. That means changing one object can unintentionally modify the original data. The quick fix was using the spread operator to create a proper shallow copy: const newObject = { ...oldObject }; This small change prevented unintended mutations and immediately fixed the bug. It’s a small detail, but understanding how JavaScript handles object references can save a lot of debugging time when building modern web applications.Small tricks like this make development smoother and help create more stable and scalable applications. #JavaScript #FullStackDeveloper #WebDevelopment #ReactJS #NodeJS #Programming #SoftwareDevelopment #CodingTips #DeveloperLife

🔥 Why useEffect Runs Twice in React Strict Mode If you’ve seen this while developing with React: JSX code : useEffect(() => { console.log("Effect ran"); }, []); You expect this to run once. But in development, the console shows: Effect ran Effect ran So… is React broken? Not really. 🧠 What’s Actually Happening When React Strict Mode is enabled, React intentionally runs some lifecycle logic twice in development. This includes useEffect. Why? Because React is checking if your effects are safe and predictable. 🔍 What React Is Testing React wants to detect bugs like: Side effects that are not cleaned up Code that relies on running only once Hidden memory leaks To do that, React: 1️⃣ Mounts the component 2️⃣ Runs the effect 3️⃣ Immediately unmounts it 4️⃣ Mounts it again If your cleanup logic is correct, everything still works. ✅ Example with Cleanup JSX code useEffect(() => { const id = setInterval(() => { console.log("running"); }, 1000); return () => clearInterval(id); }, []); This ensures no leftover side effects. 🎯 Important Note This only happens in development. Production builds run effects normally. #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #WebDevelopment #LearningInPublic

If JavaScript is single‑threaded, how does it still handle Promises, API calls, and Timers without blocking the application? The answer lies in the Event Loop. Let’s take a simple example: What would be the output of the below code? console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); Some may guess the output to be: Start End Timeout Promise But the actual output is: Start End Promise Timeout So what is happening behind the scenes? 🔵 Synchronous Code Being synchronous, console.log("Start") and console.log("End") run immediately in the Call Stack. 🔵 Promises Resolved promises go to the Microtask Queue which is executed next. 🔵 setTimeout Timer callbacks go to the Macrotask Queue, even if the delay is '0ms', which is executed last. ✅ Simple flow to remember Synchronous Code → Promises (Microtasks) → setTimeout (Macrotasks) So even with 0 delay, Promises will always execute before setTimeout. Understanding this small but important detail will help developers debug async behavior and write more predictable JavaScript applications. #javascript #webdevelopment #eventloop #asyncprogramming

The map() function is one of the most commonly used methods in JavaScript — especially in React applications. It allows you to transform array data and return a new array. In this video, I explain: • How map() works internally • How it processes each element • How to modify values • Why it always returns a new array • Difference between map() and filter() Example: [1,2,3] → [2,4,6] map() is widely used for: • Rendering lists in React • Transforming API data • UI logic Understanding map is essential for writing efficient frontend code. 🎓 Learn JavaScript & React with real-world projects: 👉 https://lnkd.in/gpc2mqcf 💬 Comment Link and I’ll share the complete JavaScript roadmap. #JavaScript #ReactJS #FrontendEngineering #WebDevelopment #SoftwareEngineering #Programming #DeveloperEducation

A lot of developers get confused between controlled and uncontrolled inputs in React — the difference is small, but it changes everything. 🔹 Controlled Inputs Here, React controls the input using state (useState). Every change goes through React, which makes validation, real-time updates, and data handling much easier. 🔹 Uncontrolled Inputs Here, the DOM manages the input state. You access the value using useRef only when needed, which can be useful in simpler or less interactive scenarios. 📌 The difference is just about who controls the data — React or the DOM. But this small difference impacts how you handle validation, performance, and overall form behavior in real-world applications. Understanding this properly makes form handling much more predictable and scalable. #ReactJS #FrontendDevelopment #JavaScript #MERNStack #SoftwareDevelopment #WebDevelopment #FullStackDeveloper #LearningInPublic #CodingJourney #DevelopersLife

🚀 Understanding Class Components in React One concept that helped me understand how components work internally was Class Components. Before Hooks became popular, class components were the primary way to manage state and lifecycle methods in React applications. A class component is simply a JavaScript class that extends React.Component and must contain a render() method that returns JSX. Example: import React, { Component } from "react"; class Welcome extends Component { render() { return <h1>Hello World</h1>; } } export default Welcome; In class components: 🔹 Props are accessed using this.props 🔹 State is managed using this.state 🔹 State updates are done with this.setState() 🔹 Lifecycle methods like componentDidMount() allow us to run code when the component mounts, updates, or unmounts. Example with state: class Counter extends Component { state = { count: 0 }; increase = () => { this.setState({ count: this.state.count + 1 }); }; render() { return ( <button onClick={this.increase}> {this.state.count} </button> ); } } Today, most developers prefer Functional Components with Hooks like useState and useEffect, but understanding Class Components is still valuable because: ✅ Many legacy React projects still use them ✅ They help you understand React's lifecycle deeply ✅ Some interview questions still cover them Learning both approaches gives you a stronger foundation in React. Sometimes, understanding the old way helps you appreciate the modern way even more. #React #FrontendDevelopment #JavaScript #WebDevelopment #LearningInPublic

🚀 Day 37— Managing Complex State with useReducer in React As React applications grow, managing state with simple hooks can become difficult to scale. Today I explored how React provides a powerful alternative through the useReducer hook for handling complex state logic in a predictable way. While useState works perfectly for simple updates, useReducer shines when state transitions depend on previous state or multiple actions. Here are the key concepts I learned today 👇 🔹 What is useReducer? useReducer is a hook used for advanced state management inside React components. It follows a pattern similar to Redux, but it is built directly into React, making it lightweight and easy to implement. This approach helps structure state updates in a clear and predictable manner. 🔹 Core Building Blocks 1️⃣ initialState Defines the starting value of the component’s state. Example: const initialState = { count: 0 }; 2️⃣ reducer(state, action) A pure function that determines how the state changes based on the action dispatched. Example logic: increment counter decrement counter reset state 3️⃣ The useReducer Hook Inside the component, useReducer connects the state with the reducer logic. const [state, dispatch] = useReducer(reducer, initialState); • state → current state value • dispatch() → sends actions to update the state 🧠 Why useReducer Matters Using the reducer pattern helps developers: • manage complex state transitions • keep update logic centralized • make components easier to debug and maintain • scale state management in larger components Moving from useState to useReducer feels like a major step toward writing structured and production-ready React code. Onward to Day 38 🚀 💬 For React developers: Do you prefer managing state with useState, useReducer, or external libraries for larger applications? #ReactJS #ReactHooks #useReducer #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #100DaysOfCode #LearningInPublic #ReactDeveloper #CodingJourney

🔐 Understanding const, Memory, and Immutability in JavaScript (Web Development Core Concept)....................... In JavaScript, const behaves differently with primitives and objects because of how memory works (stack vs heap). When const is used with primitive values like numbers, strings, or booleans, the value is stored directly in stack memory and becomes completely immutable. Reassigning it throws a TypeError because both the variable and its value are locked. However, when const is used with objects, only the reference (pointer stored in stack memory) is locked, not the actual object stored in heap memory. This means you can modify, add, or delete object properties, but you cannot reassign the variable to a new object. To make an object truly immutable, Object.freeze() is used. It locks both the reference and the object’s internal properties. Understanding this is essential in modern web development, especially for React state management, API configurations, performance optimization, and writing predictable, maintainable code. #JavaScript #WebDevelopment #FrontendDevelopment #ConstKeyword #ObjectFreeze #MemoryManagement #StackVsHeap #Immutability #JSFundamentals #Programming

I reviewed 50+ full-stack projects last quarter. Only about 20% truly nailed end-to-end type safety. tRPC has been a game changer for me. It eliminates the usual friction between backend and frontend types by sharing them seamlessly. You write your API once, and TypeScript guarantees consistency everywhere—no more manual syncing or guesswork. Here’s a quick tRPC router example I built using vibe coding to rapidly prototype a user API: ```ts import { initTRPC } from '@trpc/server'; const t = initTRPC.create(); const appRouter = t.router({ getUser: t.procedure .input((id: string) => id) .query(({ input }) => { return { id: input, name: 'Alice' }; }), }); type AppRouter = typeof appRouter; ``` With this setup, my React frontend can consume `getUser` with full type safety—from input validation to response shape—without writing extra types or API clients. The productivity boost is real. Have you tried integrating tRPC or similar end-to-end type-safe tools in your stack? What challenges did you face? #WebDevelopment #TypeScript #Frontend #JavaScript