React Controlled Components: Predictable Form Data with State

Day 6: Understanding State in React If Props allow components to receive data, then State allows components to manage and update their own data. 📌 What is State in React? State is a built-in object that allows a component to store data that can change over time. When the state changes, React automatically re-renders the component, updating the UI. 📌 Example using useState Hook import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <h1>{count}</h1> <button onClick={() => setCount(count + 1)}> Increase </button> </div> ); } 📌 What is happening here? • count → current state value • setCount → function used to update the state • useState(0) → initial value of state When the button is clicked, the state updates and the UI re-renders automatically. 📌 Props vs State Props • Passed from parent component • Read-only State • Managed inside the component • Can be updated 📌 Why State is important State allows React applications to be interactive. Examples: • Counter apps • Form inputs • Toggle buttons • Dynamic UI updates #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CodingJourney #LearnInPublic

🧠 Why useRef Doesn’t Cause a Re-render in React Many developers assume useRef behaves like state. But it doesn’t. Example 👇 function Counter() { const countRef = useRef(0); function increment() { countRef.current += 1; console.log(countRef.current); } return ( <button onClick={increment}> Count: {countRef.current} </button> ); } Click the button. Console shows: 1 2 3 But the UI still shows: Count: 0 🔍 Why? useRef does not trigger a re-render. Updating: countRef.current = newValue changes the value, but React does not re-run the component. 🧠 What useRef Is Actually For useRef is mainly used for: Accessing DOM elements Persisting values between renders Storing mutable data that shouldn’t trigger UI updates Example: const inputRef = useRef(); <input ref={inputRef} /> 🎯 Key Rule If the UI needs to update → use state If the value just needs to persist → use ref #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #WebDevelopment #LearningInPublic

React patterns that often cause subtle bugs Some React code looks completely fine at first glance. But over time, certain patterns can cause confusing bugs or make the UI harder to reason about. Here are a few I try to watch out for 👇 1️⃣ Copying props into state const [user, setUser] = useState(props.user) This creates two sources of truth. If the parent updates props.user, the state inside the component may not update the way you expect. That’s how UI gets out of sync. 2️⃣ Storing values that can be derived Instead of storing: const [fullName, setFullName] = useState("") Sometimes you can simply calculate: const fullName = `${firstName} ${lastName}` Derived state often adds extra logic and unnecessary re-renders. 3️⃣ Lifting state higher than necessary Lifting state up is helpful when multiple components need the same data. But lifting it too high can lead to: • unnecessary re-renders • harder state management • tightly coupled components Sometimes the better answer is to keep state closer to where it is used. 4️⃣ Large components that do too many things When one component handles too much, it becomes harder to: • understand • test • debug Smaller, focused components are usually easier to work with. 5️⃣ Overusing useEffect A lot of logic ends up in useEffect when it does not need to be there. If something can be calculated directly from props or state, it often does not need an effect. None of these patterns are always wrong. But I’ve noticed many React bugs come from state being: • duplicated • misplaced • harder to reason about Keeping one clear source of truth usually makes the UI much easier to understand. What React pattern do you see most often that leads to bugs? #reactjs #frontend #javascript #webdevelopment #softwareengineering #reactdeveloper #reacthooks #frontendengineering

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

Tree shaking is asked in every frontend interview. Almost no one applies it in production. I fixed it in our UI library and the bundle size dropped by more than half. If you maintain a UI library, run through this checklist: ✅ Ship ESM builds Bundlers like Webpack, Rollup & Vite need static imports to detect unused code. CJS require() is dynamic — tree shaking won't work. ✅ Use preserveModules in Rollup Bundling everything into one file defeats the purpose. Keep modules separate so bundlers can drop individual files that aren't imported. ✅ Declare sideEffects in package.json Without this, bundlers play it safe and include everything. Set it to false or explicitly list CSS files that must always be included. ✅ Add external alongside peerDependencies peerDependencies tells npm. external tells your bundler. You need both — otherwise React or lodash still gets bundled into your library. ✅ Prefer named exports over default exports Named exports make your API explicit. Bundlers can clearly see what's being used and safely eliminate the rest. Miss even one of these and your consumers ship your entire library for a single button import. Wrote a full deep-dive on each point 👇 https://lnkd.in/gciJ3SU3 #JavaScript #Frontend #WebPerformance #React #Bundling

🚀 Day 5/30 – State in React One of the most important concepts 🔥 Today I learned: ✅ State stores dynamic data inside a component → It allows components to manage and update their own data ✅ When state changes → React re-renders the UI → React automatically updates only the changed parts (efficient rendering ⚡) ✅ Managed using useState hook → The most commonly used hook in functional components ✅ State updates are asynchronous → React batches updates for better performance 💻 Example: import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); const handleClick = () => { setCount(prev => prev + 1); // safe update }; return ( <div> <h2>Count: {count}</h2> <button onClick={handleClick}>Increment</button> </div> ); } 🔥 Key Takeaway: State is what makes React components interactive, dynamic, and responsive to user actions. #React #State #FrontendDevelopment #JavaScript #WebDev #CodingJourney #LearnInPublic

𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗱 𝘃𝘀 𝗨𝗻𝗰𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗱 𝗜𝗻𝗽𝘂𝘁𝘀 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 — 𝗔𝗻𝗱 𝗪𝗵𝘆 𝗜𝘁 𝗠𝗮𝘁𝘁𝗲𝗿𝘀 In React, form inputs can work in two ways: Controlled Uncontrolled At first glance, both seem similar. But the difference affects debugging, validation, and data flow. 𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗱 𝗜𝗻𝗽𝘂𝘁 const [value, setValue] = useState(""); <input value={value} onChange={(e) => setValue(e.target.value)} /> Here, React state is the single source of truth. Benefits: • Easy validation • Predictable data flow • Better control • Easier debugging 𝗨𝗻𝗰𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗱 𝗜𝗻𝗽𝘂𝘁 const inputRef = useRef(); <input ref={inputRef} /> Here, the DOM manages the state. You read the value when needed. Benefits: • Less re-rendering • Slightly simpler for basic forms So which one is better? Most of the time: Controlled components are preferred. Because React stays in control of the data. But for large forms or performance-heavy cases, uncontrolled inputs can make sense. The key is understanding the trade-off. React is not about “always do X”. It’s about choosing intentionally. Day 10/100 — sharing practical frontend engineering lessons. Do you prefer controlled or uncontrolled inputs in your projects? #ReactJS #FrontendEngineering #JavaScript #WebDevelopment #SoftwareEngineering

𝐆𝐨𝐭 𝐛𝐢𝐭𝐭𝐞𝐧 𝐛𝐲 𝐚 𝐮𝐬𝐞𝐒𝐭𝐚𝐭𝐞 𝐛𝐮𝐠 𝐭𝐡𝐢𝐬 𝐰𝐞𝐞𝐤 𝐭𝐡𝐚𝐭 𝐡𝐚𝐝 𝐦𝐞 𝐬𝐜𝐫𝐚𝐭𝐜𝐡𝐢𝐧𝐠 𝐦𝐲 𝐡𝐞𝐚𝐝 𝐟𝐨𝐫 𝐚𝐧 𝐡𝐨𝐮𝐫. It's easy to fall into the trap of directly updating state based on its current value, like `setCount(count + 1)`. Works fine for simple stuff, right? But in scenarios with multiple rapid updates, or when you're relying on state from a stale closure inside an effect or async operation, you can end up with unexpected results. Your `count` might not be what you think it is. The fix? Use the updater function pattern: ```javascript // Don't do this if 'count' might be stale: // setCount(count + 1); // Do this for reliable updates: setCount(prevCount => prevCount + 1); // Or for complex objects: setUsers(prevUsers => [...prevUsers, newUser]); ``` This ensures your update always receives the latest state snapshot, not the one from when the function was created. It's a small detail, but it can save you from some tricky debugging sessions, especially in React apps with a lot of moving parts. Have you ever run into subtle `useState` issues like this? What's your go-to pattern for complex state updates? #React #JavaScript #Frontend #WebDevelopment #Debugging

⚛️ React 19 introduced a hook called use() that simplifies async data fetching. Instead of writing useState + useEffect, you can read a Promise directly. Example: const product = use(fetchProduct()) If the Promise is still pending, React pauses rendering and shows the nearest Suspense fallback. <Suspense fallback={<Loading />}> <ProductPage /> </Suspense> Before React 19, loading data usually looked like this: const [product, setProduct] = useState(null) useEffect(() => { fetchProduct().then(setProduct) }, []) Which meant managing: • useState • useEffect • loading states With use(), React handles this with Suspense. When the Promise resolves, rendering continues automatically. No loading state. No effect. Less boilerplate. A small hook. But a big improvement in how React handles async rendering. #React #React19 #FrontendDevelopment #WebDevelopment #JavaScript

Your frontend feels slow — but you’re not sure why? 🤷♀️ In his Frontend Performance Workshop, Peter Kröner shows you how to truly understand what’s happening under the hood of the browser — and how to fix performance issues the right way. With practical tweaks you can apply immediately! You’ll dive deep into: 🔺 How browsers parse, execute & render HTML, CSS & JS 🔺 Reading and understanding flame charts 🔺 Render-blocking CSS & JS pitfalls 🔺 JS engine internals & just-in-time compilation 📅 Monday, June 8th, 26 | IPC | 📍Berlin 🤓 All about the workshop: https://lnkd.in/dWcJ5UdE #webinale #Frontend #WebPerformance #JavaScript #CSS #WebDevelopment