Week 8 at TEACH2GIVE Building a Stronger Foundation in React: useState and useEffect This week, I spent time deepening my understanding of React Hooks — specifically useState and useEffect. We began by setting up a new React TypeScript project from scratch. It might sound simple, but even that process came with small challenges, naming conventions, folder structure, and how React scaffolding works behind the scenes. Fixing these early mistakes helped build confidence in managing a React environment from the terminal all the way to a running local app. Once the setup was stable, we focused on useState. This hook introduced a clean way to handle dynamic data in components. I learned how it replaces class-based state management with something much simpler, letting each component remember its own state without extra boilerplate. What stood out was how small state updates trigger re-renders, keeping the UI always in sync with data. The next phase was understanding useEffect. This one clicked when I realized it’s all about side effects, code that runs after React updates the DOM. We explored several real-world uses: ~Fetching data from an API. ~Running timers or intervals. ~Cleaning up subscriptions when a component unmounts. ~Responding to changes in state or props dynamically. Our trainer Brian Kemboi emphasized that useEffect isn’t just a feature, it’s a mindset. It teaches you to think about when and why your code should react to change. We practiced a few scenarios to see how different dependency arrays ([], [variable], and no array at all) affect the behavior of the effect. Seeing the outcomes firsthand helped the logic sink in. By the end of the session, the main takeaway was clear: mastering useState and useEffect means mastering React’s core idea, reacting to data changes gracefully. These two hooks form the foundation for nearly everything else in modern React development. It was a reminder that learning to code isn’t only about syntax, it’s about developing the discipline to understand the flow of data, the sequence of updates, and how small details shape the user experience. #React #FrontendDevelopment #JavaScript #WebDevelopment

🚀 Just wrapped up learning Redux! State management always felt a bit tricky to me at first, but once I understood how Redux connects the pieces together — everything started to click. I created this simple visual to explain the working of Redux — from components, reducers, and actions to how data flows between the frontend and backend 🔄 Here’s what I learned while exploring Redux: ✅ The difference between synchronous and asynchronous actions ✅ How reducers and slices store and update the app state ✅ How data travels between React components, backend, and store ✅ Why Redux Toolkit makes things so much cleaner and easier If you’ve ever felt Redux was complex — trust me, once you break it down visually, it starts making total sense! 💡 I’ll soon be diving deeper into Redux Toolkit Query (RTK Query) to handle APIs even more efficiently. 📊 Check out this visual breakdown below 👇 #Redux #ReactJS #WebDevelopment #Frontend #LearningJourney #JavaScript #Coding

When you’re starting with React, one of the most confusing moments is when you update a state variable… and nothing changes on the screen. Here’s why 👇 React doesn’t react to value changes — it reacts to state triggers. When you call setState, React knows something changed, prepares a new “snapshot” of your data, and decides when and how to re-render efficiently. But if you change the state directly, React has no idea. It doesn’t re-render because it never got the signal. This is called immutability — React creates new versions of state instead of changing the old one. That’s how it keeps your app predictable, efficient, and bug-free. In this post, I’ve explained in plain language: ✅ How React’s state engine actually works ✅ Why direct mutation fails silently ✅ What “immutability” and “pure functions” really mean ✅ The mindset shift from “coding UI” to “managing data flow” If you’re a student or beginner learning React, this concept is a game-changer. It’s not just about syntax — it’s about understanding how React thinks. Once you get that, everything else starts to click. 💬 Share this with a friend who’s learning React — this one tip can save hours of debugging. #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #SoftwareEngineering #CollegeProjects #CareerInTech #LearnToCode #Codeviji

Hook: Want to code faster and debug in half the time? 🚀 Your VS Code setup can be your biggest bottleneck or your greatest productivity hack. I've been optimizing my workflow and found these 5 extensions to be absolute game changers: ⚡ ES7+ React/Redux/React-Native snippets: Stop typing boilerplate. This gives you instant code skeletons for components and hooks with simple prefixes (rfce, usememo). A non-negotiable for React devs. 🔄 Auto Rename Tag: A simple time-saver that prevents broken markup. Rename an opening HTML/XML tag, and the closing one updates automatically. 🥷 Console Ninja: My personal favorite for debugging. It displays console.log output and errors directly in your editor, right next to the code. No more flipping to the browser's dev tools. 🎨 Material Icon Theme: Don't underestimate a clean UI. This makes your file explorer instantly scannable with clear, distinct icons for every file and folder. Find what you need, faster. 📸 CodeSnap: The perfect tool for sharing. Create beautiful, presentation-ready screenshots of your code snippets for documentation, blogs, or just asking for help. My philosophy is simple: less time on boilerplate, more time solving problems. What's your "can't-live-without" VS Code extension? I'm always looking for new ones. Drop your favorites below! 👇 💬 Connect & Comment “Extension” below I’ll share the exact extensions I use. 👥 Follow Mohamed Irfaan for early access to the full guide on Front End Development and hands-on tutorials! #VSCode #DeveloperTools #Productivity #WebDevelopment #Coding #ReactJS #JavaScript #VSCodeExtensions #Tech #AI #Software

🚀 Day 3/7 — TypeScript Mini Project Interactive Quiz App (pure TypeScript, no frameworks) What I built • 5 multiple‑choice questions (A/B/C/D) • Progress bar + instant feedback (✓ / ✗) • Final score + restart • Clean, responsive UI How it works • Interface IQuestionData { questionText, options[], correctAnswerIndex } • Class QuizLogic → getCurrentQuestion, submitAnswer, isFinished, getScore • DOM‑only functions → renderQuestion, renderResults, setupEventListeners, showFeedback • Strict TS config (noImplicitAny, strictNullChecks) Why it matters • Strong typing catches bugs early • Class‑based state keeps flow simple and testable • Zero‑dependency builds are fast and portable Tech stack TypeScript (ESNext, strict) • HTML • CSS Key learnings 1) Interfaces as clear contracts 2) Encapsulation with classes 3) Type‑safe DOM manipulation Question for you How do you structure quiz/game logic in TS — classes or functional? Github Repo : - https://lnkd.in/e8q57Pkt open for contribution read contribution.md and follow code of conduct. Waiting for ur contributions... #TypeScript #JavaScript #WebDevelopment #Frontend #CleanCode #LearnToCode #Programming #Developer #Coding #TypeSafety

🚀 Day 25 of #100DaysOfDev 🕒 Understanding Dates, Conversions & Formats in JavaScript In today’s AI-powered development era, it’s tempting to rely on tools to handle date operations — instead of remembering every function or format. But here’s the thing 👇 Understanding the basics of how dates work in JavaScript can actually save you a lot of time — especially when debugging or deciding how to implement something efficiently. ✨ A quick breakdown: A Date in JS primarily includes day, month, year, and timezone. Most operations revolve around the built-in Date object. To get the current date: const currentDate = new Date(); Dates are represented as strings, for example: 2028-09-04T10:34:23 You can convert these into readable strings using: toString(), toDateString(), toUTCString() Need to access specific parts of a date? Use getters like getFullYear(), getMonth(), or getDate(). Want to modify them? Use setters like setFullYear() or setMonth(). 💡 Understanding these small details helps you go beyond copy-pasting — giving you real control over how your app handles time and data. #100DaysOfDev #JavaScript #WebDevelopment #CodingJourney #FrontendDevelopment #DeveloperLife #LearnInPublic

😂 Day 40/100 – Random Joke Generator using JavaScript & API Fetch 🚀 Day 40 of the #100DaysOfCode challenge is all about mixing humor with learning! I built a fun Random Joke Generator App 🎭 that fetches a new joke each time you click the button. ✨ What I learned today: 🔹 Fetching data from public APIs using fetch() 🔹 Handling asynchronous operations with .then() and .catch() 🔹 Dynamically updating the DOM with fetched content 🔹 Displaying a spinner while the data loads for better UX This project was a light-hearted yet powerful lesson in real-world API handling and frontend interactivity 😄 #100DaysOfCode #JavaScript #WebDevelopment #Frontend #CodingChallenge #LearningByDoing #NxtWave #APIIntegration #CCBP #AsyncJS #FunWithCode

I had an argument today on a topic which can be skipped very easily (You don't want to miss reading it) The issue was with understanding the following: ↳ setState() ↳ Mutable & Immutable ↳ Deep and Shallow Copy This looks like an easy concept, but if missed, you will keep scratching your head, or just do vibe coding (which is not recommended) const myInitialState = [ { name: 'name', age: 10 }, { name: 'name1', age: 20 }]; ❌ setState(prevState => prevState.sort((a, b) => a.age - b.age)); ✅ setStatet(prevState => { const sorted = [...prevState]; sorted.sort((a, b) => a.age - b.age)); return sorted; }); Q1. Why does updating the older value doesn't work, and the later works? Q2. Creating a copy via [...prevState] is still a shallow copy, then how does React knows something has changed? Answer 1. The reference matters here. When you change something to the older value, the reference doesn't change, and React thinks, it is still unchanged, hence, no re-render trigger, and no UI updates. Answer 2. Even when you create shallow copy, you are creating a new reference. Creating a new array via "[ ]" → Then shallow copy the items using Spread operator. So the reference of sorted and prevState changes. As soon as React sees that in the return, it triggers re-render, as per "Diffing Algorithm". If you have learnt something new, let your friend learn it too via Repost ♻️ P.S. I have bonus questions in the comment section. Let's check how good do you know React #reactjs #react #javascript #coding #programming #softwareengineering #frontend

💡 Understanding React Hooks — The Game Changer in Modern React Development When React introduced Hooks, it completely transformed how developers write components. No more juggling between class components and lifecycle methods — Hooks made it possible to use state and side effects in functional components. Here’s why they matter: ✅ Cleaner Code – Hooks remove the need for complex class syntax. ✅ Reusability – With custom hooks, logic can be shared easily across components. ✅ Better Readability – Functional components are easier to reason about and test. Some key hooks every React developer should know: 🔹 useState – For managing component state. 🔹 useEffect – For side effects like fetching data or handling subscriptions. 🔹 useContext – For accessing global data without prop drilling. 🔹 useRef – For referencing DOM elements or persisting mutable values. 🔹 useMemo / useCallback – For optimizing performance. And of course, custom hooks let you encapsulate logic like authentication, fetching, or form handling into clean, reusable functions. 👉 If you’re still writing class components, now’s the time to explore Hooks. They make React more expressive, modular, and fun to work with! What’s your favorite hook, and how has it simplified your workflow? #React #JavaScript #WebDevelopment #Frontend #Coding #Hooks #ReactJS

When I am working on any coding project, I waste many hours on writing boilerplate, API testing and more. These extensions help me save a lot of time and also boost my productivity. If you are a developer who wants to boost your productivity and time. Please try these, 1. Typescript code snippet by Infeng 2. React/redux/react-native code snippet by Dsznajder 3. Nextjs JS/TS snippet by Ioczek 4. Tailwindcss intellisense by taiwindcss.com 5. Thunderclient for light-weight rest-api 6. Error lens by Alexander 7. Headwind by ryan heybourn 8. Blackbox 9. Github Copilot 10. ChatGPT 🔷 Bonus: Amazon Q extension, In the past few weeks, I have used these extensions for building frontend and creating repetitive layout components with support Claude sonnet 4 model and its good creating a UI layout. But sometimes it is not good for code fixing and debugging. You can install these extensions from vscode marketplace. ✅ If it's really helpful to you, please follow for more such real life developer experience and dev insights. #vscode #vscodeextensions #coder #webdevelopment #development