Replace Boolean Props with a Single Status Prop in React

Why does React say: "Don't call hooks conditionally"? 🤔 Let’s break it down simply. React doesn’t track hooks by name. It tracks them by order. Every render, React just walks through hooks like this: 1st hook → 2nd hook → 3rd hook That’s it. No labels. No IDs. Just position. Now imagine this 👇 if (condition) { useEffect(() => { // do something }); } 👉 First render: Hook1 → Hook2 → Hook3 👉 Next render (condition = false): Hook1 → Hook3 Now React gets confused 😵 It expects Hook2… but suddenly sees Hook3. This breaks the internal hook mapping — and boom 💥 unexpected bugs or crashes. 👉 The rule exists because hooks must run in the same order on every render. That’s why: ❌ No hooks inside conditions ❌ No hooks inside loops ❌ No hooks inside nested functions 👉 Always call hooks at the top level. Once you understand this, React hooks feel much less “magical” and more predictable. #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #LearnInPublic

This is subtle but causes real performance issues: ```js // New function reference every render — React remounts the child each time function ParentComponent() { function ChildComponent() { return <div>Child</div>; } return <ChildComponent />; } ``` Every time ParentComponent renders, React sees a brand new component definition. It unmounts and remounts the child — destroying its state and causing unnecessary DOM operations. The fix is simple — define components at the module level: ```js // Stable reference — React correctly reuses the component function ChildComponent() { return <div>Child</div>; } function ParentComponent() { return <ChildComponent />; } ``` This is one of those mistakes that's easy to make and hard to debug when you don't know what to look for. #ReactJS #JavaScript #Frontend #WebDevelopment

🚨 Small React mistake… big headache 👇 I used to write code like this without even thinking: if (condition) return null; useEffect(() => { // logic }, []); It looks completely fine, right? I thought the same ❌ Then suddenly this error shows up: 👉 "Rendered fewer hooks than expected" Took me some time to realize what was actually wrong. React expects hooks to run in the same order every single render. But in this case: • First render → component returns early → useEffect doesn’t run • Next render → useEffect runs And boom 💥 React gets confused because the order changed. The fix is simple (but easy to forget): useEffect(() => { // logic }, []); if (condition) return null; Now hooks always run first, no matter what 👍 💡 Lesson learned: Never put hooks after a condition or inside it. Always keep them at the top. Have you ever hit this error? It’s one of those bugs that looks small but wastes a lot of time 😅 #react #nextjs #javascript #frontend #webdev

Most React developers know this rule: “Don’t call hooks inside loops or conditions.” But far fewer understand why. React doesn’t track hooks by variable name or location. It tracks them purely by call order during render. So internally, it’s closer to this mental model: • First useState → slot 0 • Second useState → slot 1 • Third useState → slot 2 Each hook call is mapped based on its position in the sequence. Now imagine this: if (isLoggedIn) { useState(...) } On one render the hook is called, on another it’s not. That shifts the entire sequence. React will still read: • “2nd hook → slot 1” But now it’s actually reading the wrong state. I built a minimal useState implementation (attached) to demonstrate this. You’ll notice: • Hooks are stored in an array • Each call consumes the next index • The index resets on every render • Everything depends on consistent ordering That’s the real rule: It’s not about avoiding conditions It’s about keeping hook calls in the same order every render Once that order changes, state association breaks. #React #JavaScript #Frontend #SoftwareEngineering

How to prevent unnecessary re-renders in React ⚛️ After understanding why components re-render, the next step is learning how to control unnecessary ones. ⸻ 🔹 React.memo It helps prevent a component from re-rendering when its props haven’t changed. ⸻ 💡 Why it matters: Unnecessary re-renders can affect performance, especially in larger or complex components. ⸻ 🧠 Simple understanding: Same props → no re-render Changed props → re-render ⸻ ⚠️ Important: React.memo is useful, but should be used only when needed. ⸻ Small optimizations can make a big difference ⚡ #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #Performance #LearningInPublic

Mastering useState: The Most Important Hook in React If you're working with React, useState is one of the first hooks you learn — and also one you’ll use in almost every component you build. Yet many developers still use it incorrectly and run into stale state or unnecessary re-renders. useState allows you to add state to functional components. It returns an array with two values: the current state and a setter function. const [count, setCount] = useState(0); The real power (and common pitfall) comes when your new state depends on the previous state. Correct way: Using the functional updater (prev) => guarantees you always get the latest state, even when multiple updates happen quickly. A few best practices I always follow: Never mutate state directly. Always create a new object/array using the spread operator (...prev). Use computed property names [dynamicKey] when your key comes from a variable. Keep state as simple as possible. If your state object gets too complex, consider useReducer. I’ve seen many bugs disappear simply by switching from setState(newValue) to the functional form when the update relies on previous values. Whether you’re building a small UI or a complex audio/video player like the one I was recently working on, mastering useState patterns makes your code more predictable, cleaner, and easier to debug. What’s one useState trick or gotcha you’ve learned? Drop it in the comments #React #JavaScript #WebDevelopment #Frontend #CodingTips

🔍 Not all useRef are for DOM nodes… 😎 Most React developers think: 👉 “Refs are only for accessing HTML elements.” But here’s the secret: useRef is a powerful tool to prevent unnecessary re-renders and handle complex logic more efficiently. Look at this real-life scenario: ❌ The Problem: Using useState just to detect the first mount or track previous values often causes extra re-renders that your application doesn't need. ✅ The Solution: Using useRef as a persistent flag. It holds a value across renders without triggering a new render cycle. It's perfect for: 🔵 Tracking mount status (e.g. componentDidUpdate pattern). 🔵 Caching values. 🔵 Managing timers. 🔵 Storing previous props or state. Key Takeaways: 🔹 useState changes trigger re-renders. 🔹 useRef values persist between renders without re-rendering. 🔹 It’s a small mindset shift that leads to cleaner code, better performance, and more control. Stop overusing useState for things that don't need to be rendered! 🚀 What’s your favorite "hidden" use case for useRef? Let me know in the comments! 👇 #ReactJS #WebDevelopment #FrontendEngineering #JavaScript #ProgrammingTips #BestPractices #SoftwareEngineering #FaysalHossain #FullstackDeveloper #fullStackDeveloper #Faysal

Understanding the React Component Lifecycle 🌿⚛️ Every React component goes through three key phases: 🟢 Mount – when the component is created and added to the DOM 🔵 Update – when state or props change, triggering re-renders 🟣 Unmount – when the component is removed from the DOM With modern React, the useEffect hook ties it all together: Runs after mount (initial render) Runs after updates (when dependencies change) Can clean up on unmount (return function) useEffect(() => { // side effect here return () => { // cleanup on unmount }; }, []); Mastering this flow helps you manage side effects like API calls, subscriptions, and timers cleanly and predictably. #React #WebDevelopment #Frontend #JavaScript #ReactJS #Coding

React Error Boundaries are basically try/catch for UI rendering. Without one, a single broken component can crash the whole screen. With an Error Boundary, React catches the failure and shows a fallback UI instead. Even better: with react-error-boundary, you can also handle async errors using showBoundary(). You can get example code from my blog: https://lnkd.in/gDYnB7h5 #React #Frontend #JavaScript #WebDevelopment

Built a to-do app with a glassmorphic UI as a mini project. Kept it simple — vanilla HTML, CSS, and JS. No frameworks. A few things I learned along the way: — Local Storage API to persist tasks on refresh — DOM manipulation with vanilla JS — How CSS backdrop-filter actually works for the glass effect — JSON.stringify and JSON.parse for saving arrays Small project but learned a lot from it. More coming. repo link: https://lnkd.in/dEtj35Us #WebDev #JavaScript #Frontend #BuildInPublic