Suraj Kataria’s Post

🫣I didn't learn many new React concepts this week. But I leveled up how I use them in real projects. Week 20 Recap 👇 This week was focused on deep practice with Context API and useReducer — not theory, but real implementation. Instead of building small demos, I applied everything inside my projects: 1️⃣ WorldWise Project I implemented: • Context API • useReducer • Global state structure • Fake Authentication logic This helped me understand how real React applications manage shared state. I finally started seeing how: Providers structure applications Reducers organize logic Global state replaces prop drilling Authentication controls app behavior This felt like moving from learning React → building real React apps. --- 2️⃣ React Quiz Challenge Instead of creating a new project, I improved an old one. I refactored my React Quiz App by replacing prop-based state with: • Context API • useReducer • Better architecture That experience taught me something important: Real developers don't just build apps. They improve existing codebases. --- What I Learned This Week ✔ Context API is powerful when structured correctly ✔ useReducer makes complex state predictable ✔ Authentication is just controlled state ✔ Architecture matters more than syntax --- Next Step Next I’m moving into React Performance Optimization Things like: • Memoization • Preventing unnecessary renders • Component optimization Time to understand how React really works under the hood. --- I share my daily learning blogs on Dev.to(https://dev.to/usama_dev) and weekly recaps on my portfolio(https://usama-dev.com/). The journey continues 📈 #react #webdevelopment #javascript #frontend

Passing props… from Parent → Child → Grandchild → Great-Grandchild? If that feels messy, you’re probably missing Context API. 🔹 What is Context API? Context API allows you to share data globally without manually passing props at every level. Instead of “prop drilling” through multiple components, you create a central context and any component can access it directly. Cleaner. Simpler. Scalable. 💡 Why It Matters In small apps, props are fine. But in larger applications, you often need global data like: • Logged-in user info • Theme (Dark / Light mode) • Language settings • Authentication state Passing these through 5–6 components? That becomes hard to maintain. Context API solves that problem. 🏢 Real-Time Example In one project, I used Context API to manage: • Theme switching (Dark / Light mode) • Authentication state (Logged-in user details) Any component — Navbar, Sidebar, Dashboard — could access this data directly without passing props manually. Much cleaner structure. Much easier updates. 📌 Interview Tip: Context API is great for medium-level global state. For very complex state management, Redux or other libraries may be better. Tomorrow: I’ll explain Redux vs Context API (Interview favorite). If you're serious about mastering React architecture, stay connected 🚀 Saurav Singh #ReactJS #FrontendDevelopment #JavaScript #ReactDeveloper #LearningInPublic #WebDevelopment 🚀

Zustand vs Redux vs Context After using all three in production, here is the honest breakdown. -> Context API Built into React. Zero bundle size. No library to install. Use it for: theme, authentication state, and simple global state that rarely changes. Avoid it for: frequently updating state or large state trees. Context re-renders every consumer when the value changes. In complex UIs this becomes a performance problem fast. Reality check: re-render issues are real and will bite you in production. -> Redux with Redux Toolkit The industry standard for complex state management. About 11KB with RTK. Use it for: large teams, complex state logic, applications where time-travel debugging and strict unidirectional data flow provide genuine value. Avoid it for: small to medium apps and rapid prototyping. The structure Redux enforces is valuable at scale but is overhead for simpler applications. Reality check: Redux Toolkit removed most of the original boilerplate pain. But it is still Redux. The mental model and conventions are non-trivial. -> Zustand Minimal. About 1KB. Simple API that just works. Use it for: most React applications honestly. It handles global state with almost no setup, no boilerplate, and no re-render traps. Avoid it for: teams already deeply invested in Redux with established patterns that work. Reality check: the API is genuinely simple. Store creation, state access, state updates — all in a few lines. The conclusion from using all three in production: Context for state that rarely changes. Redux when you need time-travel debugging and team-scale conventions. Zustand as the default for new projects. Not because Redux is bad. Because Zustand is usually enough. The best state management solution is always the simplest one that solves your actual problem. What is your current default state management choice and why? #React #Zustand #Redux #StateManagement #FrontendDevelopment #JavaScript #WebDevelopment

🚀 Day 36 — Leveraging the Power of React Hooks for Efficient Applications Modern frontend development relies heavily on efficient state management, optimized rendering, and clean data flow. Today I deepened my understanding of several powerful hooks in React, exploring how they improve performance and simplify complex application logic. Here are the key concepts I worked on today 👇 🔹 1️⃣ Advanced Form Handling I explored modern form management techniques using hooks such as useActionState and useFormState. These hooks help: • manage form submission state • track pending or completed actions • handle validation more effectively They are particularly useful when working with server actions and structured form workflows. 🔹 2️⃣ Persistent References with useRef useRef provides a way to store mutable values that persist across component renders without triggering re-renders. Common use cases include: • accessing DOM elements • storing previous values • maintaining references to functions or timers It acts like a reference memory container inside the component lifecycle. ⚡ 3️⃣ Performance Optimization with useCallback To prevent unnecessary re-renders in child components, useCallback allows developers to cache function definitions. Benefits include: • stable function references • improved rendering performance • better control over dependency-based updates This becomes particularly useful in component-heavy applications. 🔗 4️⃣ Global State Sharing with useContext Managing shared state across deeply nested components can lead to prop drilling. Using createContext() together with useContext() allows components to access shared state directly, making application data flow much cleaner and easier to maintain. 🧠 Key Insight React Hooks are powerful because they allow developers to: • simplify state management • optimize component performance • share data efficiently • structure logic more clearly The deeper I go into React, the more I see that hooks are the backbone of modern React architecture. Onward to Day 37 🚀 💬 For React developers: Which hook do you use most often in real projects — useRef, useContext, or useCallback? #ReactJS #ReactHooks #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #100DaysOfCode #LearningInPublic #ReactDeveloper #CodingJourney #WebDevCommunity

Most developers would build this in 20 minutes and call it done. I spent hours on it. On purpose. I built a Weather Dashboard — sounds basic, right? But let me tell you what's actually going on under the hood 👇 ❌ No React. ❌ No libraries. ❌ No shortcuts. Just raw HTML, CSS, and JavaScript. Here's why that matters — When you strip away the frameworks, you're forced to ACTUALLY understand: → How the DOM works → How async/await handles real API failures → How state lives and dies in memory → How users actually interact with your UI And that's where the real learning happens. Here's what I built into it 🔍 ⚡ Live weather via OpenWeatherMap API — with proper error handling, not just the happy path 📍 Multi-city support — add, save, and switch between cities instantly 💾 localStorage persistence — app remembers your cities on every reload, same pattern used in production apps 🎨 Dark UI — contrast, spacing, and hover states designed with actual user flow in mind The stack is simple. The thinking behind it is not. Anyone can follow a tutorial. Not everyone stops to ask WHY it works. That gap — between coding and engineering — is exactly what I'm closing with every project I build. If you're still building with training wheels, try going vanilla once. You'll never look at a framework the same way again. 🔗 GitHub — https://lnkd.in/gT3zUgnd #JavaScript #WebDevelopment #FrontendEngineering #VanillaJS #BuildInPublic #CleanCode #OpenWeatherMap #100DaysOfCode

Friday – Mini Project Tip 🚀 One small project idea that can dramatically improve your React skills. Build a search component with debouncing. Problem: Without optimization, every keystroke triggers an API call. User types “react” That’s 5 API requests. Bad for: • performance • backend load • user experience Simple solution: Debouncing. Example idea: Use a delay so the API request runs only after the user stops typing. Concept: User typing → wait 400ms → trigger API call. Things you can practice in this mini project: • useEffect for side effects • setTimeout cleanup • API integration • Input performance optimization Small components like this teach real production patterns. Weekend challenge: Build a debounced search component in React. Post your implementation next week 👀 #ReactJS #FrontendDevelopment #MiniProject #BuildInPublic #LearningInPublic

You call setState. You immediately log the value. It prints the old state. React is broken? No. Most developers misunderstand how React state updates actually work. React state isn’t truly asynchronous. It’s batched. It’s scheduled. And it re-renders after your function finishes. That’s why it feels async. I broke it down visually — step by step 👇 (With diagrams + interview explanation) https://lnkd.in/eHbnJ63p React Confusion Series — Part 1 #react #javascript #frontend #webdevelopment

Stop reaching for React Context every time you need to share data. It's not always the right tool. Before adding Context, try these approaches first: Component composition - pass components as children or props to avoid deep drilling. Prop drilling - it gets a bad reputation, but for 2-3 levels deep, it's perfectly fine and keeps your code explicit. Here's a simple example of composition over Context: function Layout({ sidebar, content }) { return ( div aside{sidebar}/aside main{content}/main /div ); } This pattern avoids unnecessary re-renders and keeps your components decoupled and testable. Context shines for truly global state - themes, auth, language settings. But using it for everything creates hidden dependencies and makes debugging harder. The rule of thumb - reach for composition first, prop drilling second, Context third, and a state manager like Zustand or Redux last. Simpler code is easier to maintain, test, and hand off to your team. What's your go-to approach before reaching for Context in your React projects? #React #JavaScript #WebDevelopment #Frontend #NodeJS #SoftwareEngineering

🚀 Reimagining My Portfolio with Data Structures as the Design Concept Most of us learn Data Structures as an academic subject — queues, trees, graphs, stacks. But when you look closely, these structures exist everywhere in real life. • Browsing tabs in Chrome → Tree structure • Task processing → Queue • Social networks → Graphs • Navigation systems → Graphs & paths So I thought: "What if my portfolio itself could be designed around Data Structures?" That idea led me to redesign my portfolio where the design concept is inspired by Data Structures, using DSA-inspired structures to organize and present my information. 💡 Tech Stack: React, Framer Motion, ReactBits.dev, and structured component design. ReactBits provides some really interesting text animations and UI effects. Frontend developers and UI designers should definitely explore it if you're looking to enhance interactive UI experiences. ⚡ Best experienced on Desktop The desktop version provides the intended immersive experience. Mobile support is still under refinement, but you can use Desktop Mode on mobile for now. 🔗 Portfolio: https://bsvr.vercel.app/ 💻 GitHub: https://lnkd.in/gp4rnxqm Would love your feedback and thoughts! #DataStructures #DSA #PortfolioDesign #ReactJS #WebDevelopment #FrontendDevelopment #SoftwareEngineering #DeveloperPortfolio #UIUX #TechDesign

useContext vs Redux — When should you use each? State management is one of the most common challenges in modern React applications. Two popular approaches developers use are useContext and Redux. While both help share state across components, they serve different purposes. 🔹 useContext (React Context API) Best for simple or medium-sized applications where you need to avoid prop drilling. ✔ Built into React ✔ Lightweight and easy to set up ✔ Great for global data like themes, authentication, or language settings ⚠️ Limitations: Not ideal for frequently changing state in large apps Can cause unnecessary re-renders if not structured carefully 🔹 Redux Best for large-scale applications with complex state logic. ✔ Predictable state management with a single store ✔ Powerful debugging with Redux DevTools ✔ Scales well across large teams and large codebases ⚠️ Trade-offs: More boilerplate code Additional setup compared to Context 📌 Simple Rule I Follow • Small project → useContext • Medium project → useContext + custom hooks • Large / complex app → Redux 💡 The goal isn't choosing the most powerful tool — it's choosing the right tool for the problem. #ReactJS #FrontendDevelopment #WebDevelopment #Redux #JavaScript #SoftwareEngineering #StateManagement