How to Use Custom Hooks for Cleaner React Code

🪝 Understanding Custom Hooks in React — Story Time A few days ago, during a lively code review, I found myself in the hot seat: “Hey Abdul, what exactly are custom hooks in React?” someone asked. I smiled and replied, “It’s a function that uses React hooks inside it.” Everyone nodded… but I could sense a few puzzled faces. On my way home, that moment stuck with me. I realized — custom hooks aren’t just a ‘function with hooks.’ They’re a game changer for cleaner, reusable React code. Here’s what I’ve learned: - Custom hooks let you share logic (like fetching data or listening to events) without copy-pasting code everywhere - Your UI components stay focused on rendering, not managing logic - One change in the hook = instant improvement across your app Now, I always ask: If I’m repeating state logic in multiple places, should this be a custom hook? It keeps our team’s code DRY, tidy, and easier to maintain! ✅ Tried-and-true uses: fetching API data, form input handling, authentication state ❌ Skip hooks for one-off logic—simplicity always wins I unpack more stories, examples, and tips in my latest Medium post. 👉 https://lnkd.in/gn_ntBJt #React #FrontendDevelopment #WebDevelopment #JavaScript #ReactJS #CustomHooks #CleanCode #DeveloperCommunity #TechTips

𝗪𝗼𝗿𝗸𝗶𝗻𝗴 𝘄𝗶𝘁𝗵 𝗔𝗣𝗜𝘀 𝘂𝘀𝗲𝗱 𝘁𝗼 𝗯𝗲 𝗼𝗻𝗲 𝗼𝗳 𝘁𝗵𝗲 𝘁𝗿𝗶𝗰𝗸𝗶𝗲𝘀𝘁 𝗽𝗮𝗿𝘁𝘀 𝗼𝗳 𝘄𝗲𝗯 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 𝗳𝗼𝗿 𝗺𝗲. Between handling requests, managing responses, and keeping everything secure, it’s easy to end up with messy code. Over time, I learned a few practices that make API integration in Next.js much smoother: 𝟭. 𝗖𝗲𝗻𝘁𝗿𝗮𝗹𝗶𝘇𝗲 𝘆𝗼𝘂𝗿 𝗔𝗣𝗜 𝗹𝗼𝗴𝗶𝗰. I keep all API functions inside a dedicated folder like /lib/api or /services. This avoids repeating the same fetch logic across multiple components. 𝟮. 𝗨𝘀𝗲 𝗲𝗻𝘃𝗶𝗿𝗼𝗻𝗺𝗲𝗻𝘁 𝘃𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀. Hardcoding URLs or keys is never a good idea. I always keep them in .env.local and access them via process.env. It keeps the project clean and secure. 𝟯. 𝗟𝗲𝘃𝗲𝗿𝗮𝗴𝗲 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗔𝗣𝗜 𝗿𝗼𝘂𝘁𝗲𝘀. When I need a custom backend endpoint, Next.js API routes are perfect. They sit right inside the app and handle server-side logic without needing a separate backend. 𝟰. 𝗛𝗮𝗻𝗱𝗹𝗲 𝗲𝗿𝗿𝗼𝗿𝘀 𝗴𝗿𝗮𝗰𝗲𝗳𝘂𝗹𝗹𝘆. Whether using try...catch blocks or custom error handlers, showing meaningful feedback to users makes a huge difference. 𝟱. 𝗖𝗼𝗺𝗯𝗶𝗻𝗲 𝗥𝗲𝗮𝗰𝘁 𝗤𝘂𝗲𝗿𝘆 𝗼𝗿 𝗦𝗪𝗥 𝗳𝗼𝗿 𝗱𝗮𝘁𝗮 𝗳𝗲𝘁𝗰𝗵𝗶𝗻𝗴. Instead of manually managing loading states and refetching, I rely on libraries that handle caching and revalidation automatically. Once these patterns became part of my workflow, API integration felt less like a chore and more like a seamless extension of my React logic. If you’ve ever struggled with organizing API calls in your projects, try centralizing them, you’ll notice a cleaner structure almost immediately. How do you handle API integrations in your Next.js apps? #Nextjs #Reactjs #APIIntegration #FullStackDevelopment #WebDevelopment #JavaScript #FrontendDeveloper #BackendDevelopment #CodingTips #SoftwareEngineering #LearnToCode

React Optimization Hack: Dynamically Import Large Components with React.lazy() In large React applications, performance can sometimes take a hit due to the size of your components. One powerful way to optimize this is by using React.lazy() for dynamic imports. This allows you to load components only when they are needed, reducing the initial load time and improving user experience. Here’s how it works: -> React.lazy(): Dynamically imports components only when they're rendered, rather than bundling them upfront. -> Suspense: A wrapper component that lets you display a loading state while the dynamically imported component is being fetched. 💡 Best use case: Large, non-essential components that don’t need to be loaded immediately, like modals, charts, or complex data tables. 💬 Curious how you’re using React.lazy() in your apps? Or maybe you’ve run into any challenges? Drop your thoughts in the comments—I’d love to hear your experiences. #ReactJS #JavaScript #WebDevelopment #Frontend #MERN @Reactjs @WebDevelopment

🚨 Why is my API call running again and again? This happened to me recently while working on a React dashboard. I had a simple useEffect that fetched user data when the component mounted: useEffect(() => { fetchUserData(); }, [user]); Looked innocent, right? But every time something updated in the app — this effect ran again, triggering multiple API calls. At first, I thought React was just being React 😅 But the real issue was deeper. 🧠 What was happening? user came from Context, and React treats object references as new on every render — even if the object’s content didn’t change. So, each render → new reference → effect re-runs → API storm 🌪️ ✅ The Fix Instead of passing the entire object, depend only on what’s necessary: useEffect(() => { fetchUserData(); }, [user.id]); // primitive, stable dependency Or, if you truly need the object, memoize it using useMemo or ensure the context value is stable. 💡 Takeaway > React compares dependencies by reference, not by value. Objects, arrays, and functions can silently trigger re-renders if not memoized. 🗣️ Your Turn Have you ever been bitten by dependency arrays or re-renders in React? How do you handle it — memoization, state refactoring, or something else? #ReactJS #JavaScript #WebDevelopment #ReactHooks #FrontendDevelopment #CodeTips #ReactPerformance #Nextjs #DevCommunity

🚀 Exploring Next.js 16 — What’s New and What’s Gone! Today I explored the latest Next.js 16 release, and it’s a big leap forward for modern web development. As a Front-End Developer working with Next.js, TypeScript, and Tailwind CSS, this update brings massive performance and developer experience improvements. 💪 --- ✨ What’s New in Next.js 16 ⚡ 1. Turbopack is Now Stable The Rust-powered bundler is finally production-ready — giving faster builds, instant refreshes, and smoother development. 🧠 2. “use cache” Directive A new caching model that lets you control how components and data are cached — making rendering more efficient and dynamic. 🧭 3. Smarter Routing & Navigation Optimized layout handling, incremental prefetching, and better navigation transitions for a snappier app experience. 🔁 4. New Caching APIs Functions like updateTag() and refresh() simplify handling dynamic data — perfect for dashboards and eCommerce projects. ⚙️ 5. React 19 Integration Next.js 16 fully supports React 19 features like view transitions and useEffectEvent() for more interactive UIs. 💡 6. Better Developer Experience (DX) Improved build logs, simplified setup (TypeScript + Tailwind by default), and better error reporting. --- ❌ What’s Removed or Changed 🚫 AMP Support — Completely removed. ✅ Focus is now on modern web performance, not AMP. ⚠️ serverRuntimeConfig & publicRuntimeConfig — Removed. 💡 Use environment variables instead (.env.local, .env.production). 🔄 middleware.ts → replaced with proxy.ts Next.js now uses a createProxy() function for advanced middleware logic. 🧩 Old Experimental Flags Removed Flags like experimental.ppr and experimental.dynamicIO have been merged into the new architecture. 🔧 Node.js & TypeScript Requirements Updated Node.js 20.9+ required TypeScript 5.1+ required 🌐 Browser Support Tightened Only modern browsers (Chrome 111+, Edge 111+, Safari 16.4+) are supported. --- Next.js 16 shows how serious Vercel is about performance, caching, and developer experience. If you’re still on Next.js 15, this update is absolutely worth exploring! 🚀 #Nextjs16 #ReactJS #WebDevelopment #TypeScript #TailwindCSS #Frontend #JavaScript #Nextjs #DeveloperExperience #WebPerformance

𝐇𝐚𝐯𝐞 𝐲𝐨𝐮 𝐞𝐯𝐞𝐫 𝐜𝐥𝐢𝐜𝐤𝐞𝐝 𝐨𝐧 𝐚 𝐜𝐚𝐫𝐝 𝐢𝐧 𝐚 𝐑𝐞𝐚𝐜𝐭 𝐚𝐩𝐩 𝐚𝐧𝐝 𝐰𝐨𝐧𝐝𝐞𝐫𝐞𝐝 — “𝐡𝐨𝐰 𝐝𝐨𝐞𝐬 𝐢𝐭 𝐦𝐚𝐠𝐢𝐜𝐚𝐥𝐥𝐲 𝐨𝐩𝐞𝐧 𝐚 𝐝𝐞𝐭𝐚𝐢𝐥𝐞𝐝 𝐩𝐚𝐠𝐞 𝐟𝐨𝐫 𝐭𝐡𝐚𝐭 𝐞𝐱𝐚𝐜𝐭 𝐢𝐭𝐞𝐦?” Well… I just made that happen! 🚀 I recently built a Dynamic Detailed Page where every card from an API gets its own unique page — all using just one component Here’s the exciting part 👇 With this single line of code: 𝒄𝒐𝒏𝒔𝒕 { 𝒊𝒅 } = 𝒖𝒔𝒆𝑷𝒂𝒓𝒂𝒎𝒔(); I can now grab the ID directly from the URL and show that exact post’s data dynamically. No repeated components. No messy routes. Just clean, scalable React magic 🧩 What I used: - React Router (for dynamic routing) - React Query (for smooth API data fetching) - CSS (for polished UI & transitions) - Axios (for fetching individual post data) And yup — I also added a neat “Go Back” button and custom CSS animations to make the transition smooth Every click → new page → new data → same component #ReactJS #FrontendDevelopment #ReactRouter #ReactQuery #WebDev #JavaScript

Thrilled to share a full-stack To-Do List application I built from scratch! This project was a fantastic exercise in connecting a modern React frontend to a custom-built Express.js backend. My main goal was to master the fundamentals of a full-stack workflow, focusing on: Frontend: Building a dynamic, component-based UI in React. Backend: Creating a complete RESTful API with Express.js and Node.js. Connection: Using Axios to handle all asynchronous CRUD (Create, Read, Update, Delete) operations. UI/UX: Styling the app with CSS, implementing different themes (like mint and dark mode), and using React Icons for a clean user experience. To focus purely on the API logic, the backend uses in-memory storage (a simple array), so the data resets on server restart. It was a great way to build and test the API endpoints without database overhead. I'm proud of how this turned out, especially the clean and responsive UI. You can check out the complete, documented code for both the frontend and backend on my GitHub- https://lnkd.in/dX7fAfmk #webdevelopment #fullstack #reactjs #expressjs #nodejs #javascript #portfolio #projects

⚛️ useReducer in React — The Smarter Way to Handle State 🧩Why useReducer? When your component state becomes too complex for useState, ➡️ it’s time to bring in useReducer! It helps manage multiple state transitions in a clean, predictable way. ⚙️ The Basic Syntax const [state, dispatch] = useReducer(reducer, initialState); 🧠 Think of it as a mini Redux inside React! state → current value dispatch → triggers updates reducer → decides what changes 💡 Example — Counter App function reducer(state, action) { switch (action.type) { case "increment": return { count: state.count + 1 }; case "decrement": return { count: state.count - 1 }; default: return state; } } Now just call 👇 dispatch({ type: "increment" }); Simple and powerful 🔥 🧠When to Use It ✅ Multiple related state values ✅ Complex state logic ✅ Cleaner state management ✅ Easier debugging ⚡useState vs useReducer useState useReducer Simple state Complex logic One value Multiple actions Quick setup More structured 🌍 Pro Tip Combine useReducer + useContext → 💪 Lightweight global state management without Redux! 🚀 Takeaway useReducer makes your React code: ✔️ Organized ✔️ Scalable ✔️ Maintainable When your app grows — this hook keeps your logic under control 🧘♀️ 🙌Wrap-up Have you tried useReducer in your React projects yet? Share your experience below #React #useReducer #WebDevelopment #JavaScript #Frontend #STEMUP

🚀 Next.js 15 — Beyond a React Framework Next.js 15 isn’t just a React framework anymore — it’s evolved into a complete ecosystem for building dynamic, scalable, and high-performance web applications. Recently, while refining routing, rendering, and data fetching, I finally understood the real power behind Server and Client Components — and how they redefine application architecture. Fetching data was simple… until I started managing form submissions and interactive UI elements. That’s when I realized how critical it is to decide where your logic should live. Many developers mix up layers — using useEffect inside server components or calling APIs from client-only logic — and end up hurting performance. 💡 The principle I follow: Let the server do what it’s good at — fetching, not rendering. Here’s what works best in my projects: ✅ Server Components – Perfect for data fetching, SEO optimization, and performance. ✅ Client Components – Best for interactivity, animations, and user-driven state. ✅ Shared Layouts – Keep your structure consistent and avoid unnecessary re-renders. Once I separated these responsibilities, my apps became faster, cleaner, and easier to maintain. If you’re exploring Next.js 15, start by mastering this separation early — it will save you countless hours as your project scales. 💬 How are you handling Server vs. Client Components in your Next.js 15 projects? #Nextjs15 #React19 #WebDevelopment #Frontend #JavaScript #Nextjs

"Do we really need a framework for everything we build on the web? Sometimes it feels like we’re using React to solve problems HTML already solved years ago." This is a quote from a very good article — it makes you rethink how the web evolved, from simple HTML pages to full-blown React apps. It also reminded me of what I learned from “We Might Not Need a Framework.” Worth the read if you’ve ever wondered why your simple page needs hydration, double data fetching, and 200KB of JavaScript. 🔗 https://lnkd.in/dzqhGgeh