Quick-Scaffolds-CLI v1.2.4 Released: React + Vite Starter, Confirmation Flow & More

Today was about stabilizing the "front door" of the app: the Login flow and its connection to Redux. TrackMate needed a reliable way to move from a successful API response to a fully authenticated state that persists across app restarts. Refined the Login Thunk → mapped backend data directly to the Redux state. Fixed Keychain storage crash → ensured the refresh token is passed as a validated string to prevent native-side errors. Synchronized User Profiles → verified that ID, Name, and Profile Picture are correctly stored in the global state. Resolved "Undefined" UI colors → restored the primary theme constants for the Login button states. The real engineering insight today: Passing an object when a native module expects a string will crash your bridge every time. In React Native, keychain.setGenericPassword is a non-null host function; if your Redux selector or Thunk passes undefined during a state transition, the app doesn't just fail—it closes. Always validate your token types before they hit the storage layer. Stack: React Native, Redux Toolkit, Node.js Day 18/30. If anyone has pointers on handling token expiration gracefully in Redux middleware, let me know. #buildinpublic #nodejs #reactnative #javascript #softwaredevelopment

🚀 Started learning Redux Toolkit — and built a simple Budget Tracker! To understand Redux better, I created a small project using React + Redux Toolkit. 💡 What this app does: • Add income and expense transactions • Automatically calculates total income, expense, and balance 🧠 What I learned: • How Redux store and slices work • Using useDispatch and useSelector • Managing global state in React This project helped me understand Redux concepts much more clearly. Planning to improve it further by adding more features soon! Would love your feedback 🙌 #React #Redux #FrontendDevelopment #WebDevelopment #JavaScript #LearningJourney

Redux Thunk — and it actually changed how I think about async in React apps. Before today, I was confused about one thing: Redux reducers are pure functions. So how do you handle async operations like API calls inside them? The answer? You don't. That's where Redux Thunk comes in. Redux Thunk is a middleware that lets you write action creators that return a function instead of a plain object. That function receives dispatch and getState, so you can: → Dispatch multiple actions in sequence → Wait for async operations (like fetch calls) to resolve → Conditionally dispatch based on current state It sits between the action and the reducer — giving you a place to do async work before the reducer ever sees the result. The mental model that clicked for me: a "thunk" is just a function that does something later. Instead of dispatching an action immediately, you dispatch a function that dispatches the action when it's ready. Still getting comfortable with it, but it's one of those concepts that makes a lot of other things suddenly make sense. What patterns do you use for async state management in React? Redux Thunk, RTK Query, Zustand, something else? Drop your thoughts below 👇 #Redux #ReduxThunk #ReactJS #JavaScript #TIL #WebDevelopment

🚀 Built a React App Using useReducer ⚛️ I recently built a "React Quiz" app to strengthen my understanding of state management in React. 🧠 Key learnings: Managing complex state with useReducer Handling async data (loading questions from a mock API) Managing loading, error, and ready states ⚡ Answer selection & smooth navigation between questions Tracking progress 📊 Completing & restarting the quiz 🔁 Implementing a countdown timer using useEffect ⏱️ 💡 This project helped me understand when to use useReducer over useState for more structured and scalable state logic. 🔗 GitHub Repo: https://lnkd.in/g8VeyXhi Feedback is welcome 🙌 #React #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #LearningByBuilding

Most Confusing Concepts in React: useCallback vs useMemo! Many developers get confused between these two hooks, but the difference is simple once you see the code. Use useCallback when you want to cache a function itself so it doesn't change on every render. Use useMemo when you want to cache the result (value) of a function to avoid heavy calculations. Mastering these will make your React apps much faster and more professional.

🔍 Your React app feels slow… where do you even start? Here’s the exact process I follow 👇 🧪 Step 1 — React DevTools Profiler Open it → hit record → reproduce the slow interaction Look for: • Long bars • Unexpected grey “did not render” gaps • Commits taking >16ms 🎨 Step 2 — "Highlight updates" toggle Turn it on. Now every re-render flashes on screen ✨ 👉 If your whole UI lights up when typing one character …you’ve found a problem. 🧰 Step 3 — why-did-you-render Install it: npm install @welldone-software/why-did-you-render It logs unnecessary re-renders + the reason behind them. Think of it as: 🧠 console.log for performance bugs 📊 Step 4 — Chrome DevTools Performance tab Use it for deeper analysis: • Paint • Layout • Scripting Look for: 🚨 Long tasks (red triangles) ⚠️ The order matters: Don’t jump to useMemo before running the Profiler. You’ll end up optimizing the wrong thing. 🧠 Better approach: Find the problem → Understand the cause → Fix it specifically #ReactJS #Performance #FrontendDevelopment #Debugging

🦠 COVID-19 Live Tracking App A modern React application that visualizes global COVID-19 data on an interactive map using react-simple-maps. 🔹 Purpose: To build a reliable data flow with React and Redux while ensuring application stability through unit testing. 🔹 Technologies: React, Redux Toolkit, React Router, TailwindCSS, Axios, D3-scale, Millify 🔹 Testing: Unit tests are implemented using Jest and React Testing Library to verify component behavior and data flow. Github: https://lnkd.in/dNQaPpnm Udemig Mehmet Can Seyhan #ReactJS #Redux #UnitTesting #Jest #Frontend #SoftwareEngineering #TDD #TailwindCSS #Udemig #WebDevelopment #TestingLibrary #JavaScript

Server Components are not SSR. I know they sound the same. They're not. SSR renders your component on the server, then ships HTML + the JS needed to hydrate it on the client. The user gets interactivity after the JS downloads and runs. RSC renders your component on the server and ships the output — no component JS ever goes to the client. The user gets interactivity from sibling components that actually need it. Same word in the Next.js docs. Very different runtime behavior. If 80% of your App Router files start with "use client", you have a Pages Router app with extra steps. The bundle sizes should have dropped. If they didn't, this is why. We wrote a full breakdown of where they overlap, where they don't, and why it changes how you bundle. https://lnkd.in/dUitNcb6 #nextjs #reactjs #servercomponents #webperformance #javascript

I built and shipped my first open source developer tool. Run this in any Next.js project: npx roastmyapp You get a 0–100 performance score + a breakdown of issues like: → bare <img> tags instead of next/image → unnecessary "use client" directives → full moment.js / lodash imports → external Google Fonts instead of next/font → bare <script> tags blocking the main thread And it auto-fixes the safe ones with --fix. To test it, I ran it on 4 well-known open source Next.js codebases: 96/100 — Official reference app 81/100 — Popular starter kit (23k ⭐) 66/100 — Popular scheduling app (32k ⭐) 65/100 — Popular link tool (20k ⭐) Even well-maintained production apps quietly accumulate the same issues. Only the official reference app scores near perfect. Curious what your project scores? Open source. TypeScript. Free on npm. npm → https://lnkd.in/ghcYYVwA GitHub → https://lnkd.in/gP3RxWtb Would love feedback from anyone building with Next.js #buildinpublic #nextjs #opensource #typescript #webperformance #developertools

CORS errors once felt like an unsolvable mystery to me. I was building a React 18 app with a Node.js backend. Everything seemed fine locally, but as soon as I deployed, users hit a wall of "CORS policy" errors. My first thought? Something was broken on the backend. → CORS stands for Cross-Origin Resource Sharing. It's a browser security feature that restricts web pages from making requests to a different domain than the one that served the web page. It’s not a backend bug; it’s your browser protecting you. → I learned that the issue often arises when a React app hosted on one server tries to communicate with an API hosted on another. The browser blocks this request unless the server explicitly allows it by sending specific headers. → The "Aha!" moment was realizing that I needed to configure my backend to respond with the right CORS headers. In my case, adding Access-Control-Allow-Origin: * to the server's response headers solved the issue. It was like unlocking a door that had been firmly shut. After understanding CORS, I stopped wildly guessing at solutions and started looking at the problem from the browser's perspective. It made debugging faster and less frustrating. Have you ever faced a CORS issue that took you down a rabbit hole before you found the fix? How did you handle it? #MERNStack #JavaScript #WebDevelopment #CORS #ReactJS