Controlled vs Uncontrolled Components in React

21 Days 21 web dev procject Day 6 of Building in Public 🚀 live demo : https://lnkd.in/gYuw98q9 Today I focused on improving the UI and fixing issues in my React project. Worked on component structure, responsive layout, and debugging some annoying build errors. Things I learned today: • Proper component separation makes debugging easier • Small UI fixes can dramatically improve user experience • Build errors usually come from simple mistakes (wrong imports, wrong paths) Slow progress is still progress. #buildinpublic #webdevelopment #reactjs #javascript #100daysofcode

𝗠𝗼𝘀𝘁 𝗥𝗲𝗮𝗰𝘁 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝘂𝘀𝗲 𝘁𝗵𝗲 𝘄𝗿𝗼𝗻𝗴 𝗵𝗼𝗼𝗸 𝗮𝗻𝗱 𝗱𝗼𝗻’𝘁 𝗲𝘃𝗲𝗻 𝗿𝗲𝗮𝗹𝗶𝘇𝗲 𝗶𝘁. useEffect vs useLayoutEffect in React 19.2 You think they’re the same? They’re not. The difference is timing. 👉 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁 • Runs after the browser paints • Does NOT block the UI • Best for API calls, subscriptions, timers, logging • Default choice in most cases 👉 𝘂𝘀𝗲𝗟𝗮𝘆𝗼𝘂𝘁𝗘𝗳𝗳𝗲𝗰𝘁 • Runs before the browser paints • Blocks the UI until it finishes • Best for measuring DOM, fixing scroll position, layout adjustments 𝗤𝘂𝗶𝗰𝗸 𝗥𝘂𝗹𝗲: If it affects layout or you need to measure something before the screen updates → useLayoutEffect Everything else → useEffect Small difference. Big impact on UI performance. #ReactJS #Frontend #WebDevelopment #JavaScript #fullstackdev #dashdev

React Hooks: useState vs useRef — Know the Difference When working with React functional components, two commonly used hooks are useState and useRef. While they may seem similar at first, they serve different purposes. -- useState * Used to store and manage component state * When the state updates, React re-renders the component * Ideal for data that affects the UI Example: const [count, setCount] = useState(0); -- useRef * Used to store mutable values that persist across renders * Updating a ref does NOT trigger a re-render * Commonly used for accessing DOM elements or storing previous values Example: const inputRef = useRef(null); -- Simple Rule to Remember: * If the value affects the UI → useState * If the value should persist but not trigger re-render → useRef Mastering these hooks helps you write cleaner and more efficient React components. #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #ReactHooks #SoftwareDevelopment

⚛️ This small design decision makes modern UIs feel smooth. React doesn’t update the DOM directly. And honestly… that’s a good thing. Instead, it creates something called the Virtual DOM — a lightweight copy of the real DOM living in memory. When the state changes, React doesn’t panic. It compares the old Virtual DOM with the new one, finds the difference, and updates only what actually changed. No full reload. No unnecessary updates. The DOM isn’t fast. React is just smart about touching it.🧠 That small design decision is what makes modern UIs feel smooth. #ReactJS #FrontendDevelopment #JavaScript #SoftwareEngineering #WebDevelopment

"Mastering React starts with its core building blocks: Components, Props, State, and Hooks (especially useState). Components are the reusable pieces of your UI, passing data down via props (read-only) while managing dynamic behavior through state. With the introduction of Hooks in React 16.8, useState revolutionized how we handle local state in functional components — no more class boilerplate! A quick reminder: Props → Data flow from parent to child (immutable from child's perspective) useState → [value, setValue] = useState(initialValue) — triggers re-renders on updates #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #ReactHooks"

useState vs useRef in React | Best Practices for Better Performance useState → Used to store state that updates the UI and causes component re-render. useRef → Used to store mutable values that persist between renders without causing re-render. useState is best when the value change should reflect on the screen. useRef is best when you need to keep a value without affecting rendering, such as DOM access, timers, or previous values. Using useState everywhere can cause unnecessary re-renders, while using useRef correctly helps improve performance in large React applications. Rule: If UI changes → useState If UI does not change → useRef #ReactJS #JavaScript #FrontendDevelopment #ReactHooks #MERNStack #SoftwareEngineering #WebDevelopment

Another core concept in React is props, short for “properties.” Props are how data moves from one component to another. Think of them as inputs you pass into a component so it can display or use that data. For example, you might have a reusable component that displays a user card. Instead of hardcoding the name or email inside the component, you pass that information in as props. The component stays flexible, and you can reuse it in different places with different data. This pattern is what makes React applications easier to organize. Small components receive data through props, render what they need, and stay focused on a single job. Once you start thinking in terms of components passing data through props, building larger interfaces becomes much more manageable. #reactjs #webdevelopment #frontenddevelopment #javascript #softwaredevelopment

Still wrapping every async operation in try/finally just to reset a spinner? 😅 React 19 changes everything: no more imperative isLoading juggling. useTransition now: Sets isPending automatically Waits for your async work to finish Resets isPending (even on errors) Keeps UI responsive & interruptible Avoids “state update on unmounted component” warnings Less boilerplate, fewer bugs, better DX. Async feels native! 🔥 Who's already migrating their forms/mutations? Read more → https://lnkd.in/dYppBpZy #React19 #ReactJS #JavaScript #Frontend #WebDevelopment #CleanCode #ReactHooks #TypeScript #DevTips

𝗘𝘃𝗲𝗿 𝗵𝗲𝗮𝗿𝗱 𝗼𝗳 "𝗧𝗲𝗮𝗿𝗶𝗻𝗴" 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁? With React 18's Concurrent Rendering, a new class of UI bugs emerged. "Tearing" is a visual glitch where your screen shows inconsistent data at the exact same time. 𝗧𝗵𝗲 𝗦𝗰𝗲𝗻𝗮𝗿𝗶𝗼: 1. Imagine a global theme variable living outside of React state: 2. React renders your <Header /> (Reads: Light Mode) 3. React pauses rendering to handle a high-priority user click. 4. That click changes the external theme in the background! 5. React resumes and renders <Footer /> (Reads: Dark Mode) The Result: A "torn" UI with a Light header and Dark footer. check out the snippet to understand how you fix it using 𝘂𝘀𝗲𝗦𝘆𝗻𝗰𝗘𝘅𝘁𝗲𝗿𝗻𝗮𝗹𝗦𝘁𝗼𝗿𝗲 Have you faced a challenge like this? let me know in comments #ReactJS #WebDevelopment #Frontend #JavaScript #React18