Building WeChat: Real-Time Chat App with Clean Architecture

🚀 Day 12/30 – Conditional Rendering in React Building dynamic UIs based on conditions ⚡ Today’s focus was on Conditional Rendering — a core concept that makes React apps interactive and user-driven. 🔍 What I learned: ✅ Conditional Rendering allows UI to change based on state ✅ React relies on pure JavaScript logic (if, ternary, &&) inside JSX ✅ Essential for real-world features like authentication, loaders, and error handling 💻 Example: function App() { const isLoggedIn = true; return ( <> {isLoggedIn ? <h1>Welcome User</h1> : <h1>Please Login</h1>} </> ); } 🔥 Common Patterns: 1️⃣ Ternary Operator (Most Used) {condition ? <A /> : <B />} 2️⃣ Logical AND (&&) {isLoggedIn && <Dashboard />} 3️⃣ If Statement (Outside JSX) if (!user) return <Login />; 💡 Real-World Use Cases: ✔️ Showing a loader while fetching data ✔️ Displaying error messages ✔️ Rendering dashboard after login ⚡ Advanced Insight: React doesn’t introduce new syntax for conditions — it simply leverages JavaScript inside JSX, making it flexible and powerful. 🔑 Key Takeaway: 👉 Conditional Rendering = Controlling what users see based on application state. 💬 Curious — which approach do you use more: ternary or if/else logic? #React #FrontendDevelopment #JavaScript #WebDevelopment #LearningInPublic

💡 Understanding Different Types of State in React When working with React, mastering state management is key to building scalable and maintainable applications. Not all state is the same — and knowing the different types can help you design better components and avoid unnecessary complexity. Here’s a quick breakdown 👇 🔹 1. Local State (Component State) Managed within a single component using useState or useReducer. 👉 Best for UI-specific data like form inputs, toggles, or counters. 🔹 2. Global State Shared across multiple components. 👉 Managed using tools like Context API, Redux, or Zustand. 👉 Useful for themes, authentication, user data, etc. 🔹 3. Server State Data that comes from external APIs. 👉 Managed using libraries like React Query or SWR. 👉 Handles caching, syncing, and background updates efficiently. 🔹 4. URL State State stored in the URL (query params, route params). 👉 Useful for filters, pagination, and sharable app states. 🔹 5. Form State Dedicated state for managing forms. 👉 Libraries like React Hook Form or Formik simplify validation and handling. 🔹 6. Derived State State computed from existing state or props. 👉 Avoid storing it separately unless necessary — derive it when needed. 🔹 7. UI State Controls visual aspects like modals, dropdowns, loaders, etc. 👉 Usually local but can be global depending on use case. ⚡ Key Takeaway: Not every piece of data needs to be global. Choosing the right type of state improves performance, readability, and maintainability. 📌 Ask yourself: “Where should this state live?” — The answer often defines the architecture of your app. #React #FrontendDevelopment #JavaScript #WebDevelopment #StateManagement #ReactJS

Before writing useEffect, I ask myself one question. Am I interacting with something outside React? If yes → useEffect If not → there’s usually a better abstraction. I still see data fetching inside useEffect in production apps: useEffect → fetch → setState It works. But at scale, it becomes manual plumbing: • No caching • No retries • Manual loading/error states • Re-fetches on mount • Harder cancellation Modern tools like React Query, SWR, and Next.js server components solve this much better. The hook isn’t bad. It’s just far more specific than most codebases use it for. The difference between good React code and scalable React architecture is often: choosing the right abstraction early. What’s your rule for deciding when to use useEffect? #React #frontend #softwareengineering #webdevelopment #javascript

𝐈 𝐣𝐮𝐬𝐭 𝐛𝐮𝐢𝐥𝐭 𝐚 𝐖𝐞𝐚𝐭𝐡𝐞𝐫 𝐀𝐩𝐩 𝐮𝐬𝐢𝐧𝐠 𝐇𝐓𝐌𝐋, 𝐂𝐒𝐒, 𝐚𝐧𝐝 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 🌦️ 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

WebAssembly Explained: Faster, Smarter Web Apps ~ I recently spent some time understanding WebAssembly (Wasm), and it completely changed how I think about performance on the web. WebAssembly is often described as a "low-level binary format," but in simpler terms—it’s a way to run super-fast code in the browser without relying only on JavaScript. What clicked for me is this: Wasm isn’t here to replace JavaScript. It works with it. Think of JavaScript as the brain handling UI and interactions, while WebAssembly acts like a high-performance engine doing the heavy lifting behind the scenes. Here’s why that matters: • You can write code in languages like Rust or C++ • Compile it into a .wasm file • Run it in the browser at near-native speed That opens up a whole new category of web applications. I’ve started noticing Wasm behind things like: • Browser-based games that feel like desktop apps • Video and image processing tools running smoothly online • Complex simulations and developer tools directly in the browser It’s basically shrinking the gap between web apps and native software. But it’s not perfect. Wasm still depends on JavaScript for many browser-level interactions, and debugging isn’t as straightforward yet. Also, for simple UI logic, JavaScript is still the better choice. So the real takeaway for me wasn’t "Wasm is better than JavaScript." It was this: Use the right tool for the right job. If performance becomes a bottleneck, WebAssembly is a powerful option to unlock the next level. I’m curious—have you come across a real-world app where WebAssembly made a noticeable difference? #WebAssembly #WebDevelopment #JavaScript #PerformanceEngineering #FrontendDevelopment #SoftwareEngineering #WebApps #TechLearning

Day 6: Understanding State in React If Props allow components to receive data, then State allows components to manage and update their own data. 📌 What is State in React? State is a built-in object that allows a component to store data that can change over time. When the state changes, React automatically re-renders the component, updating the UI. 📌 Example using useState Hook import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <h1>{count}</h1> <button onClick={() => setCount(count + 1)}> Increase </button> </div> ); } 📌 What is happening here? • count → current state value • setCount → function used to update the state • useState(0) → initial value of state When the button is clicked, the state updates and the UI re-renders automatically. 📌 Props vs State Props • Passed from parent component • Read-only State • Managed inside the component • Can be updated 📌 Why State is important State allows React applications to be interactive. Examples: • Counter apps • Form inputs • Toggle buttons • Dynamic UI updates #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CodingJourney #LearnInPublic

React developers already know how to build GUIs. With Ink, that same knowledge translates directly to building CLIs — more precisely, TUIs — rich, interactive, full-screen terminal experiences. Built nosleep — a CLI tool that stops your mac machine from sleeping 😴 Same useState. Same hooks. Same component composition. Just rendered in your terminal instead of a browser. And I'm not alone in this thinking: → Claude Code — built with Ink → Gemini CLI — built with Ink → GitHub Copilot CLI — built with Ink These aren't hobby projects. They're the most-used AI developer tools right now — and they're all React component trees running in a terminal. nosleep is small. Intentionally so. It's a proof of concept that if you know React, you already know how to build powerful terminal tools. The developer experience is surprisingly great — hot reload, Flexbox layouts, TypeScript, reusable components. It genuinely feels like building a web app. If you've been sleeping on Ink — now's the time to wake up. (pun very much intended 😄) 🔗 https://lnkd.in/dehHxS_h 🔗 https://lnkd.in/diEeUg2p #Ink #CLI #TUI #DeveloperExperience #OpenSource #DevTools #React #TypeScript

💻 Built a Nested Checkboxes Component using React Worked on a Nested Checkboxes UI where parent-child selection stays perfectly in sync across multiple levels. Features: • Checking a parent selects all its child checkboxes • Unchecking a parent clears all nested children • If all children are checked → parent auto-checks • If any child is unchecked → parent updates accordingly • Supports deeply nested structures What I learned: • Implementing top-down (state propagation) and bottom-up (state aggregation) approaches in a tree • Building recursive components to render hierarchical data • Managing complex state updates for nested structures in React • Keeping UI and data consistent across multiple levels • Writing optimized logic to avoid unnecessary re-renders This was a great exercise in understanding how to handle tree-like data structures in React. Concept inspiration from learning resources by Akshay Saini 🚀 NamasteDev.com. Demo 👇 #ReactJS #FrontendDevelopment #JavaScript #BuildInPublic #WebDevelopment

React keys are often treated like a small detail. But in real apps, they decide something very important: identity. A key tells React whether a component is the same one as before, or a new one that should be created again. That sounds simple. But it affects state, reuse, and how stable the UI feels. When keys are stable, React can keep the right state in the right place. When keys change in the wrong way, React may reuse the wrong component. That is when strange issues start showing up. Inputs lose focus. Values appear in the wrong row. Some parts of the UI behave in ways that are hard to explain. This is why I do not think of keys as just a React requirement. I think of them as part of system design. If the data has a clear identity, the UI becomes predictable. If the identity is weak or unstable, the UI starts to break in subtle ways. One simple rule helps a lot: Use something stable as the key. Not position. Not something that changes when the list changes. Small detail in code. Big impact in behavior. #ReactJS #FrontendArchitecture #JavaScript #WebDevelopment

Topic: Debouncing & Throttling in React – Fixing Performance Bottlenecks ⚡ Debouncing vs Throttling in React – Stop Killing Your Performance Ever built a search input that calls API on every keystroke? 😅 That’s how you accidentally DDoS your own backend. Let’s fix it the right way 👇 🔹 The Problem onChange={(e) => fetchData(e.target.value)} 👉 API call on every key press 👉 Too many requests 👉 Laggy UI 🔹 Debouncing (Most Common) Wait until user stops typing. ✔ Best for search inputs ✔ Reduces API calls const debouncedSearch = useMemo( () => debounce(fetchData, 500), [] ); 🔹 Throttling Limit how often a function runs. ✔ Best for scroll / resize events ✔ Runs at fixed intervals const throttledScroll = throttle(handleScroll, 300); 💡 Key Difference 👉 Debounce → wait, then execute 👉 Throttle → execute at intervals 🔹 Real-World Use Cases ✔ Search bars ✔ Infinite scrolling ✔ Window resize handlers ✔ Analytics tracking 📌 Golden Rule Don’t react to every event. React smartly. 📸 Daily React tips & visuals: 👉 https://lnkd.in/g7QgUPWX 💬 Where have you used debouncing or throttling in your app? #React #ReactJS #FrontendPerformance #JavaScript #WebDevelopment #DeveloperLife #Optimization