Quinn McLaughlin’s Post

𝐖𝐡𝐲 𝐈 𝐒𝐭𝐢𝐥𝐥 𝐂𝐡𝐨𝐨𝐬𝐞 𝐑𝐮𝐛𝐲 𝐨𝐧 𝐑𝐚𝐢𝐥𝐬 𝐎𝐯𝐞𝐫 𝐇𝐞𝐚𝐯𝐲 𝐅𝐫𝐨𝐧𝐭𝐞𝐧𝐝 𝐒𝐭𝐚𝐜𝐤𝐬 I’m not underestimating the power of React and modern JavaScript. Tools like React have changed frontend development in powerful ways. But after building web applications with Ruby on Rails, React, and JavaScript, I’ve found myself consistently leaning back to Rails, and here’s why: 1. Convention over configuration This is the biggest one for me. With Ruby on Rails, I don’t spend hours deciding where things should go or how to structure my app. There’s a clear, opinionated way to do things and it works. In many frontend setups, there’s no single standard everyone has his own opinion about; (where api's go , components, state management library to use etc) everyone has their own approach, and that flexibility often turns into inconsistency and wasted time. 2. Less code, more productivity Recently, I was implementing authentication in a React-based setup and I found myself writing multiple components as you can see in the screen shot attached, handling API calls manually, and managing state across files. In Rails, I can do the same feature with far fewer lines of code. I find this time consuming which can even lead to errors 3. Hotwire quietly removed a major excuse With Turbo Frames and Turbo Streams, Rails now supports dynamic, real-time interfaces without needing a heavy frontend framework. I recently build a single page blog site with turbo frames and turbo streams and i was able to achieve a SPA without any custom javaScript For many applications, this removes the need for a full single-page application setup. With my experience i think i can only need react and JavaScript only when am consuming an external API, or building highly interactive UI's. thoughts?  #RubyOnRails #WebDevelopment #JavaScript #ReactJS #SoftwareEngineering #DeveloperExperience #TechDebate #CleanCode

React solves a lot of real problems, but as developers I think we are using it as a hammer for everything – overcomplicating maintenance and expanding our attack surface unnecessarily. Now with AI-assisted software development this is already getting out of hand, as most of the models default to React for everything. There's a lot of magic, ecosystem instability and the steep learning curve is really eating into profits. Just track your development time for a quarter and you'll notice how much of it is trying to stay on top of the so-called modern JS. In late 2024 we rewrote our custom admin framework from React to vanilla Node.js with no build step and minimal dependencies and immediately we benefited from the faster deploys, fewer security vectors, simpler debugging, and a system our team understands and control end-to-end. Investing an afternoon to create a Claude skill for it was a no brainer to help bring LLMs onboard, so we are not missing much from leaving the “defaults”. Today the web is better than ever and standard web technology, deliberately applied always wins! So it's not a surprise that this post resonated with me: https://lnkd.in/eCKAPvP5

🚀 Why useState is a Game-Changer in React. let's breakdown this 👇 💡 What is useState? "useState" is a React Hook that allows you to store and manage dynamic data (state) inside functional components. Without it, your UI wouldn’t respond to user input. 📱 Real-Time Example: Form Input & Validation Let’s take a simple login form 👇 import React, { useState } from "react"; function LoginForm() { const [email, setEmail] = useState(""); const [error, setError] = useState(""); const handleSubmit = (e) => { e.preventDefault(); if (!email.includes("@")) { setError("Please enter a valid email address"); } else { setError(""); alert("Form submitted successfully!"); } }; return ( <form onSubmit={handleSubmit}> <input type="text" placeholder="Enter email" value={email} onChange={(e) => setEmail(e.target.value)} /> {error && <p style={{ color: "red" }}>{error}</p>} <button type="submit">Submit</button> </form> ); } export default LoginForm 🧠 What’s happening here? - "email" → stores user input - "setEmail" → updates input as the user types - "error" → stores validation message - "setError" → shows/hides error instantly useState is what connects user actions to UI behavior. It ensures your forms are not just functional, but smart and responsible 💬 Have you implemented form validation using useState? What challenges did you face? #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #Coding

🚀 Custom Hooks in React — Write Once, Reuse Everywhere As your React app grows… 👉 Logic starts repeating 👉 Components become messy 👉 Code becomes harder to maintain That’s where Custom Hooks come in. 💡 What are Custom Hooks? Custom Hooks are reusable functions that let you extract and share logic between components. 👉 Just like built-in hooks—but created by you ⚙️ Basic Example function useCounter() { const [count, setCount] = useState(0); const increment = () => setCount(c => c + 1); return { count, increment }; } 👉 Use it anywhere: const { count, increment } = useCounter(); 🧠 How it works ✔ Uses existing hooks (useState, useEffect, etc.) ✔ Encapsulates logic ✔ Returns reusable values/functions 🧩 Real-world use cases ✔ API fetching logic (useFetch) ✔ Form handling (useForm) ✔ Debouncing inputs (useDebounce) ✔ Authentication logic (useAuth) 🔥 Why Custom Hooks Matter 👉 Without them: ❌ Duplicate logic across components ❌ Hard to maintain code 👉 With them: ✅ Clean components ✅ Reusable logic ✅ Better scalability 🔥 Best Practices (Most developers miss this!) ✅ Prefix with “use” (important for React rules) ✅ Keep hooks focused on one responsibility ✅ Avoid tightly coupling with UI ❌ Don’t over-abstract too early ⚠️ Common Mistake // ❌ Mixing UI + logic function useData() { return <div>Data</div>; } 👉 Hooks should return data/logic—not JSX 💬 Pro Insight (Senior Thinking) 👉 Components = UI 👉 Hooks = Logic 👉 Clean separation = scalable architecture 📌 Save this post & follow for more deep frontend insights! 📅 Day 18/100 #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #CodeQuality #SoftwareEngineering #100DaysOfCode 🚀

I stopped writing messy React code… and my projects became 10x easier to maintain. Here’s what changed 👇 Most developers focus on “making it work.” But clean code is what makes it scalable. One simple habit I adopted: 👉 Extract logic into reusable hooks Instead of this 👇 useEffect(() => { fetch("/api/users") .then(res => res.json()) .then(data => setUsers(data)) .catch(err => console.error(err)); }, []); I now do this 👇 // useFetch.js import { useState, useEffect } from "react"; export function useFetch(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then(res => res.json()) .then(setData) .catch(console.error); }, [url]); return data; } Then use it anywhere 👇 const users = useFetch("/api/users"); 💡 Why this matters: Cleaner components Reusable logic Easier debugging Better scalability Small improvements like this separate average developers from great ones. What’s one coding habit that improved your workflow? #React #JavaScript #CleanCode #WebDevelopment #Frontend

If you’re writing 5 files just to toggle a boolean... 🛑 You’re not scaling. You’re over-engineering. For a long time, I used Redux for almost everything in React. And honestly? It felt powerful... but also unnecessarily complex for 90% of my use cases. Recently, I switched to Zustand — and the difference is 🔥 Why Zustand just makes sense: ✅ Zero Boilerplate No Providers. No massive folder structures. Just create and use. ✅ Hook-Based If you know useState, you already understand Zustand. It feels like native React. ✅ Performance First It handles selective re-renders out of the box. Only the components that need the data will update. 💻 The "Store" is this simple: JavaScript import { create } from 'zustand' const useStore = create((set) => ({ count: 0, inc: () => set((state) => ({ count: state.count + 1 })), })) Use it anywhere: JavaScript function Counter() { const { count, inc } = useStore() return <button onClick={inc}>{count}</button> } ⚡ 𝗣𝗥𝗢 𝗠𝗢𝗩𝗘 (Most developers miss this): Use selectors to grab only what you need: const count = useStore((state) => state.count) This keeps your app lightning-fast even as your state grows massive. 📈 Since switching, my code is: → Simpler → Cleaner → Easier to maintain 🟣 Team Redux (The tried and true) 🐻 Team Zustand (The minimalist) #ReactJS #Zustand #JavaScript #WebDevelopment #Frontend #CodingTips #SoftwareEngineering

“Should we build this in Laravel or React?” This is one of the first questions clients ask us when starting a new project. But honestly, it's the wrong question. Choosing a tech stack isn’t about trends or what developers like. It should be based on real constraints of the project. At TechMatrix, we usually look at a few practical things first: • Where will the system be hosted? • How complex will the UI actually be? • How fast does the product need to launch? • Will the system need heavy real-time interactions? • How easy will it be to maintain in the long run? Sometimes Laravel/PHP is clearly the best choice. Sometimes React + Node.js makes far more sense. There’s no ideology here — just practical engineering decisions. We wrote a quick blog explaining how we decide between these stacks when starting a new project. If you're building software, this might save you a lot of time (and mistakes). Read here: https://lnkd.in/gNZnDNGu #SoftwareDevelopment #WebDevelopment #TechStack #Laravel #ReactJS Rushabh Kamdar Rahul Dhulia

I just launched my first full-stack management system! Over the past few weeks, I’ve built a web project to help me manage clients and services at the company where I work. This allows me to better organize my day-to-day tasks at work. Tech Stack: - Frontend: React (Vite) + Tailwind CSS - Backend: Node.js + Express - Database: SQLite - Deployment: Vercel (frontend) + Render (backend) Key Features: - Client registration - Service management (daily tracking) - Dashboard with basic business insights - Full CRUD operations Live project: https://lnkd.in/dZjS9WUa This is a work in progress with more features to come. The backend was developed with AI assistance and meets my current needs. I'll be releasing regular updates to make it as effective as possible for my day-to-day work. I’d really appreciate any feedback! #react #nodejs #webdevelopment #frontend #backend #fullstack #javascript

🚀 useReducer in React — When useState is Not Enough As your React app grows… 👉 State becomes complex 👉 Multiple updates depend on each other 👉 Logic gets messy That’s where useReducer comes in. 💡 What is useReducer? useReducer is a hook for managing complex state logic using a reducer function. 👉 Inspired by Redux ⚙️ Basic Syntax const [state, dispatch] = useReducer(reducer, initialState); 🧠 How it works 👉 Instead of updating state directly: setCount(count + 1); 👉 You dispatch actions: dispatch({ type: "increment" }); 👉 Reducer decides how state changes: function reducer(state, action) { switch (action.type) { case "increment": return { count: state.count + 1 }; default: return state; } } 🧩 Real-world use cases ✔ Complex forms ✔ Multiple related states ✔ State transitions (loading → success → error) ✔ Large components with heavy logic 🔥 Why useReducer? 👉 useState works well for simple state 👉 useReducer works better for structured logic 🔥 Best Practices (Most developers miss this!) ✅ Use when state depends on previous state ✅ Use for complex or grouped state ✅ Keep reducer pure (no side effects) ❌ Don’t use for simple state ❌ Don’t mix business logic inside components ⚠️ Common Mistake // ❌ Side effects inside reducer function reducer(state, action) { fetchData(); // ❌ Wrong return state; } 👉 Reducers must be pure functions 💬 Pro Insight (Senior-Level Thinking) 👉 useState = simple updates 👉 useReducer = predictable state transitions 👉 If your state has “rules” → useReducer 📌 Save this post & follow for more deep frontend insights! 📅 Day 20/100 #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #StateManagement #SoftwareEngineering #100DaysOfCode 🚀

🚀 Just published my latest blog on React.js - from Beginner to Advanced (including Old vs New React)! In this article, I break down: - Core React concepts (components, props, state) - Modern features like Hooks (useState, useEffect) - Key differences between Old React (Class Components) and New React (Functional Components) - Why modern React is the future of web development If you're starting your journey in frontend development or want to strengthen your fundamentals, this guide will help you step by step. 💡 Always learning, always building. #ReactJS #WebDevelopment #Frontend #JavaScript #SoftwareEngineering #LearningJourney #TechBlog