Building a Weather Dashboard with Vanilla JavaScript

I used to think React components were only for displaying data. But what happens when you need to fetch an API, start a timer, or change a page title? Today, I’m documenting how to handle these "Side Effects" using the useEffect hook. Think of it as a remote control for your component. It lets the UI "reach out" to external systems without blocking the main screen. Here is what I’m practicing to keep my apps synchronized: 1) The Dependency Array: This is the control center. I’m learning how an empty array [] makes the code run only once, while adding specific variables makes it run only when they change. 2) Pure Components: I'm focusing on keeping my components "pure"—data goes in, and UI comes out—while letting useEffect handle everything that happens "outside" that flow. 3) The Cleanup: I learned that if I start a timer or a subscription, I have to "turn off the lights" when the component is finished. Using the return pattern prevents memory leaks. I'm still learning the ropes, but mastering this hook is the key to building real-world, data-driven applications. Tomorrow, I’m tackling the "Prop Drilling" nightmare with the React Context API! Quick question: When you first started with React, did you find the dependency array confusing? It definitely took me a minute to get it right! #CodeWithWajid #ReactJS #WebDevelopment #30DaysOfCode #LearningToCode #BuildingInPublic #Frontend #useEffect

🚀 Just Built: Async Weather Tracker 🌦️ I recently developed a modern weather web application using core frontend technologies, and it turned out to be a great hands-on experience in working with asynchronous JavaScript. 🔍 What the project does: The app allows users to search for real-time weather data of any city, or fetch it instantly using their current location. 💡 Key Features: • 🌍 Real-time weather using OpenWeatherMap API • 📍 Geolocation-based weather detection • 🌈 Dynamic background changes based on weather conditions • 🧠 Smart suggestions (e.g., carry umbrella, stay hydrated) • 🌙 Dark / Light mode toggle • 🗂️ Search history using localStorage • ⚡ Event Loop visualization (microtask vs macrotask logs) 🛠️ Tech Stack: HTML • CSS • JavaScript (Async/Await, Fetch API) 🎯 What I learned: This project helped me deeply understand: ✔ Async JavaScript & Event Loop ✔ API integration & error handling ✔ DOM manipulation & UI updates ✔ Local storage for persistence 🌐 Live Demo:https://lnkd.in/g5SSsc_U 💻 GitHub Repo:https://lnkd.in/gS3M8gs6 I’m continuously working on improving the UI and adding more advanced features like charts and forecasts. Would love your feedback and suggestions! 🙌 #webdevelopment #javascript #frontend #project #github #learning #coding #weatherapp #async #students #developers

React Hooks changed the game by allowing us to use state and other features without writing classes. If you are building modern web apps, mastering these hooks is non-negotiable! 💻✨ Here is a quick guide to the most essential React Hooks and when to use them: 🔹 useState – The State Manager Purpose: Manages local component data. Use Cases: Form inputs, counters, toggles, or any dynamic UI updates. 🔹 useEffect – The Lifecycle Handler ⚡ Purpose: Handles side effects (actions outside React's control). Use Cases: API data fetching, setting up timers, or direct DOM manipulation. 🔹 useContext – The Prop-Drilling Killer 🛡️ Purpose: Shares data globally across the component tree. Use Cases: User authentication, Theme switching (Dark/Light mode), or Language settings. 🔹 useRef – The Persistent Reference Purpose: Grabs DOM elements or stores values without triggering a re-render. Use Cases: Focusing an input field, managing scroll positions, or storing previous state values. 🔹 useMemo – The Value Optimizer 🧠 Purpose: Remembers expensive calculation results. Use Cases: Filtering massive datasets or heavy mathematical computations. 🔹 useCallback – The Function Memorizer Purpose: Prevents functions from being recreated on every render. Use Cases: Passing stable functions to optimized child components to prevent lag. 🔹 useReducer – The Complex State Boss Purpose: Manages complex state logic (Redux-style). Use Cases: Multi-step forms or states where one update depends on another. ✨ Why Hooks Matter? Hooks don't just "make things work"—they make your code readable, reusable, and scalable. They separate concerns and keep your components clean. Which Hook do you find most challenging to master? Let's discuss in the comments! 👇 #ReactJS #WebDevelopment #Frontend #JavaScript #CodingTips #ReactHooks #SoftwareEngineering #Programming

⚡ Redux vs Context — Which One Should You Use? State management in React can be confusing… Especially when choosing between Redux and Context API🤔 Let’s simplify it 👇 🟣 Redux (Powerful & Scalable) 👉 Best for large-scale applications 📌 How it works: • Centralized store • Actions → Reducers → Store • Predictable state updates 💡 Why use Redux? ✔ Handles complex state logic ✔ Great for large teams & apps ✔ Debugging with DevTools ⚠️ Downside: • More boilerplate • Setup can feel heavy 🔵 Context API (Simple & Lightweight) 👉 Best for small to medium apps 📌 How it works: • Built into React • Share state across components • No external libraries 💡 Why use Context? ✔ Easy to set up ✔ Less code ✔ Perfect for themes, auth, small state ⚠️ Limitation: • Not ideal for complex state • Performance issues if overused ⚡ Key Differences ✔ Redux → Scalable, structured, powerful ✔ Context → Simple, lightweight, quick setup 🧠 When to Choose What? 👉 Use Context for: • Theme • Authentication • Small shared state 👉 Use Reduxfor: • Large applications • Complex business logic • Multiple state updates 🔥 Pro Tip: Start with Context → Scale to Redux when complexity grows 💬 What are you using in your project — Redux or Context? #React #Redux #ContextAPI #Frontend #WebDevelopment #JavaScript #Coding #SoftwareEngineering

𝐈 𝐣𝐮𝐬𝐭 𝐛𝐮𝐢𝐥𝐭 𝐚 𝐖𝐞𝐚𝐭𝐡𝐞𝐫 𝐀𝐩𝐩 𝐮𝐬𝐢𝐧𝐠 𝐇𝐓𝐌𝐋, 𝐂𝐒𝐒, 𝐚𝐧𝐝 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 🌦️ This project helped me understand how real-world web apps work especially when working with APIs. 𝐇𝐞𝐫𝐞’𝐬 𝐰𝐡𝐚𝐭 𝐭𝐡𝐞 𝐚𝐩𝐩 𝐜𝐚𝐧 𝐝𝐨: 🔍 Search weather by 𝐜𝐢𝐭𝐲 𝐧𝐚𝐦𝐞 🌡️ Display current 𝐭𝐞𝐦𝐩𝐞𝐫𝐚𝐭𝐮𝐫𝐞 💧 Show 𝐡𝐮𝐦𝐢𝐝𝐢𝐭𝐲 𝐥𝐞𝐯𝐞𝐥𝐬 🌬️ Show 𝐰𝐢𝐧𝐝 𝐬𝐩𝐞𝐞𝐝 🥵 Display "𝐅𝐞𝐞𝐥𝐬 𝐋𝐢𝐤𝐞" temperature 📅 Automatically show the 𝐜𝐮𝐫𝐫𝐞𝐧𝐭 𝐝𝐚𝐭𝐞 🌤️ 𝐃𝐲𝐧𝐚𝐦𝐢𝐜 𝐰𝐞𝐚𝐭𝐡𝐞𝐫 𝐢𝐜𝐨𝐧𝐬 based on conditions 📆 4-𝐝𝐚𝐲 weather forecast ❌ Handles 𝐢𝐧𝐯𝐚𝐥𝐢𝐝 𝐜𝐢𝐭𝐲 𝐬𝐞𝐚𝐫𝐜𝐡𝐞𝐬 gracefully 𝐓𝐞𝐜𝐡𝐧𝐨𝐥𝐨𝐠𝐢𝐞𝐬 𝐮𝐬𝐞𝐝: • HTML • CSS (Glassmorphism UI) • JavaScript • OpenWeather API Since the weather data is fetched from the 𝐎𝐩𝐞𝐧𝐖𝐞𝐚𝐭𝐡𝐞𝐫 𝐀𝐏𝐈, the results shown in the app are based on that data source. Because of this, the temperature or conditions may sometimes differ slightly from other platforms like 𝐆𝐨𝐨𝐠𝐥𝐞 𝐖𝐞𝐚𝐭𝐡𝐞𝐫. Building this project was a great learning experience, especially understanding how to 𝐟𝐞𝐭𝐜𝐡 𝐀𝐏𝐈 𝐝𝐚𝐭𝐚 and dynamically update the UI using JavaScript. 🌐 Live App: https://lnkd.in/dM-jsc8R 💻 GitHub Repo: https://lnkd.in/dTtdt47u If you're learning frontend development, 𝐛𝐮𝐢𝐥𝐝𝐢𝐧𝐠 𝐬𝐦𝐚𝐥𝐥 𝐩𝐫𝐨𝐣𝐞𝐜𝐭𝐬 like this is one of the best ways to improve. What project are you 𝐜𝐮𝐫𝐫𝐞𝐧𝐭𝐥𝐲 𝐛𝐮𝐢𝐥𝐝𝐢𝐧𝐠? 👇 #webdevelopment #frontenddeveloper #javascript #html #css #coding #buildinpublic

Last quarter I spent 3 days profiling a React dashboard that felt broken. Users reported 400ms+ delays on every click. The team before me had already memo'd everything in sight. React.memo here, useMemo there. Like putting band-aids on a sinking ship. Turned out the actual problem was embarrassingly simple. One context provider. Twelve state slices shoved into it. A search field keystroke was re-rendering 80+ components because they all subscribed to the same god-context. The memos couldn't help — the parent was the problem. I split that provider into three domain-specific ones. Swapped derived-state recalculations for useSyncExternalStore. Threw react-window on the heaviest list instead of trying to optimize 200 individual row components. Added React.memo in exactly four places. Only where React DevTools Profiler showed actual wasted renders. Not "just in case." Four. Interaction latency went from 400ms to ~90ms. No new libraries. No rewrite. Honestly felt anticlimactic. The uncomfortable truth: most React perf work I've seen is teams reaching for micro-optimizations because it feels productive. But wrapping a child in memo won't save you if the parent re-renders on every state change. Profile first. Split contexts second. Memo last — and only where the profiler tells you to. 🔧 Curious — has anyone here had the opposite experience, where useMemo actually was the right first move? I've never seen it, but I want to be wrong. #ReactJS #FrontendDevelopment #PerformanceOptimization #WebDev #SeniorDeveloper

I used to get confused when I changed a variable in my code, but nothing happened on the screen. In React, I learned that you don't just change data—you have to manage the State. Today, I’m documenting how to give components "memory" using the useState hook. It’s the difference between a static page and an interface that actually reacts to the user. Here is how I’m thinking about it now: 1) State is Memory: Unlike normal variables that reset every time a component runs, state variables stay. When state changes, React "reacts" and updates the UI. 2) The Hook (useState): I’m using this tool to handle memory. It gives me the current value and a specific function—the "setter"—which is the only way to change that value. 3) The "Bell" (Re-rendering): I learned that you should never change state directly. You have to use the setter function. It’s like ringing a bell to tell React, "Hey, I changed something, please update the screen!" I'm still learning the ropes, but mastering state is what allows me to build anything from a simple counter to a complex dashboard. Tomorrow, I'm diving into how to handle "side effects" like fetching data with useEffect! Quick question: What was the first thing you built once you understood useState? For me, it was a classic counter! #CodeWithWajid #ReactJS #WebDevelopment #30DaysOfCode #LearningToCode #BuildingInPublic #Frontend #StateManagement

🚀 Day 38 - Countries Search App 🌍 Today I built a Countries Search Page using JavaScript by working with real-world API data...! 🔍 What I learned: • How to make API calls using fetch() • Handling asynchronous data with .then() • Showing a loading spinner while fetching data • Dynamically creating elements using DOM manipulation • Implementing real-time search with input event • Filtering data using .filter() • Rendering UI based on user input 🛠️ What I built: ✔️ Search countries by name ✔️ Display country flag, name, and population ✔️ Loader while fetching data ✔️ Clean responsive UI using Bootstrap This project helped me understand how real applications fetch and display live data...! Project Links • GitHub Repo: https://lnkd.in/dc2u6QUU • Live Demo: https://lnkd.in/dahs_-Dv Small projects like this are building my confidence step by step 💪 #Day38 #LearnInPublic #JavaScript #WebDevelopment #Frontend #CodingJourney #100DaysOfCode

React is unidirectional. Data flows down. If you’ve spent any time in React, you know the drill, parents talk to children via props. It’s predictable, and it’s why the library scales. But it leads to the inevitable question, How does the child talk back? It’s not a "reverse prop" or some hidden magic. It’s actually a classic JavaScript pattern. While data flows down, functions are first-class citizens. To let a child communicate, the parent defines a "handler" function and passes it down as a prop. The child doesn't send data up in the traditional sense, it simply executes the function it was given. This is the essence of lifting state up. The parent keeps the "source of truth," and the child remains reusable, only triggering the parent’s logic when an event occurs. Of course, once you’re passing functions down five levels deep, you’re in prop drilling hell. That’s usually the signal to reach for the Context API or a state manager like Zustand to keep your components clean. Are you - context API purist? - prefer a dedicated state manager for handling these flows? #ReactJS #WebDevelopment #SoftwareEngineering #Frontend #Javascript

Earlier, managing state and lifecycle methods required class components. But with Hooks, functional components became powerful, cleaner, and easier to manage. 📊 React Hooks Flow: Component Render ↓ useState → Manage Data (state) ↓ useEffect → Handle Side Effects (API, lifecycle) ↓ useRef → Access DOM directly ↓ useContext → Share data globally ↓ useReducer → Manage complex logic Real Understanding: useState = “Store data” useEffect = “Do something after render” useRef = “Grab element directly” useContext = “Global data without props” useReducer = “Advanced state management” Key Learning: Hooks are not just functions — they completely changed how we build React apps. #React #JavaScript #Development