Yashika Chahal’s Post

🔁 State Lifting in React | The Smart Way to Share Data Between Components. Ever had two React components that needed to share the same data, but didn’t know how? 🤔 That’s where the concept of State Lifting comes in, one of React’s most elegant patterns. 🧩 What Is State Lifting? When two or more components need access to the same data, you lift that state up to their closest common parent. The parent manages the data, and the children receive it through props. This keeps data centralized and consistent. 🧠 Let’s See an Example. Now look the example code below, let’s say we have two child components one to input data, and one to display it. Without lifting state, they can’t “talk” to each other directly. 🧭 Here, both child components share the same state managed by their parent. 🚀That’s state lifting in action. 🧠 Best Practice Lift state only when needed, not every piece of state should live in the parent. If many components need the same state → consider React Context. Keep the flow of data unidirectional (top → down). 💬 Final Thought: State lifting teaches one of React’s golden rules. 👉 Share state by moving it up, not across. #ReactJS #MERNStack #FrontendDevelopment #WebDevelopment #ReactPatterns #ReactHooks #JavaScript #CleanCode #LearnReact #SoftwareEngineering

⚛️ When I finally stopped my React component from doing unnecessary math 😅 I was building a dashboard where a small counter update caused my entire expensive calculation to re-run — every. single. time. 🤯 Even though the input didn’t change, React was recalculating it again and again. My poor CPU was screaming! 💻🔥 That’s when I discovered useMemo() — the performance lifesaver I didn’t know I needed. Here’s what I learned 👇 ❌ Before: function Dashboard({ data }) { const total = heavyCalculation(data); return <h1>Total: {total}</h1>; } ✅ After using useMemo(): function Dashboard({ data }) { const total = useMemo(() => heavyCalculation(data), [data]); return <h1>Total: {total}</h1>; } 💡 What useMemo() does: It remembers the result of your calculation until its dependencies change. If nothing changes, it just returns the cached value — no more re-running heavy logic! 🚀 ✨ Lesson learned: Use useMemo() when your function is expensive and your inputs don’t change often. React will thank you with smoother performance! 🙌 #ReactJS #useMemo #ReactHooks #FrontendDeveloper #MERNStack #PerformanceOptimization #WebDevelopment #JavaScript #LearningByDoing #CodingJourney

🤯 Why does my component re-render even though props look the same?? I hit this issue while optimizing a data table. The child component kept re-rendering on every state change, even when the data looked identical. Here’s a simplified version: function Parent() { const [count, setCount] = useState(0); const filters = { status: "active" }; return ( <> <button onClick={() => setCount(c => c + 1)}>{count}</button> <Table filters={filters} /> </> ); } filters looks the same every render, right? But React thinks it’s new every time - because a new object is created on each render. 🧠The Root Cause React uses shallow comparison for props. Even if two objects have identical content, their references are different - and that’s enough to trigger a re-render. ✅The Fix Stabilize your props using useMemo or useCallback: const filters = useMemo(() => ({ status: "active" }), []); Now filters keeps the same reference between renders 💡 Takeaway > React re-renders not because of what’s inside your props, but because of what they point to. Stability in references = stability in performance. 🗣️ Your Turn Have you ever chased a “mystery re-render” before? What tools do you use to debug them - React DevTools, why-did-you-render, or console logs? #ReactJS #WebDevelopment #FrontendDevelopment #PerformanceOptimization #CleanCode #JavaScript #ReactHooks #DevCommunity #LearnInPublic

Context API vs. Redux: Stop the Confusion.  Here’s the 2-minute rule that can help. Choosing between React's built-in Context API and the popular Redux library is a common dilemma. The key is to think about scale and frequency. ⤷Use Context API for: -Simple, infrequent updates, like a dark mode toggle or a logged-in user's name. -Avoiding "prop drilling" on a small-to-medium scale. -When you prefer a lightweight, built-in React solution with less setup. ⤷Use Redux for: -Large, complex applications with state that changes frequently. -Centralizing a single "source of truth," like a shopping cart or dashboard data. -Debugging complex state issues with powerful DevTools, which Context lacks. -Predictable state updates with a structured flow of actions and reducers. ⤷Username & Notification Example: →You have two states:    -Username: Rarely changes    -Notifications: Changes frequently →With Context: If you put both in one context, every time notifications update, all components showing the username re-render too.  This is inefficient. To fix it, you must split your contexts, adding complexity. →With Redux: Redux lets components subscribe only to the state they need. The component showing notifications subscribes to notifications.  Lot of components showing the username do not re-render when a notification arrives. ⤷The takeaway:  -Context is perfect for static or low-frequency global data.  -Redux shines when your state is dynamic, shared, and heavily updated. ⤷Your take:  -Have you ever migrated from Context to Redux?  -What was your sign that it was "time for a cannon"? Share your experience in the comments! #React #JavaScript #WebDevelopment #Redux #ContextAPI #StateManagement

Partition Array by Predicate (Fast & Simple) Need to split data into two buckets—approved vs rejected, in-stock vs out-of-stock, active vs inactive? Use a tiny partition helper to divide an array into [pass, fail] in one sweep. It’s fast, readable, and perfect for real-world lists and filters. Why it’s production-ready Single pass over data (O(n)) Preserves original order in both buckets Works with primitives or objects (any predicate) Drop it into your toolkit and keep your array logic clean. ⚡ #JavaScript #VanillaJS #Arrays #CleanCode #WebDev

Working with tables in React ? Then you’ve got to check out React Data Table Component (RDT) one of the most powerful and easy-to-use libraries out there! ⚛️ It comes packed with built-in features like : ✨ Pagination ✨ Sorting ✨ Loading indicators ✨ Selectable Rows ✨ Expandable Rows But keep in mind these features work best for client-side data . If your data comes from an API or you’re dealing with large datasets, you’ll need to implement server-side pagination manually. Still, RDT makes building clean, responsive, and data-rich UIs a breeze! 🚀 For more details checkout their official docs : https://lnkd.in/d2pvECmu #React #JavaScript #FrontendEngineer #ReactDataTable #SoftwareDevelopment #KeepExploring

🔥 Livewire 3 Mystery: Value Exists in HTML but Input Field Shows Empty! Just solved one of the most frustrating bugs I've encountered with Livewire 3... THE PROBLEM: I was building a CRUD interface where clicking "Edit" should populate the form with existing data. Everything seemed perfect in my code, but: ❌ Input fields remained completely EMPTY ✅ Opened DevTools → Value attribute was RIGHT THERE: value="Jewellery" The value was in the DOM, but the input field refused to display it! 😤 Checked everything: ✅ Property names matched perfectly ✅ Data was being fetched correctly ✅ Console showed no errors ✅ Livewire was updating the value attribute But still... blank input field! 🤯 THE ROOT CAUSE: Livewire 3's wire:model.live can sometimes fail to trigger the visual update in the browser, especially when values are set programmatically from the backend. The data binding works at the DOM level, but the browser doesn't re-render the visible value. 👉 You can see the solution in the Image. This typically happens due to: → Conflicts with CSS/JavaScript libraries → Browser rendering optimization skipping the update → Livewire's DOM morphing not triggering properly → Race conditions between Livewire updates and browser paint. WHY THIS WORKS: → value="{{ $departmentName }}" explicitly renders the server-side value → wire:input captures user input in real-time → Direct property assignment: departmentName = $event.target.value → No need for separate methods or complex logic → Full control over both display and reactivity KEY LEARNINGS: 🔹 wire:model.live isn't always the best choice for edit forms 🔹 When in doubt, combine server-side rendering with event-based updates 🔹 DevTools is your best friend - always inspect the actual DOM 🔹 Sometimes the simplest solution is the most elegant one Pro tip: Use wire:model.live for create forms, but wire:input with value="{{ }}" for edit forms where you're populating from the database. Have you encountered similar rendering issues with Livewire? Drop your solutions below! 👇 #Laravel #Livewire3 #PHP #WebDevelopment #Debugging #CodingTips #Backend #Frontend #FullStack #Programming #DeveloperLife #TechCommunity #SoftwareDevelopment #LaravelDeveloper #PHPDeveloper

𝗔𝘂𝘁𝗼𝗺𝗮𝘁𝗶𝗰 𝗦𝗲𝗺𝗶𝗰𝗼𝗹𝗼𝗻 𝗜𝗻𝘀𝗲𝗿𝘁𝗶𝗼𝗻 (𝗔𝗦𝗜) 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 --> 𝘁𝗵𝗲 “𝗵𝗲𝗹𝗽𝗳𝘂𝗹” 𝗳𝗲𝗮𝘁𝘂𝗿𝗲 𝘁𝗵𝗮𝘁 𝘀𝗼𝗺𝗲𝘁𝗶𝗺𝗲𝘀 𝗵𝗲𝗹𝗽𝘀 𝗮 𝗹𝗶𝘁𝘁𝗹𝗲 𝘁𝗼𝗼 𝗺𝘂𝗰𝗵. JavaScript automatically inserts semicolons (;) when it thinks you forgot them. Sounds convenient. Well... sometimes it can change your code’s meaning entirely! 𝗛𝗲𝗿𝗲’𝘀 𝗮 𝗰𝗹𝗮𝘀𝘀𝗶𝗰 𝗲𝘅𝗮𝗺𝗽𝗹𝗲 👇 function getData() {  return  {   message: "Hello World"  } } console.log(getData()); You’d expect it to log { message: "Hello World" } 𝗕𝘂𝘁 𝘀𝘂𝗿𝗽𝗿𝗶𝘀𝗲 --> It logs undefined 𝗪𝗵𝘆? Because ASI inserts a semicolon right after return return; // inserted automatically {  message: "Hello World" } So the function actually returns nothing. 𝗧𝗼 𝗳𝗶𝘅 𝗶𝘁: function getData() { return { message: "Hello World" } } 𝗧𝗶𝗽: Always keep the return and the value on the same line. ASI is like that friend who “fixes” your code but never tells you what they changed. Always use semicolons intentionally, not accidentally. #JavaScript #WebDevelopment #Frontend #CleanCode #DevCommunity

Ever had that moment where your code should work, but console.log insists your import is undefined? 🤔 We hit a fascinating bug today while integrating a mini-app into our super-app. One specific Redux thunk (getPdfData) was undefined, while every other thunk worked perfectly. 🛠️ The Problem: It turned out to be a classic circular dependency. 1️⃣ The Store starts to load... 2️⃣ It needs our PDF Slice... 3️⃣ The PDF Slice needs the PDF Thunk... 4️⃣ The PDF Thunk needs the API Utility... 5️⃣ ...and the API Utility needed the Store to get tokens! 🔄 The module system couldn't resolve this loop, so it returned undefined for the weakest link in the chain. 📉 The Solution: We broke the loop using Dependency Injection. Instead of the API utility importing the store (creating the loop), we refactored it so the store is injected into the API layer after it's fully created. ✅ Key Takeaway: Low-level utilities (like API clients) should never import high-level modules (like the Redux store). It’s a sure path to circular dependencies. Injecting dependencies instead of importing them keeps your modules clean and your load order predictable. 💡 It's a great reminder that sometimes the most frustrating bugs have the cleanest architectural solutions! ✨ #ReactNative #Redux #TypeScript #JavaScript #SoftwareArchitecture #BugBash

🚀 From useEffect chaos to clean useQuery simplicity! Here’s a before-after look at how Qortex makes your React data fetching experience effortless 👇 Before: Messy useEffect, manual state updates, loading and error handling everywhere 😩 After: Just one line — useQuery("user", { fetcher }) 💪 ✅ Less React lifecycle clutter ✅ Built-in caching & persistence ✅ Shared queries = no duplicate network calls ✅ No provider or boilerplate setup ✅ Simple plug-and-play It’s like React Query, but more minimal and plug-and-play friendly ⚡ 👉 Try it here: https://lnkd.in/gSyXajZn #reactjs #opensource #frontend #javascript #developerexperience #qortex