🚀 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

🚀 Understanding Props vs State in React — Simplified! In React, everything revolves around data. But there are two ways to handle it: 👉 Props 👉 State Understanding the difference is crucial for building scalable apps. 💡 What are Props? 👉 Props (short for properties) are used to pass data from parent to child function Greeting({ name }) { return <h1>Hello {name}</h1>; } <Greeting name="React" /> ✅ Read-only ✅ Passed from parent ✅ Cannot be modified by child 💡 What is State? 👉 State is data managed inside a component const [count, setCount] = useState(0); setCount(count + 1); ✅ Mutable ✅ Managed within component ✅ Triggers re-render ⚙️ How it works 🔹 Props: Flow: Parent → Child Immutable Used for communication 🔹 State: Local to component Can be updated Controls UI behavior 🧠 Real-world use cases ✔ Props: Passing data to components Reusable UI components Configuring child behavior ✔ State: Form inputs Toggle UI (modals, dropdowns) Dynamic data 🔥 Best Practices (Most developers miss this!) ✅ Use props for passing data ✅ Use state for managing UI ✅ Keep state minimal and local ❌ Don’t mutate props directly ❌ Don’t duplicate state unnecessarily ⚠️ Common Mistake // ❌ Mutating props props.name = "New Name"; 👉 Props are read-only → always treat them as immutable 💬 Pro Insight 👉 Props = External data (controlled by parent) 👉 State = Internal data (controlled by component) 📌 Save this post & follow for more deep frontend insights! 📅 Day 8/100 #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #WebDevelopment #SoftwareEngineering #100DaysOfCode 🚀

🚀 Understanding useRef in React — Simplified! Not all data in React should trigger a re-render. 👉 That’s where useRef becomes powerful. 💡 What is useRef? useRef is a hook that lets you store a mutable value that persists across renders—without causing re-renders. ⚙️ Basic Syntax const ref = useRef(initialValue); 👉 Access value using: ref.current 🧠 How it works Value persists across renders Updating it does NOT trigger re-render Works like a mutable container 🔹 Example const countRef = useRef(0); const handleClick = () => { countRef.current += 1; console.log(countRef.current); }; 👉 UI won’t update—but value persists 🧩 Real-world use cases ✔ Accessing DOM elements (focus, scroll) ✔ Storing previous values ✔ Managing timers / intervals ✔ Avoiding unnecessary re-renders 🔥 Best Practices (Most developers miss this!) ✅ Use useRef for non-UI data ✅ Use it for DOM access ✅ Combine with useEffect when needed ❌ Don’t use useRef for UI state ❌ Don’t expect UI updates from it ⚠️ Common Mistake // ❌ Expecting UI update countRef.current += 1; 👉 React won’t re-render 💬 Pro Insight 👉 useRef = Persist value without re-render 👉 useState = Persist value with re-render 📌 Save this post & follow for more deep frontend insights! 📅 Day 14/100 #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #useRef #WebDevelopment #SoftwareEngineering #100DaysOfCode 🚀

💡 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

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

🚀 Understanding React from First Principles Instead of jumping directly into hooks and libraries, I decided to step back and ask a simple question: 👉 What problem is React actually solving? At its core, React is not just a library — it’s a way of thinking about UI. 🔍 First Principles Breakdown: • UI = Function of State → The interface changes whenever the data changes • Manual DOM manipulation is inefficient → Traditional JS requires updating elements step-by-step • React solves this using abstraction → You describe what the UI should look like, not how to update it ⚙️ Core Mechanism: Components → Break UI into reusable pieces State → Stores dynamic data Virtual DOM → Efficiently compares changes Reconciliation → Updates only what’s necessary 💡 Insight: React shifts your mindset from "How do I update the UI?" to "What should the UI look like given this data?" This small shift is powerful. I’m currently learning React deeply by focusing on fundamentals and first-principles thinking — not just syntax. #React #Frontend #WebDevelopment #LearningInPublic #JavaScript #FirstPrinciples

Most developers reach for an array by default. But sometimes, that's the wrong tool. When you use array.find() to look up a value, it scans from the start every single time. That's O(n) time complexity. With 10 items, unnoticeable. With 10,000 items, your server feels it. A Map object solves this. Instead of this: const user = users.find(u => u.id === id) Do this: const userMap = new Map(users.map(u => [u.id, u])) const user = userMap.get(id) Map lookups are O(1). It doesn't matter if you have 10 items or 10 million, the lookup time stays the same. This only makes sense when you have a fixed dataset and are doing repeated lookups. If you're looking up once, array.find() is perfectly fine. But if you're hitting that array multiple times, consider reaching for a Map instead. #JavaScript #NodeJS #SoftwareEngineering #WebDevelopment #Performance

Using index as a key is dangerous Every React developer has written this at least once. items.map((item, index) => (  <li key={index}>{item}</li> )) Looks fine. Works fine. But it isn't This is Post 5 of the series: 𝗥𝗲𝗮𝗰𝘁 𝗨𝗻𝗱𝗲𝗿 𝘁𝗵𝗲 𝗛𝗼𝗼𝗱 Where I explain what React is actually doing behind the scenes. Here's what actually happens when you use index as key: You delete one item from a list. React doesn't know which item was removed. It just looks at positions. So it re-renders everything from that index downward. Input states get mismatched. Animations break. Bugs appear that you can't even reproduce consistently. And... No error. Just... wrong behavior. 🔑 Here's what React actually needs: A key isn't just something unique. It needs to be stable, unique, AND tied to the data — not the position. ❌ key={index} → breaks on delete, sort, filter  ❌ key={Math.random()} → new key every render = React destroys and recreates the node  ✅ key={item.id} → stable, reliable, React knows exactly who is who The rule is simple: If your list can ever be reordered, filtered, or deleted from... index as key will silently break your UI. Use your data's ID.  If it doesn't have one, generate it at creation — not during render. const newItem = { id: crypto.randomUUID(),   name: "New Task" } One tiny prop.  Massive impact on how React tracks your entire list. In Post 6 of React Under the Hood: What Happens When You Call setState Follow Farhaan Shaikh if you want to understand react more deeply. 👉 Read the previous post - Understanding diffing algorithm: https://lnkd.in/dzW3NP_V #SoftwareEngineering #ReactJS #WebDevelopment #JavaScript #FrontendDevelopment #BuildInPublic #LearnInPublic #ReactUnderTheHood

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

Leveling up with React Router: Mastered Nested Routes & Dynamic Data Fetching! ⚛️ I just wrapped up a project focusing on creating a seamless User Directory using React and JSONPlaceholder. This was a deep dive into structured navigation and efficient data handling. Key implementations: 🚀 Dynamic Routing: Used useParams and useNavigate to handle user-specific views. 📂 Nested Routes: Implemented <Outlet /> to render sub-components like Posts, Todos, and Albums without losing parent context. 💾 State Persistence: Utilized location.state to pass user data between routes, reducing redundant API calls. 📡 Async Operations: Handled side effects with useEffect and Axios to fetch data dynamically. Seeing the architecture come together is incredibly satisfying. Onward to the next challenge! Question for the devs: When passing data between routes, do you prefer using location.state for simplicity, or do you prefer fetching by ID in the child component to keep it independent? I’d love to hear your thoughts in the comments! 👇 #ReactJS #WebDevelopment #Frontend #JavaScript #LearningInPublic