React State vs Props: Understanding the Difference

🚀 React Evolution : Class Components→Function Components React has come a long way! This illustration perfectly explains why Function Components + Hooks are now the preferred approach. 🔁 Old Way – Class Components - Multiple lifecycle methods ➡️ constructor ➡️ componentDidMount ➡️ componentDidUpdate ➡️ componentWillUnmount - Too many steps to manage state and side effects - More boilerplate, harder to maintain ✅ New Way – Function Components ➡️ One powerful hook: useEffect ➡️ Handles mounting, updating, and cleanup in one place ➡️ Cleaner syntax ➡️ Easier to read, test, and maintain ➡️ Better performance and developer experience 🧠 Think of it as: Many switches ➜ One smart button If you’re still using class components, now is the best time to start migrating and embracing modern React 🚀 #ReactJS #JavaScript #WebDevelopment #FrontendDevelopment #ReactHooks #useEffect #CleanCode #SoftwareEngineering #UIDevelopment #ModernReact #LearningReact

Why most React developers misunderstand useEffect It's not a lifecycle method. It's not componentDidMount in disguise. And it's definitely not the place for derived state. useEffect is synchronization with an external system. 🔍 The mental model: useEffect = "After React commits to the screen, do this side effect" The dependency array = "Only re-run when THESE values differ" Cleanup function = "Before re-running OR unmounting, clean up" Common pitfall I see: JavaScript // ❌ Wrong: Using useEffect for computed values useEffect(() => { setFullName(`${firstName} ${lastName}`); }, [firstName, lastName]); // ✅ Right: Derived state should be... just stateless computation const fullName = `${firstName} ${lastName}`; useEffect is for: API calls Subscriptions Manual DOM manipulation Analytics/logging Not for: Things you can calculate during render. What's your useEffect horror story? Drop it below 👇 #ReactJS #JavaScript #FrontendEngineering #WebDev #CleanCode

💡 Do you really understand useEffect in React? In React, not everything is about rendering. Fetching data from an API, manipulating the DOM, or using setTimeout are all side effects — and that’s exactly what useEffect is for. 👉 There are 3 main ways to use useEffect: 🔹 Without a dependency array Runs on every render 🔹 With an empty array [] Runs only once, when the component mounts Perfect for initial API calls 🔹 With dependencies [state] Runs only when that specific state changes Great for reacting to controlled updates (theme, language, data, etc.) ⚠️ Don’t forget about cleanup If you add listeners, intervals, or timeouts, clean them up to avoid memory leaks. ✨ Mastering useEffect is key to writing predictable, performant, and professional React code. #ReactJS #FrontendDevelopment #JavaScript #WebDev #Hooks #CleanCode #ProgrammingTips

I thought I was writing clean React. I opened the React Profiler and found a silly thing causing extra rerenders. Last week I reviewed a laggy screen (inputs felt delayed, clicks weren’t instant). The component looked “best-practice”:  - useCallback  - memoized props  - React.memo in the tree But one detail killed it: Inline objects inside JSX.... When a child relies on shallow prop comparison (like React.memo), a new object reference on every render breaks memoization, even if the values are identical. After making the prop reference stable, renders dropped ~40% on that screen. Lesson: performance isn’t always about fancy tricks. Sometimes it’s just avoiding accidental work. What’s a “small” thing you’ve seen tank performance? #React #Performance #Frontend #JavaScript

React 19 brought several nice features worth mentioning. One of the most interesting additions is the "use" hook, which is especially helpful in scenarios like async data fetching. In previous versions of React, handling async logic often required a fair amount of boilerplate code: managing loading and error states manually, writing conditional rendering logic, and keeping everything in sync. With the new approach, an async call can be wrapped directly in the "use" hook, while the component that contains it should be wrapped with the Suspense component. This results in much cleaner and more readable code, without changing the final behavior. Less code, same effect. Just don’t forget to properly handle promise rejections, as unhandled errors can still cause issues 😉 https://lnkd.in/dqpYEK99 BTW, the new "use" hook can also be rendered conditionally — you can place it inside an if statement, which opens up even more flexible patterns.

There’s a phase almost every React developer goes through. You learn about useMemo and useCallback… and suddenly you want to wrap everything in them just to be safe. I’ve been there 😅 But here’s the truth: more hooks don’t automatically mean better performance. These hooks exist to solve specific problems like unnecessary recalculations and avoidable re-renders not to decorate every component. In this post, I break down when useMemo and useCallback actually help, when they don’t, and how to think about performance the right way. Because great React code isn’t about using every hook… it’s about using the right ones, at the right time. 👇 Swipe through and optimize with intention. #React #JavaScript #FrontendDevelopment #WebDev #ReactHooks #Performance #BuildInPublic

React finally fixed one of the most hated parts of hooks and it changes how we write effects forever. useEffect has long caused bugs from stale closures, messy dependencies, and unintended re-runs. React’s new useEffectEvent Hook lets you extract non-reactive logic from effects so your callbacks always see the latest state without bloating your dependency arrays. Before: – add state/props to dependencies and trigger unwanted re-runs – useRefs or workarounds for fresh values Now: useEffectEvent gives you a stable event that always has fresh values and doesn’t force the effect to re-run. This solves stale closure headaches, simplifies timers and callbacks, and dramatically improves effect reliability in React 19.2+. We don’t have to fight with dependency arrays, infinite effects, or custom ref patterns anymore! #react #javascript #webdevelopment #reactjs #frontend

🧠 How JSX Really Works Behind the Scenes in React When I started working with React, JSX looked just like HTML to me. But the browser actually doesn’t understand JSX at all. So what really happens behind the scenes? 👇 🔹 JSX is not HTML JSX is just a syntax that makes React code easier to read and write. At the end of the day, it’s still JavaScript. 🔹 Babel converts JSX into JavaScript For example, this JSX: <h1>Hello World</h1> is converted into: React.createElement("h1", null, "Hello World") 🔹 React.createElement returns a JavaScript object This object represents a Virtual DOM node, not the real DOM. 🔹 Virtual DOM and Reconciliation React compares the new Virtual DOM with the previous one and figures out what actually changed. 🔹 Only necessary DOM updates happen Instead of reloading everything, React updates only what’s needed. That’s a big reason why React apps feel fast and smooth. 💡 Understanding this helped me: • Debug React issues more easily • Write cleaner and more optimized components • Feel more confident in machine & technical rounds React looks simple on the surface, but there’s a lot of smart work happening under the hood 🚀 #ReactJS #JavaScript #FrontendDevelopment #JSX #WebDevelopment #LearningReact #ReactTips

❓ Why does useEffect run twice in React? If you’ve ever noticed your useEffect running twice in development and thought, “Is my code broken?” — don’t worry, it’s not 😄 👉 This happens because of React Strict Mode. 🧠 In simple words: React runs your effect twice on purpose (only in development) to help you find bugs. It checks: Are you cleaning up properly? Does your effect cause side effects by mistake? So React does this: 1️⃣ Run the effect 2️⃣ Clean it up 3️⃣ Run it again If something breaks, React warns you early. ✅ Important to remember This happens only in development In production, useEffect runs once as expected It helps you write safer and cleaner code 📌 Tip: Always return a cleanup function from useEffect when needed. useEffect(() => { console.log("Effect running"); return () => { console.log("Cleanup"); }; }, []); React isn’t annoying you — it’s protecting you 😉 #ReactJS #useEffect #FrontendDevelopment #JavaScript #LearningReact

Day 2 Deep Dive into React Build Process ⚛️ After 3 years of Vue.js, I decided that my React journey shouldn't just be about writing code, but about understanding how it works under the hood. Today, I focused on the Build Process and how our code actually reaches the browser. Key takeaways from today: ✅ The "Kitchen" (Build Tools): I learned how Vite and Webpack work as bundlers to collect all our files and prepare them for the browser. ✅ The Translator (Babel): Understood how JSX is translated into standard JavaScript that any browser can read. ✅ React Scripts: Explored how this "Maestro" manages everything behind the scenes so we don't have to manually add <script> tags in HTML. ✅ The Final Result: How everything we write is bundled into simple JS files and injected into the index.html. As a Software Engineer, I believe that understanding these "Engineering" details is what makes the difference. It's not just about tools; it's about the logic! Excited for Day 3! 🔥 #ReactJS #SoftwareEngineering #Frontend #WebDevelopment #JavaScript #Vite #LearningJourney #Day2