Learning React Hooks: useState, useEffect, useRef

🚀 Starting My Node.js Journey (Day 1 & 2 Recap) This week, I officially began exploring Node.js — stepping beyond frontend JavaScript to understand how it powers the backend world. Here’s what I’ve covered so far 👇 🗓️ Day 1 — Getting Started ✅ Learned what Node.js is and how it runs JavaScript outside the browser. ✅ Understood the core architecture (V8 Engine + Event Loop). ✅ Installed Node & npm, explored REPL, and ran my first script using node app.js. ✅ Built a small CLI Math Tool using process.argv to perform add, sub, mul, and div directly from the terminal. 💻 Sample Run: node mathTool.js add 10 5 ➡️ Result: 15 🗓️ Day 2 — Understanding Modules ✅ Explored how Node.js uses require() and module.exports to create modular, reusable code. ✅ Practiced destructuring imports like { add } = require('./math'). ✅ Learned how to structure multi-file projects for better maintainability. 💻 Mini Project: Temperature Converter App 🌡️ Built using three modules: converter.js → handles conversion logic utils.js → handles output formatting app.js → main CLI file Example: node app.js CtoF 30 ➡️ Converted temperature: 86.00°F 🧠 Key Takeaway: Even in just two days, I realized how powerful Node.js is when it comes to modular design, simplicity, and running JavaScript beyond the browser. #Nodejs #BackendDevelopment #LearningInPublic #JavaScript #MERNstack #100DaysOfCode #DevelopersJourney

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

Learning React with TheMealDB API In the early days of my React learning journey, I wanted to understand how to work with APIs, manage data, and use React hooks effectively. ⚛️ So, I built a Meal Finder Website using the TheMealDB API 🍛 Through this project, I learned how to: 🔹 Use the useEffect hook to fetch data from an external API 🔹 Manage and update state with useState 🔹 Handle asynchronous functions in React 🔹 Build a dynamic UI that displays meal categories, details, and search results This project really helped me understand how React interacts with real-time data and made me more confident in handling APIs and side effects. 🚀 💻 Tech Stack: React, TheMealDB API, HTML, CSS, JavaScript 🌍 Live Demo: https://lnkd.in/gYHqm_H5 💾 GitHub Repo: https://lnkd.in/g6-pVjRc #React #JavaScript #FrontendDevelopment #useEffect #APIIntegration #LearningJourney #WebDevelopment #BuildInPublic

⚛️ A real-life React situation that taught me a valuable lesson! I was fetching data from an API inside my React component. Everything worked fine at first — until I noticed something strange… the API was being called again and again 😅 My first thought: “Is my API haunted?” 👻 Turns out, it was just me forgetting to add the dependency array in useEffect. Here’s what I learned 👇 ❌ Wrong: useEffect(() => { fetchData(); }); ✅ Correct: useEffect(() => { fetchData(); }, []); The empty [] tells React to run the effect only once when the component mounts — not after every render. Lesson learned: sometimes one missing pair of brackets can cause infinite chaos 😆 Every mistake in React makes me understand it better — one re-render at a time! 🚀 #ReactJS #MERNStack #FrontendDevelopment #WebDevelopment #CodingJourney #LearningByDoing

🎯 React Context API — Share Data Across Components Easily! Ever struggled to pass props between multiple components? That’s where React Context API comes in — it lets you share data globally without prop-drilling. Here’s the full example 👇 ✅ Step 1 – Create and Use Context 🧩 Step 2 – Use It in Another Component ⚡ Step 3 – Include It in Your Main App 💡 How It Works createContext() → Creates a shared data space <UserContext.Provider> → Broadcasts the value to all children useContext(UserContext) → Reads the shared value anywhere inside Without the <Provider>, components will get undefined — because there’s no “signal” being sent 📡 🔥 Key Takeaway: React Context is your built-in global state manager — no extra libraries, no prop chaos! #ReactJS #ContextAPI #JavaScript #FrontendDevelopment #WebDevelopment #ReactTips #LearnCoding

🎯#90DaysOfCode Challenge | Day 8/90 For Day 8, I tackled a classic but essential application: a fully functional To-Do App, built with HTML+CSS and JavaScript I'm excited to apply these principles as I learn the MERN Stack guided by resources from Rohit Negi and the CoderArmy community. Managing tasks effectively is key to productivity, and building this app was a fantastic exercise in handling dynamic data and user interactions. Here’s a deeper look at the core functionalities and learnings: ⚙️ Implementing Client-Side CRUD: This project provided solid practice for CRUD (Create, Read, Update, Delete) operations purely on the client-side: * Create: Adding new tasks to the list. * Read: Displaying all tasks, with filtering options. * Update: Toggling the completion status of tasks. * Delete: Removing individual tasks or clearing all completed ones. This involved significant work with JavaScript array manipulation (map, filter). 💾 Data Persistence with localStorage: To make the app practical, I implemented localStorage to save the user's tasks. Now, tasks aren't lost when the browser is closed – a crucial feature for any real-world application. ✨ Dynamic UI Rendering & Filtering: The UI updates instantly as tasks are added, completed, or deleted. I also built filtering logic (All / Active / Completed) which dynamically re-renders the list based on the selected filter, providing a smooth user experience. 🧠 Practicing State Management (Vanilla JS): Managing the array of to-do items, their statuses, and the current filter felt like foundational practice for the state management concepts I'll encounter in React. ➖Building these core features in vanilla JS provides a strong base for understanding how things work under the hood. It makes me appreciate the abstractions that frameworks offer. live demo: https://lnkd.in/ga7k4R-z #90DaysOfCode #JourneyToFullStack #WebDevelopment #Frontend #JavaScript #CRUD #LocalStorage #StateManagement #Productivity #MERNStack #RohitNegi #CoderArmy #CodingChallenge #Day8

💡 React Practical Application! 💡 I recently built a small landing page — not focusing on the UI this time, but as a practical project to apply the React concepts I learned throughout a course 👩💻 Here’s what I used and why: - useEffect – to fetch data from the API when the page loads. - useContext – for managing global state instead of passing props around. - useCallback – to prevent unnecessary re-renders and improve performance. - useFormAction – to handle and control form data efficiently. - And I built a custom hook, useHttp, to manage API requests in a reusable way. I first built the API locally with JSON Server — and for the first time, I deployed the backend on Railway to make it live and connect it to the frontend demo 🚀 It was such a great learning experience! This practice helped me strengthen my understanding of data flow in React, hooks behavior, and backend integration — all through hands-on learning. 🔗 GitHub Repo: https://lnkd.in/d9yDCGaU 💻 Live Demo: https://lnkd.in/dgr8fixm #React #FrontendDevelopment #WebDevelopment #Railway #Hooks #JavaScript #LearningByDoing

💻 𝗙𝗿𝗼𝗻𝘁-𝗘𝗻𝗱 𝗧𝗮𝘀𝗸: 𝗟𝗼𝗮𝗻 𝗙𝗼𝗿𝗺 𝘂𝘀𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 After finishing the core concepts of JavaScript and learning how to work with APIs, I decided to take the next step and start learning the React library. I found React extremely helpful and powerful for building and organizing UI components — you can create a component once and reuse it anywhere in your project, which makes development much more efficient and organized. For this task, I built a Loan Form that collects user information to determine whether the user is approved for a loan or not. It was a great hands-on project that helped me practice key React concepts such as:  • Managing state using useState  • Controlling component visibility based on certain states and conditions  • Structuring and reusing components effectively This task really helped me strengthen my understanding of React fundamentals and improve my confidence in handling interactive UIs and state-based logic. 🚀 Feel free to see the code: https://lnkd.in/dcDNkQRd

🎯 Mastering React Hooks I explored React Hooks, one of the most powerful features in React that allows you to use state, lifecycle, and other React capabilities in functional components without writing class components. 💡 What Are Hooks? Hooks are functions that make your React code cleaner, reusable, and easier to maintain. They simplify complex state logic and eliminate the confusion around this in class components. 🚀 Key Hooks I Learned: 1️⃣ useState – Manage local state (e.g., counters, form inputs, toggles). 2️⃣ useEffect – Handle side effects like API calls, DOM updates, and subscriptions. 3️⃣ useContext – Share data globally without prop drilling. 4️⃣ useReducer – Manage complex state transitions (like Redux). 5️⃣ useCallback / useMemo – Optimize performance and prevent unnecessary re-renders. 6️⃣ useRef – Directly access DOM elements or store mutable values. 7️⃣ useLayoutEffect – Handle synchronous DOM updates to prevent flicker. 8️⃣ useImperativeHandle – Expose child component functions to parents. 9️⃣ useDebugValue – Debug custom hooks in React DevTools. 💻 Real-World Use Cases: Dynamic dashboards with live updates. Form handling and validation. API-driven data visualization. Performance optimization in large-scale applications. #ReactJS #FullstackDevelopment #ReactHooks

🚀 How I solved a real-world API problem in my React project Recently, while building my React-based news app, I ran into an interesting problem that turned into a great learning experience. Initially, I deployed the project using GitHub Pages and integrated the NewsAPI to fetch live headlines. Everything worked perfectly on localhost — until I deployed it. Once live, every API call started failing with mysterious CORS and 426 errors. After some debugging, I realized: 👉 NewsAPI (on the free plan) doesn’t allow direct browser calls from deployed origins like GitHub Pages. That’s when I learned an important concept — “Static hosting + Direct API calls = CORS issues.” 🧠 My solution: Instead of calling the NewsAPI directly from the React frontend, I deployed a serverless function on Vercel that securely calls the API on the backend and sends the data to my frontend. Basically, I turned Vercel into a lightweight API proxy: It keeps my API key safe 🔐 It bypasses CORS restrictions 🌐 It allows GitHub Pages (static) and my backend (Vercel) to work seamlessly together 💡 ⚙️ Stack: Frontend: React + GitHub Pages Backend: Vercel Serverless Functions API: NewsAPI Other tools: Infinite Scroll, React Router, and a custom loading bar component 💡 If you’re a React developer deploying with GitHub Pages and your API suddenly stops working — check if your backend allows browser calls! Would love to hear — have you ever faced a similar issue while deploying your project? #React #WebDevelopment #Vercel #GitHubPages #NewsAPI #Frontend #DeveloperJourney #JavaScript