Avoid 'use client' at top of layout for better React performance

💡 What’s new in React 19 (with simple examples) The latest updates in **React (React 19)** are making development simpler, faster, and smarter. 💡 **Top Features (with simple examples):** ✨ **Actions (Easy form handling)** No need for separate onSubmit + API calls async function handleSubmit(formData) { console.log(formData.get("name")); } <form action={handleSubmit}> <input name="name" /> <button>Submit</button> </form> ✨ **use() Hook (Async made simple)** 👉 Before: useEffect(() => { fetch("/api/user") .then(res => res.json()) .then(setUser); }, []); 👉 Now: const user = use(fetch("/api/user").then(res => res.json())); return <h1>{user.name}</h1>; ✔ React waits automatically — no state, no useEffect ✨ **Server Components** Fetch directly on server → faster UI export default async function Page() { const user = await fetchUser(); return <h1>{user.name}</h1>; } ✨ **Forms (Simplified)** <form action={(formData) => console.log(formData.get("email"))}> <input name="email" /> </form> ✨ **Performance (Suspense)** <Suspense fallback={<p>Loading...</p>}> <UserProfile /> </Suspense> 🔥 **Hot Changes:** ⚡ Automatic memoization → fewer re-renders ⚡ Ref as prop → no forwardRef ⚡ Better error messages → easier debugging ⚡ Web components → use custom elements easily 🔥 **What this means:** ✔ Less code ✔ Better performance ✔ Cleaner logic ✔ Easier async handling 💭 **My take:** React is becoming simpler *and* more powerful at the same time. 👉 **Question:** Will you still use useEffect everywhere, or switch to `use()`? 💬 Let’s discuss! #React #ReactJS #React19 #Frontend #JavaScript #WebDevelopment #NextJS #Programming

🚀 Day 17/30 – Custom Hooks (Deep Dive) Tired of repeating the same logic in multiple components? 🤔 Today I learned how to make React code reusable & clean ⚡ 👉 Custom Hooks Today I learned: ✅ Custom Hooks are reusable functions using React Hooks ✅ They help extract and reuse logic across components ✅ Must always start with "use" (naming convention) --- 💻 Problem: Same logic repeated in multiple components ❌ (e.g. fetching data, form handling) --- 💻 Solution: Create a custom hook ✅ --- 💻 Example: function useCounter() { const [count, setCount] = useState(0); const increment = () => setCount((prev) => prev + 1); const decrement = () => setCount((prev) => prev - 1); return { count, increment, decrement }; } function App() { const { count, increment, decrement } = useCounter(); return ( <> <h2>{count}</h2> <button onClick={increment}>+</button> <button onClick={decrement}>-</button> </> ); } --- 🔥 What actually happens: 1️⃣ Logic is written once inside custom hook 2️⃣ Any component can reuse it 3️⃣ Each component gets its own state --- 💡 Real Use Cases: - API fetching (useFetch) - Form handling (useForm) - Authentication logic - Debouncing input --- ⚡ Advanced Insight: Custom Hooks don’t share state ❌ 👉 They share logic, not data --- 🔥 Key Takeaway: Write logic once → reuse everywhere. Are you still repeating logic or using custom hooks? 👇 #React #CustomHooks #FrontendDevelopment #JavaScript #CleanCode

🟨 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗗𝗮𝘆 𝟱𝟴: 𝗗𝗮𝘁𝗮 𝗡𝗼𝗿𝗺𝗮𝗹𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 (𝗪𝗵𝘆 𝗡𝗲𝘀𝘁𝗲𝗱 𝗦𝘁𝗮𝘁𝗲 𝗗𝗼𝗲𝘀𝗻’𝘁 𝗦𝗰𝗮𝗹𝗲) Ever built a drag & drop UI or complex state… and updates started getting messy? 🤔 🔹 𝗪𝗵𝗲𝗿𝗲 𝗧𝗵𝗶𝘀 𝗛𝗮𝗽𝗽𝗲𝗻𝘀 APIs usually return nested data 👇 But in React, we often transform it into a normalized structure for easier updates & better performance. 🔹 𝗧𝗵𝗲 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 (𝗡𝗲𝘀𝘁𝗲𝗱 𝗦𝘁𝗮𝘁𝗲) const data = [ { id: "todo", cards: [ { id: 1, title: "Fix bug" }, { id: 2, title: "Update UI" } ] }, { id: "progress", cards: [ { id: 3, title: "API work" } ] } ]; 👉 Moving a card = moving full object 😵 👉 Updating = deep nested changes ❌ 👉 Causes unnecessary re-renders in React 🔹 𝗧𝗵𝗲 𝗙𝗶𝘅 (𝗡𝗼𝗿𝗺𝗮𝗹𝗶𝘇𝗮𝘁𝗶𝗼𝗻) const data = { columns: { todo: { id: "todo", cardIds: [1, 2] }, progress: { id: "progress", cardIds: [3] } }, cards: { 1: { id: 1, title: "Fix bug" }, 2: { id: 2, title: "Update UI" }, 3: { id: 3, title: "API work" } } }; 👉 Columns store only IDs 👉 Cards stored once (single source of truth) 🔹 𝗪𝗵𝗮𝘁 𝗖𝗵𝗮𝗻𝗴𝗲𝗱 (𝗥𝗲𝗮𝗰𝘁 𝗣𝗲𝗿𝘀𝗽𝗲𝗰𝘁𝗶𝘃𝗲) Before: • Deep state updates • Re-renders large parts of UI • Hard to maintain After: • Update small pieces of state ✅ • Minimal re-renders (better performance) ⚡ • Cleaner, predictable updates 🔹 𝗞𝗲𝘆 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆 👉 In React, treat state like a database • Store entities once • Reference them using IDs 👉 Drag & Drop = move IDs, not objects 💬 GitHub link in comments. #JavaScript #React #Frontend #Day58 #100DaysOfCode

🚨 The “Invisible” Update: Why Your React UI Might Be Stuck Ever faced a bug where you know the data is there… but your UI just refuses to show it? I recently ran into this while working on a table: Data was fetched successfully ✅ Most columns rendered fine ✅ But one column kept showing empty/null ❌ 🕵️♂️ The Culprit: useRef We were storing incoming async data in useRef. At first glance, everything looked correct: Data was arriving ✔ Ref was updating ✔ But here’s the catch 👇 👉 The column that depended on slightly delayed data never re-rendered 👉 So the UI stayed stuck in its initial empty state ⚠️ Why This Happens useRef: Persists values across renders ✅ Does NOT trigger re-render on update ❌ So even when the data eventually arrived, React had no reason to update the UI. ✅ The Fix: Use useState Switched from useRef → useState const [data, setData] = useState(null); Now: As soon as data updates → component re-renders 🔁 Table updates automatically → no more empty column 🎯 #React #FrontendDevelopment #JavaScript #WebDev #SoftwareEngineering

Can a frontend project demonstrate full-cycle data handling? With Owly, I moved beyond static layouts to build a data-driven profile application that manages real-time information through JavaScript. This project was my playground for mastering how a modern web app consumes data and translates it into a functional user interface. Technical Deep Dive (How it works): 📡 Asynchronous Data Fetching: I implemented API integration using the fetch() API (or Axios) to retrieve user profiles dynamically. This taught me how to handle Promises, manage loading states, and deal with potential network errors. 🧩 Dynamic DOM Injection: Instead of hardcoding content, I developed a logic that parses JSON data and injects it into the DOM. This modular rendering ensures that the UI updates automatically whenever the data source changes. 🛠️ State & Event Logic: I engineered the interactive elements (like social links and action buttons) using custom event listeners. This ensures a reactive experience where user inputs trigger specific logic flows without page reloads. 🧹 Clean Code Architecture: I separated the API logic from the UI rendering. This separation of concerns is a fundamental principle that I later carried over into my React development, making the codebase scalable and easier to debug. Owly represents the moment I transitioned from "making things look good" to "making things work with real-world data." It’s a showcase of how I bridge the gap between backend data and frontend interactivity. Explore the logic here: 👉 GitHub Repo: https://lnkd.in/dJJ8kM6K 👉 Live Demo: https://lnkd.in/dUNHMe4c #JavaScript #WebDevelopment #APIIntegration #AsyncProgramming #FrontendEngineer #SoftwareEngineering #Start2Impact

🚀 React Hooks — From Basics to Advanced (With Real Understanding) 🔥 If you still think Hooks are just "useState" and "useEffect"… 👉 You’re missing the real power of React 👀 --- ⚡ 1. useState (Local State) const [count, setCount] = useState(0); ✔ Manage UI state easily --- ⚡ 2. useEffect (MOST IMPORTANT 🔥) 👉 Controls when side effects run --- 🧠 3 Ways to Use useEffect --- 🔹 1. Without Dependency Array useEffect(() => { console.log('Runs on every render'); }); 👉 Runs after every render ❌ Can cause performance issues --- 🔹 2. Empty Dependency Array [] useEffect(() => { fetchData(); }, []); 👉 Runs only once (on mount) ✔ Best for API calls --- 🔹 3. With Dependency [value] useEffect(() => { console.log('Runs when count changes'); }, [count]); 👉 Runs when specific value changes ✔ Controlled execution --- ⚠️ Important Concept 👉 Cleanup function useEffect(() => { const interval = setInterval(() => { console.log('Running...'); }, 1000); return () => clearInterval(interval); }, []); ✔ Prevent memory leaks --- ⚡ 3. useRef const inputRef = useRef(null); ✔ Store values without re-render --- ⚡ 4. useMemo const value = useMemo(() => heavyCalc(data), [data]); ✔ Optimize expensive calculations --- ⚡ 5. useCallback const fn = useCallback(() => doSomething(), []); ✔ Prevent unnecessary re-renders --- ⚡ 6. useContext const value = useContext(MyContext); ✔ Avoid prop drilling --- ⚡ 7. Custom Hooks 🔥 👉 Reusable logic function useFetch(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url).then(res => res.json()).then(setData); }, [url]); return data; } --- ⚠️ Common Mistakes ❌ Missing dependencies ❌ Infinite loops ❌ Overusing useMemo/useCallback --- 🎯 Real-world Use 👉 API calls 👉 Forms 👉 Auth logic 👉 Reusable UI logic --- 🧠 Interview Answer (10 sec) 👉 “useEffect runs side effects based on dependency array — no array runs on every render, empty array runs once, and dependencies trigger on value change.” --- 🔥 Final Thought 👉 Mastering "useEffect" = mastering React --- 💾 Save this post for interviews & real projects --- 💬 Which useEffect case confused you earlier? 👇 --- © Dhrubajyoti Das #React #ReactHooks #Frontend #WebDevelopment #JavaScript #ReactJS #FrontendDevelopment #SoftwareEngineering #CleanCode #PerformanceOptimization #CodingTips #TechCommunity #DevCommunity #LearnToCode

🚀 Day 15/30 – Lifting State Up (Deep Dive) Struggling to sync data between components? 🤔 Today I learned one of the most important React concepts ⚡ 👉 Lifting State Up Today I learned: ✅ Move state to the closest common parent ✅ Share data via props ✅ Maintain single source of truth 💻 Real Example: function Parent() { const [name, setName] = useState(""); return ( <> </> ); } function ChildInput({ name, setName }) { return ( <input value={name} onChange={(e) => setName(e.target.value)} /> ); } function ChildDisplay({ name }) { return Hello {name}; } 🔥 What actually happens: 1️⃣ User types in ChildInput 2️⃣ setName updates parent state 3️⃣ Parent re-renders 4️⃣ ChildDisplay gets updated value 👉 Both components stay perfectly in sync 💡 Wrong Approach (Common Mistake): ❌ Separate state in each component function ChildA() { const [name, setName] = useState(""); } function ChildB() { const [name, setName] = useState(""); } 👉 This creates inconsistent UI 😵 ⚡ Real Use Cases: Shared form data Cart state across components Filters + product list sync ⚡ Advanced Insight: React enforces one-way data flow 👉 Parent → Child (via props) 🔥 Key Takeaway: If multiple components depend on same data → lift it up. Are you still duplicating state or managing it correctly? 👇 #React #StateManagement #FrontendDevelopment #JavaScript #WebDevelopment

𝐈𝐬 𝐲𝐨𝐮𝐫 `𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭` 𝐟𝐢𝐫𝐢𝐧𝐠 𝐰𝐚𝐲 𝐭𝐨𝐨 𝐨𝐟𝐭𝐞𝐧? 𝐘𝐨𝐮 𝐦𝐢𝐠𝐡𝐭 𝐛𝐞 𝐟𝐚𝐥𝐥𝐢𝐧𝐠 𝐟𝐨𝐫 𝐚 𝐜𝐨𝐦𝐦𝐨𝐧 𝐝𝐞𝐩𝐞𝐧𝐝𝐞𝐧𝐜𝐲 𝐚𝐫𝐫𝐚𝐲 𝐭𝐫𝐚𝐩. We've all been there: you put an object or array into your `useEffect`'s dependency array, thinking it's stable. But because JavaScript compares objects and arrays by reference, even if their content is identical, `useEffect` sees a new object on every render and re-runs your effect. This can lead to performance hits, stale data, or even infinite loops. 🚫 The Problem: ```javascript function MyComponent({ data }) { const options = { id: data.id, filter: 'active' }; useEffect(() => { // This runs every render if 'options' object is new fetchData(options); }, [options]); // 'options' is a new object reference each time // ... } ``` ✅ The Fix: Stabilize with `useMemo` If your object or array doesn't logically change across renders (or only changes based on specific primitives), wrap it in `useMemo`. This memoizes the object itself, ensuring its reference remains the same unless its dependencies actually change. ```javascript function MyComponent({ data }) { const stableOptions = useMemo(() => ({ id: data.id, filter: 'active' }), [data.id]); // Only re-create if data.id changes useEffect(() => { fetchData(stableOptions); }, [stableOptions]); // Now only re-runs if stableOptions' reference changes // ... } ``` This trick is a lifesaver for optimizing `useEffect` calls, especially when dealing with complex configurations or filtering logic passed down as props. It keeps your effects clean and your app performant. What's been your biggest `useEffect` headache, and how did you solve it? #React #FrontendDevelopment #JavaScript #Performance #WebDev

Today I revised one of the most important topics in web development — HTTP Methods & Status Codes 🌐🔥 Every API call, website request, and frontend-backend communication depends on these fundamentals. 🔹 HTTP Methods = What action you want to perform 📥 GET Used to fetch data. Examples: get users, products, profile. 💡 Important: GET can send data using: ✔ Query params → /users?id=1 ✔ Headers ✔ Request body (possible in some clients, but browsers usually don’t support/rely on it) So in browsers, GET is mainly for reading data. 📤 POST Used to create new data. Example: register user, create order. ✏️ PUT Used to fully update data. 🩹 PATCH Used to partially update data. 🗑️ DELETE Used to remove data. 🔹 Why Methods Matter ✔ Clear API design ✔ Better communication ✔ Easy maintenance ✔ Security & caching benefits 🔹 Status Codes = What happened after request ✅ Success 200 OK → Success 201 Created → New resource created 204 No Content → Success, no response body ❌ Client Errors 400 Bad Request 401 Unauthorized 403 Forbidden 404 Not Found 💥 Server Errors 500 Internal Server Error 503 Service Unavailable 🧠 Big Realization HTTP Methods say: What you want to do Status Codes say: What happened #HTTP #APIs #WebDevelopment #BackendDevelopment #FrontendDevelopment #NodeJS #JavaScript #SoftwareEngineering #Programming #Developers #SystemDesign #Coding #TechExplained #DeveloperLife #LearnInPublic #BuildInPublic #Networking #TechCommunity #JavaScript #frontend #backend #fullstack #react #js #reactdeveloper #nodedeveloper #backendDeveloper #frontendDeveloper

𝐌𝐚𝐬𝐭𝐞𝐫𝐢𝐧𝐠 𝐒𝐭𝐚𝐭𝐞 𝐋𝐨𝐠𝐢𝐜 & 𝐂𝐑𝐔𝐃 𝐎𝐩𝐞𝐫𝐚𝐭𝐢𝐨𝐧𝐬 ⚛️ Yesterday was about the "comeback," but today is about the "consistency." I spent my session diving into dynamic data management—building a Name Manager that handles full CRUD (Create, Read, Update, Delete) logic. To move from static pages to interactive apps, I focused on these three technical pillars: 🔹 𝐮𝐬𝐞𝐒𝐭𝐚𝐭𝐞 (𝐓𝐡𝐞 𝐌𝐞𝐦𝐨𝐫𝐲): In React, components reset on every render. useState acts as the persistent "brain," allowing the app to remember data even when the UI updates. I practiced using setter functions to trigger re-renders safely. 🔹 .𝐦𝐚𝐩() (𝐓𝐡𝐞 𝐔𝐈 𝐅𝐚𝐜𝐭𝐨𝐫𝐲): This is how we turn raw data into an interface. It loops through an array and transforms strings into interactive components. It’s the engine behind every dynamic list you see online. 🔹 .𝐟𝐢𝐥𝐭𝐞𝐫() (𝐓𝐡𝐞 𝐈𝐦𝐦𝐮𝐭𝐚𝐛𝐥𝐞 𝐃𝐞𝐥𝐞𝐭𝐞): React rule #1: Don't mutate state. Instead of "erasing" data from the original array, I used .filter() to create a brand-new copy. This is the secret to building predictable, bug-free applications. 𝐖𝐡𝐚𝐭 𝐈 𝐢𝐦𝐩𝐥𝐞𝐦𝐞𝐧𝐭𝐞𝐝 𝐭𝐨𝐝𝐚𝐲: ✅ Create: Added new entries using the Spread Operator [...]. ✅ Read: Rendered a dynamic, real-time list with .map(). ✅ Update/Delete: Built the logic to modify and remove specific items without breaking the state. 𝐓𝐡𝐞 𝐁𝐢𝐠 𝐓𝐚𝐤𝐞𝐚𝐰𝐚𝐲: In React, we don't modify the past; we create a fresh copy of the future! 🚀 #ReactJS #WebDevelopment #JavaScript #FrontendDeveloper #LearningInPublic