React Props: Passing Data Between Components

useEffect is one of the most misunderstood hooks in React. It’s not for: • calculating derived values • syncing state with state • fixing re-render issues It is for: • data fetching • subscriptions • timers • syncing with browser or external systems If something can be calculated from existing state or props, it doesn’t belong in useEffect. The less effects you write, the more predictable your React code becomes. #react #frontend #javascript #webdev #cleanCode

🚀 React+Typescript Practice: Random User Card with Loading State Today I worked on a small React practice project where I: ✅ Fetched data from Random User API ✅ Implemented loading state inside the card UI ✅ Handled conditional rendering properly ✅ Followed correct key usage in map() ✅ Added a refresh button with disabled state during loading This helped me reinforce important React concepts like: useState & useEffect Async/Await data fetching Clean component structure UI-friendly loading handling Small practices like these really help in writing production-ready UI code 💡 Always learning, always improving 🚀 Demo Link- https://lnkd.in/gMQczeKB #ReactJS #FrontendDevelopment #UIDeveloper #JavaScript #WebDevelopment #LearningByDoing

🔥 React 19 just made useEffect optional for data fetching. For years we wrote: useEffect useState loading flags error state Now? const user = use(getUser()); React waits. Suspends. Renders when ready. No effect boilerplate. This isn’t a new hook. It’s a new mental model. Async is now part of render. Are you still fetching after render? #React19 #ReactJS #Frontend #JavaScript #WebDev

🚀 React Hands-on Series #4 ⏳ Problem Statement: Debounced Search Input Ever noticed how search bars don’t fire on every keystroke? That’s called debouncing — and today you’re building it. 🎯 Your Task: Create a search input with the following behavior: ✅ Input field ✅ User types normally ✅ Show the typed value only after 1000ms delay #React #FrontendDevelopment #JavaScript #PerformanceOptimization #BuildInPublic #ReactJS #CodingChallenge

frameworks and libraries is all about syntax, the real deal is knowing what powers them... useEffect and useState are dangerous syntax to someone who doesn't understand how window loaded and DomContent event listeners work in pure javaScript... Axios is great but if you dont know how the fetch API works, the you would struggle to undertstand how the browser handles http errors... Knowing the fundamentals isn't about going back to the stone age, its what you need to build with confidence. #reactjs #frontend #javaScript

🚀 Why React.js Hooks are a game-changer: • ✅ Simplify your code and reduce boilerplate • ✅ Manage state easily with useState • ✅ Handle side effects smoothly with useEffect • ✅ Share logic across components with custom hooks • ✅ Improve component composition and reusability • ✅ Make functional components more powerful 💡 Embrace hooks for cleaner, modern React development! #ReactJS #Hooks #WebDevelopment #FrontendDevelopment #JavaScript #CodingTips #TechLearning #DeveloperLife #CleanCode #FunctionalProgramming

DAY 20 OF POSTING REACT CONTENT ⚛️ WHAT DOES await REALLY DO? 🤔 await tells JavaScript: 👉 “Wait here until the Promise finishes.” It pauses the function until the result is ready. Example: async function getData() { const data = await fetchData(); console.log(data); } The code waits for fetchData() before moving to the next line. Cleaner than .then() Easier to read Same result #ReactJS #JavaScript #AsyncAwait #Promises #FrontendDevelopment #LearnInPublic #WebDevelopment #CodingJourney

Custom Hooks are one of those React features that can significantly enhance your codebase. If you find yourself duplicating the same useEffect, state, or API logic across components, it's a clear indication that you should create a custom hook. In just three simple steps, you can: • Extract reusable logic • Keep components clean • Improve readability and maintainability This approach scales effectively for real-world applications and simplifies testing and reasoning about your code. Pro tip: If your component is doing too much, it’s likely time for a hook. Save this for later and share it with someone learning React. #ReactJS #FrontendDevelopment #JavaScript #WebDev #ReactHooks #CleanCode #DevCommunity 

💡 𝐑𝐞𝐚𝐜𝐭 𝐇𝐨𝐨𝐤 – 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭 (API Call + Dependency Array) ❓ How do we fetch data from an API in React 𝘄𝗶𝘁𝗵𝗼𝘂𝘁 𝗶𝗻𝗳𝗶𝗻𝗶𝘁𝗲 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿𝘀? Today I learned how useEffect is used for 𝗔𝗣𝗜 𝗰𝗮𝗹𝗹𝘀 and how the 𝗱𝗲𝗽𝗲𝗻𝗱𝗲𝗻𝗰𝘆 𝗮𝗿𝗿𝗮𝘆 controls when the effect runs 🚀 🔹 𝗪𝗵𝘆 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁 𝗳𝗼𝗿 𝗔𝗣𝗜 𝗰𝗮𝗹𝗹𝘀? 👉 React re-renders components often 👉 API calls should 𝗻𝗼𝘁 𝗿𝘂𝗻 𝗼𝗻 𝗲𝘃𝗲𝗿𝘆 𝗿𝗲𝗻𝗱𝗲𝗿 👉 useEffect helps control this behavior 🔹 𝗞𝗲𝘆 𝗽𝗼𝗶𝗻𝘁𝘀: 🔹 useEffect is used to handle 𝘀𝗶𝗱𝗲 𝗲𝗳𝗳𝗲𝗰𝘁𝘀 🔹 API calls are usually written 𝗶𝗻𝘀𝗶𝗱𝗲 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁 🔹 The 𝗱𝗲𝗽𝗲𝗻𝗱𝗲𝗻𝗰𝘆 𝗮𝗿𝗿𝗮𝘆 decides 𝘄𝗵𝗲𝗻 useEffect runs 🔹 𝗪𝗵𝗮𝘁 𝗱𝗼𝗲𝘀 𝘁𝗵𝗲 𝗱𝗲𝗽𝗲𝗻𝗱𝗲𝗻𝗰𝘆 𝗮𝗿𝗿𝗮𝘆 𝗱𝗼? 👉 [] → runs 𝗼𝗻𝗹𝘆 𝗼𝗻𝗰𝗲 when the component mounts 👉 [id] → runs when 𝗶𝗱 changes 👉 No array → runs on 𝗲𝘃𝗲𝗿𝘆 𝗿𝗲𝗻𝗱𝗲𝗿 ❌ 📌 This is why the dependency array is 𝘃𝗲𝗿𝘆 𝗶𝗺𝗽𝗼𝗿𝘁𝗮𝗻𝘁. Next up: 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁 cleanup function or real-world API handling? 🤔 #ReactJS #JavaScript #useEffect #APICall #ReactHooks #FrontendDevelopment #LearningInPublic

React Performance isn’t about adding hooks everywhere. It’s about adding them where they matter. Most applications suffer from unnecessary re-renders and unstable references. Two small hooks. Massive impact: 1. useCallback → Stabilize function references 2. useMemo → Avoid expensive recalculations But misuse them, and you just add complexity with zero gains #ReactJS #NextJS #FrontendDevelopment #WebPerformance #JavaScript #SoftwareEngineering #ReactPerformance #Optimization #CleanCode #TechLeadership #UIDevelopment #ProgrammingTips