React Developer Best Practices: Custom Hooks, Composition and Performance

Using index as a key is dangerous Every React developer has written this at least once. items.map((item, index) => (  <li key={index}>{item}</li> )) Looks fine. Works fine. But it isn't This is Post 5 of the series: 𝗥𝗲𝗮𝗰𝘁 𝗨𝗻𝗱𝗲𝗿 𝘁𝗵𝗲 𝗛𝗼𝗼𝗱 Where I explain what React is actually doing behind the scenes. Here's what actually happens when you use index as key: You delete one item from a list. React doesn't know which item was removed. It just looks at positions. So it re-renders everything from that index downward. Input states get mismatched. Animations break. Bugs appear that you can't even reproduce consistently. And... No error. Just... wrong behavior. 🔑 Here's what React actually needs: A key isn't just something unique. It needs to be stable, unique, AND tied to the data — not the position. ❌ key={index} → breaks on delete, sort, filter  ❌ key={Math.random()} → new key every render = React destroys and recreates the node  ✅ key={item.id} → stable, reliable, React knows exactly who is who The rule is simple: If your list can ever be reordered, filtered, or deleted from... index as key will silently break your UI. Use your data's ID.  If it doesn't have one, generate it at creation — not during render. const newItem = { id: crypto.randomUUID(),   name: "New Task" } One tiny prop.  Massive impact on how React tracks your entire list. In Post 6 of React Under the Hood: What Happens When You Call setState Follow Farhaan Shaikh if you want to understand react more deeply. 👉 Read the previous post - Understanding diffing algorithm: https://lnkd.in/dzW3NP_V #SoftwareEngineering #ReactJS #WebDevelopment #JavaScript #FrontendDevelopment #BuildInPublic #LearnInPublic #ReactUnderTheHood

⚛️ React Performance Tip: Stop Recomputing on Every Render A common mistake in React is recalculating data on every render: ```javascript id="s7dh2k" const processedData = data.map(...); ``` ❌ This runs every time the component re-renders ❌ Leads to unnecessary computation and slower UI Instead, memoize it using `useMemo`: ```javascript id="k39xdl" const processedData = useMemo(() => { return data.map(...); }, [data]); ``` ✅ Runs only when `data` changes ✅ Prevents unnecessary recalculations ✅ Improves performance significantly 💡 Key takeaway: Use `useMemo` when: • Expensive computations • Large datasets • Avoiding repeated work 🚀 Small optimization = big performance boost What’s your go-to React performance trick? #ReactJS #JavaScript #Frontend #Performance #WebDevelopment #Coding

Most developers just dump everything into one folder. Here's the folder structure I follow in every React/Next.js project — and why it matters. After 13+ years in frontend, I've seen messy codebases slow down entire teams. A clean structure saves hours of debugging and makes onboarding 10x easier. Here's what each folder does: 📁 api — All backend connections in one place. No API calls scattered across components. 📁 assets — Static files only. Images, fonts, icons — nothing else. 📁 components — Reusable UI pieces. If you're copy-pasting a component, it belongs here. 📁 context — Global state without Redux overhead. Perfect for auth, theme, language. 📁 data — Shared static data, constants, mock data. 📁 hooks — Custom logic lives here. Keep your components clean and dumb. 📁 pages — One file per route. Simple, predictable, easy to navigate. 📁 services — Business logic and API call functions. Never write fetch() inside a component. 📁 utils — Helper functions. Date formatting, validators, converters. My 3 golden rules: → If it's reusable — it's a component → If it's logic — it's a hook or service → If it's repeated — it's a utility A clean project structure is not a luxury. It's professionalism. Save this post for your next project. 🔖 What does your folder structure look like? Drop it in the comments 👇 #ReactJS #NextJS #Frontend #WebDevelopment #JavaScript #CSS #HTML #FolderStructure #CleanCode #SoftwareEngineering #FrontendDeveloper #UIDeveloper #WebDev #100DaysOfCode #LearningInPublic #Programming #CodeQuality #React #TechTips #SeniorDeveloper

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

⚛️ “React Hooks are confusing…” — I thought the same at first 😅 When I saw useState and useEffect for the first time,I honestly felt like… 👉 “Why is this so complicated for something so basic?” 🤯 But here’s the truth 👇 Once it clicks, React becomes 10x easier and more powerful. Let me simplify it for you 👇 🧠 What are React Hooks (in simple terms)? 👉 Hooks = a way to give your components “superpowers” -->Store data -->Run logic -->React to changes …without writing messy class components 🙌 🔥 1. useState → Remember things const [count, setCount] = useState(0); 👉 Think: “Hey React, remember this value and update it when I tell you” Example: Counter, form inputs, toggles ⚡ 2. useEffect → Do something when things change useEffect(() => { console.log("Component mounted"); }, []); 👉 Think: “Run this code when something happens” Example : Fetch API data Run code on page load Update UI dynamically 🔁 Why developers love Hooks? ✨ Less code ✨ Cleaner logic ✨ Easier to reuse ✨ No more confusing lifecycle methods 🎯 Real-world example : 👉 You click a button → count updates instantly 👉 You open a page → data loads automatically That’s Hooks doing their magic ⚡ 🚀 My turning point : The day I understood Hooks…I stopped struggling with React and started enjoying it. 💬 Let’s be honest 👇 When you first learned React Hooks, What you felt : 😅 Confused 🤯 Overwhelmed 🔥 “This is actually cool!” Drop your experience below—I’d love to hear your journey! #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #FullStackDeveloper #Developers #CodingJourney

Your TypeScript compiled with zero errors. Your React app still crashed in production. Here is why. 👇 TypeScript gives us a false sense of security. Here is the trap almost every frontend team falls into: const data = await response.json() as User; The Trap: The TypeScript Mirage 🏜️ By using as User, you just lied to the compiler. TypeScript is a build-time tool. It gets completely stripped away before your code runs in the browser. If your microservice backend team accidentally changes a field, or an API returns an unexpected null, the browser doesn't care about your User interface. The bad data flows directly into your React state, and suddenly your users are staring at a white screen of death because data.map is not a function. The Architectural Fix: Runtime Validation 🛡️ Senior engineers do not trust the network. They build boundaries. Instead of just casting types, you must validate the schema at runtime using a library like Zod. 1️⃣ Define the schema: const UserSchema = z.object({ id: z.string(), name: z.string() }); 2️⃣ Infer the TypeScript type from the schema for your UI. 3️⃣ Parse the incoming data: const user = UserSchema.parse(await response.json()); The Result: If the API sends bad data, Zod throws a clean error at the exact network boundary before it ever touches your React components. You catch the bug at the API layer, not in the UI layer. Are you blindly trusting your API responses, or are you validating at the boundary? 👇 #TypeScript #ReactJS #FrontendEngineering #SoftwareArchitecture #SystemDesign #WebDevelopment #FullStack

Does understanding JavaScript internals actually matter in "real life"? 🤔 Yesterday, I got my answer. 😅 I was booking movie tickets with friends. Seats were filling FAST. 🎟️🔥 I hit “Pay Now”... and the app started loading. My instinct? Panic. "Did it hang? Should I click again?" 😰 But I stopped myself. I remembered the Event Loop. While I stared at the spinner, JavaScript was juggling: 💳 The Call Stack processing my click. 🌐 Web APIs handling the payment request in the background. ⚡ The Callback Queue waiting to push the success message back to the UI. Because JS is non-blocking, the UI stayed "alive" even while the data was in transit. If I had clicked again, I might have triggered a double-charge or a race condition. Two seconds later? ✅ Payment Successful. > Sometimes, great engineering is invisible. It’s not just about writing code that works; it’s about understanding why it doesn't break under pressure. Don't just learn the syntax. Learn the engine. 🔁✨ Check out the diagram below notice how the 'Priority Queue' handles the logic while the 'Callback Queue' keeps the UI ready for the next move. That’s the secret sauce! #JavaScript #React #JavaScriptDeveloper #ReactjsDeveloper #Frontenddevelopment #SoftwareEngineering #Fullstackdeveloper

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

5 React Patterns Every Developer Should Know Most developers learn React like this: Write components. Add state. Fetch data. Ship it. Everything works. Until the project grows. Suddenly you get: • Huge components • Logic mixed with UI • Hard-to-reuse code • Difficult debugging The problem usually isn’t React. It’s the patterns you’re using. Here are 5 React patterns every developer should know: 1. Container / Presentational Pattern Separate logic from UI. Containers handle state and API calls. Presentational components focus on rendering. Cleaner components. Easier testing. ⸻ 2. Custom Hooks Pattern Move reusable logic into hooks. Instead of repeating logic everywhere: useAuth() useFetch() useDebounce() You keep your components small and reusable. ⸻ 3. Compound Components Pattern Build flexible components that work together. Example: <Modal> <Modal.Header /> <Modal.Body /> <Modal.Footer /> </Modal> This gives full composition control. ⸻ 4. Render Props Pattern Share logic using a function. <DataFetcher> {(data) => <UI data={data} />} </DataFetcher> Less common today, but still powerful. ⸻ 5. Controlled Components The parent manages the state. <Input value={value} onChange={setValue} /> This pattern is essential for forms and reusable inputs. ——— Good React code is not about writing components. It’s about structuring them properly. What React pattern do you use the most? 👇 #reactjs #react #frontend #javascript #webdevelopment #softwareengineering #frontenddeveloper #codingtips #devcommunity #programming