How to Use React Context API for Global Data Sharing

🚀 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

⚛️ Hooks & Advanced State Management in React Today’s revision took me beyond useState — into how React actually handles complex data flows. Understanding how hooks manage logic, memory, and UI updates feels like unlocking React’s real power. Here’s what I explored 👇 🔹 Functions – Write clean, reusable logic. 🔹 Hooks – Make components reactive & data-driven. 🔹 Advanced State Management – Go beyond useState for complex apps. 💡 When to move beyond useState: Use useReducer when your component has multiple, related state updates. Use Context API for data that needs to be shared across components. Use Zustand when you want lightweight, global state management without Redux complexity. Example with Zustand: import { create } from 'zustand' const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })) })) Clean, minimal, and surprisingly powerful ⚡ The deeper I go, the more I realize — React isn’t just about UI. It’s about managing change efficiently. #ReactJS #Zustand #StateManagement #FrontendDevelopment #WebDevelopment #JavaScript #BuildingInPublic #100DaysOfCode #CodingJourney

⚛️Understanding React Context API -> Simplifying State Management In React applications, managing data across multiple components can get tricky especially when props have to be passed down through several layers. This is where the Context API comes to the rescue! 🚀 The Context API allows you to share data (like theme, user info, or language settings) across components without prop drilling. It acts as a global state accessible from anywhere in your component tree. ⚙️ How It Works Create Context – Define a context using React.createContext(). Provide Data – Use the Provider component to wrap parts of your app and pass data as a value. Consume Data – Access the data using useContext() in any component that needs it. This makes your code cleaner, easier to maintain, and avoids passing props manually through multiple levels. #ReactJS #ContextAPI #WebDevelopment #Frontend #ReactDeveloper #JavaScript #Coding #LearnReact #SoftwareEngineering #TechBlog #stemup

⚛️ 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

Most developers pick Redux for everything. I used to be one of them. After 47 React projects, here's when I actually use each: Context API wins when: • Team has 3 or fewer developers • App state fits in 2-4 contexts max • You need something working in 30 minutes • No complex async operations Redux wins when: • Team has 5+ developers • You need time travel debugging • Complex state logic spans multiple components • Heavy async with middleware needs The real mistake? Forcing Redux into every project because it feels "professional." I've seen 3-person teams spend 2 weeks setting up Redux for a simple dashboard that Context API could handle in 1 afternoon. Your tool choice should match your complexity, not your ego. What's your go-to method for deciding between state management approaches? #ReactJS #WebDevelopment #JavaScript #TechTrends #SoftwareDevelopment #ProgrammingTips #Rankue #Vonyex

😤 “I wrapped it in useMemo... but the component is still slow!” I faced this while optimizing a React dashboard. I used useMemo and useCallback everywhere — but performance barely improved. Turns out, I was solving the wrong problem. 🧠 What’s Really Happening useMemo and useCallback don’t make code faster — they just avoid recalculations if dependencies don’t change. But if your dependency is always changing, memoization never kicks in. Example 👇 const data = useMemo(() => expensiveCalculation(filters), [filters]); If filters is a new object every render (like { type: 'active' }), useMemo recomputes anyway — no performance win. ✅ The Fix Stabilize your dependencies first. Use useState, useRef, or memoize higher up to prevent unnecessary object recreation. const [filters, setFilters] = useState({ type: 'active' }); Or extract stable references: const stableFilter = useMemo(() => ({ type: 'active' }), []); Then memoization actually works as intended ✅ 💡 Takeaway > useMemo is not magic. It’s only as good as the stability of your dependencies. Optimize data flow first, hooks second. 🗣️ Your Turn Have you ever overused useMemo or useCallback? What’s your go-to way to diagnose React re-renders? #ReactJS #WebDevelopment #PerformanceOptimization #FrontendDevelopment #JavaScript #CleanCode #CodingTips #DevCommunity #LearnInPublic

🚨 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

Ever wondered why sometimes React just… ignores your state update? No error. No re-render. Just silence. The answer usually comes down to one sneaky word: "mutation". In React, to mutate means to change data directly in memory. Like this 👇 arr.push(4); It works in plain JavaScript — but in React, that tiny change can break how your component updates. Why? Because React doesn’t watch your data. It watches references. When you mutate state directly, React compares old and new references and thinks: “Nothing changed.” So it skips the re-render altogether. The fix is simple — but powerful: Create a new copy of your data instead of changing the original. ✅ Correct way: setItems([...items, 4]); Now React sees a brand-new reference → and updates the UI instantly. Here’s the fun twist: If you’ve used React Query, you’ve probably seen mutate() there too. But that one’s completely different — it means send data to the server (like POST or PUT). Same name. Totally different meaning. 😅 💡 Rule of thumb: If it’s React state → never mutate directly. If it’s React Query → go ahead and mutate(). What’s one React “gotcha” you wish you’d learned earlier? #ReactJS #WebDevelopment #Frontend #JavaScript #ReactQuery #CodingTips #LearnReact

Ever feel like you're fighting an invisible monster causing infinite re-renders in React? I lost a solid hour to one yesterday. My component was simple: a `useEffect` fetching data. But it was firing non-stop. 😩 I checked the dependency array, and it *looked* fine. The culprit? I was passing an object directly: `useEffect(fetchData, [myConfigObject])`. On every render, a 𝐧𝐞𝐰 `myConfigObject` instance was created, even with the same values. React saw a different object reference and re-ran the effect, triggering another render. A vicious cycle! 🔄 The React DevTools Profiler finally helped me see the light. 💡 Remember: for non-primitive dependencies in `useEffect`, either destructure them into primitives or memoize them with `useMemo`. Have you struggled with this before? #ReactJS #FrontendDevelopment #DeveloperTips

Day 2: Learning React Hooks Today I learned about React Hooks, and it really helped me understand how React works. Hooks are special functions that let us use React features (like state and lifecycle methods) inside functional components. Before Hooks, developers used class components to manage data and logic. But with Hooks, we can do all of that in a much simpler way using just functions. Here are a few Hooks I learned today: 👉 useState – helps us add and update data inside a component. 👉 useEffect – runs code when something changes (for example, fetching data or updating the DOM). 👉 useRef – helps us directly access HTML elements or store values without re-rendering. I really like how Hooks make React code cleaner, shorter, and easier to understand. Excited to keep learning more Hooks like useContext and useReducer next! 🚀 #React #ReactHooks #WebDevelopment #LearningJourney #FrontendDevelopment