Avoid Storing Calculated State in React

I keep running into the same issue when building forms with React Hook Form + MUI. At the beginning everything feels clean. Then you start adding: - conditional fields - validation rules - async data …and suddenly: - Controller everywhere - watch() scattered across the component - manual error wiring - logic split between JSX and form config It works, but it doesn’t feel right anymore. After working on several enterprise projects, I noticed this pattern keeps repeating. Forms are simple… until they aren’t. Curious how others are dealing with this. Do you keep scaling with RHF + MUI as-is, or do you introduce some abstraction at some point? #reactjs #frontend

Two JavaScript operators that quietly save you from runtime crashes: ?. — Optional Chaining ?? — Nullish Coalescing Before: const city = user.address.city; // 💥 Crashes if user or address is null After: const city = user?.address?.city ?? 'Unknown'; // ✅ Safe. Always. What each one does: ?. → Stops evaluation and returns undefined if anything in the chain is null/undefined. No crash, no if-checks needed. ?? → Returns the right-hand value ONLY when the left is null or undefined. Unlike ||, it won't replace 0, false, or '' — which are valid values. Combined, they make your data-fetching code 10x more resilient. One line. Zero crashes. Ship it. #JavaScript #WebDevelopment #Frontend #CodingTips #CleanCode

Most React tutorials are still teaching 2020 patterns. In 2026, the ecosystem has shifted dramatically: React 19 is stable, the compiler handles most memoization automatically, and useEffect should be a last resort — not your go-to for data fetching, derived state, or event responses. This guide walks you from project setup to production-ready patterns, with a cheat sheet you can bookmark. #react #web #frontend #next #frontend #performance #javascript #tips #typescript #nextjs

useState × 4. onChange × 4. try/catch. isPending. That's the boilerplate every React form has shipped with for years. React 19 quietly deleted all of it. The new shape is two things: - An Action: an async function that takes (prevState, formData) and returns next state - useActionState(action, initial): gives you [state, formAction, isPending] And the form becomes: <form action={formAction}> What disappears: - useState for every input (uncontrolled inputs + FormData) - onChange handlers - gone entirely - try/catch in the component (the Action returns success or error) - Manual isPending tracking (the hook hands it to you) What you write instead: - One async function (the Action) - One hook call (useActionState) - A <form action=...> with inputs that have a name attribute The mental model shift: Forms used to be controlled state machines you wired up by hand. Now they're a function (the Action) plus a state container (useActionState). Bonus: tag the same Action with "use server" and it runs on the server. The form keeps working without client-side JS. What's the most boilerplate-heavy form you've shipped? Curious how much React 19 would shrink it. #React #React19 #Frontend #WebDev #JavaScript #LearnInPublic

📌 Pyramid of Doom (Callback Hell) A situation where multiple asynchronous callbacks are nested inside each other, creating a pyramid-like structure. ❌ Hard to read and understand ❌ Difficult to debug ❌ Poor error handling ❌ Not scalable as the project grows ✅ Use **Promises** to flatten the structure ✅ Prefer **Async/Await** for cleaner, readable code ✅ Handle errors properly with try/catch Clean code isn’t optional — it’s what makes your backend scalable. 🚀 🔖 Save this for later #javascript #developer #architect #nodejs #mern #mmdanish

Stop complicating your React code. Managing complex state can quickly become overwhelming. When you rely on multiple useState hooks, your logic often becomes fragmented, harder to reason about, and difficult to maintain. There’s a better approach 👇 👉 Use the useReducer hook It allows you to manage related state in a centralized and predictable way, making your components cleaner and more scalable. Want to take it further? Abstract your reducer logic. This gives your components a simpler interface and keeps implementation details isolated — a key step toward better architecture. These patterns aren’t optional. They’re essential if you want to build maintainable and scalable React applications. 📖 Dive deeper in my article: https://shorturl.at/P2Bqs #React #JavaScript #Frontend #WebDevelopment #CleanCode #SoftwareEngineering #ReactJS

Stop writing React like it's 2021. 🛑 The ecosystem has evolved. If you want a cleaner, more performant codebase, it is time to upgrade your patterns: 🔄 Data Fetching: useEffect ❌ TanStack Query ✅ 🧠 Global State: Context API ❌ Zustand ✅ 📝 Forms: useState / useRef spam ❌ React Hook Form / React 19 Actions ✅ ⚡ Performance: useMemo / useCallback ❌ React Compiler ✅ 🎨 Styling: CSS-in-JS / bloated SCSS ❌ Tailwind CSS ✅ 🛡️ Validation: Manual checks & any ❌ Zod + TypeScript ✅ Less boilerplate. Fewer unnecessary re-renders. Better developer experience. What is a tool or pattern you finally stopped using this year? 👇 #ReactJS #WebDevelopment #Frontend #TypeScript #TailwindCSS

We benchmarked tRPC's end-to-end type safety on 30 complex applications. The result? Fewer runtime errors and a boost in team efficiency. Is full-stack TypeScript with tRPC truly the future of JavaScript applications, or just another trend in a crowded space? From my experience, the real power of using tRPC lies in its ability to extend TypeScript's type safety from the client all the way to the server. By eliminating the need for manual API request types, we've reduced bugs significantly and streamlined our development process. In one of our recent projects, we combined tRPC with React, and the result was remarkable — our team caught potential errors during compile time rather than in production. Here's a quick example: ```typescript import { initTRPC } from '@trpc/server'; const t = initTRPC(); const appRouter = t.router({ greet: t.procedure .input((name: string) => name) .query(({ input }) => { return `Hello ${input}`; }), }); ``` This speaks volumes about how type safety can be maintained across different components of an application without extra boilerplate. It's a game-changer for building scalable systems efficiently. What's your take? Have you explored using tRPC with TypeScript in your projects? How did it transform your workflow? #WebDevelopment #TypeScript #Frontend #JavaScript

Happy to announce the release of our new open-source package: next-revalidator-js! 🚀 Next.js on-demand caching is an absolute game-changer for frontend performance, but setting up the webhooks to trigger it from your backend is tedious. It usually requires writing custom API routes, coding manual secret token validations, and dealing with repetitive error handling for every single project. My team got tired of the manual setup and actually did something about it. They built a zero-config, plug-and-play package that handles your Next.js on-demand cache revalidation instantly. Drop it in, pass your secret key, and your frontend is securely synced with your backend in under 60 seconds. Why this is a massive win for your architecture: 1. Server-Side Superpowers: You can now safely set your Next.js cache to 1 year. Your database only gets queried when data actually changes, drastically reducing server load, API costs, and database bottlenecks. 2. The User Experience: The instant your backend updates, the Next.js server cache is purged. The very next time a user loads or navigates to the page, they are served the fresh data at static-site speeds. No waiting for arbitrary cache timers to expire. 3. Zero Boilerplate: Built-in secret verification and native support for Next.js 13 through 16. A massive shoutout to Dish Khant for his incredible effort in building and open-sourcing this. He took a frustrating developer bottleneck and engineered a beautiful solution for the whole community. Brilliant work, Dish! 👏 Check out the before-and-after in the image below, and grab the package on npm to try it in your next project: 🔗 https://lnkd.in/dzQPc4H4 #Nextjs #ReactJS #WebDevelopment #OpenSource #JavaScript #DeveloperExperience #WebDev #Backend

🚀 Frontend vs Backend — both different, yet equally powerful! Frontend is what users see and feel — design, buttons, and interactions. Backend is what works behind the scenes — logic, servers, and data handling.  #A great product is not about choosing one over the other, but mastering how they work together. From login forms to data processing — every click you make is a perfect collaboration between frontend and backend. #Tip for beginners: Don’t just learn theory, start building projects that combine both! #WebDevelopment #Frontend #Backend #FullStack #CodingJourney #JavaScript