Naming useEffect Functions for Better Code

Your useEffect is firing 6 times. It's probably not what's in the dependency array. I had [options] in mine. One dependency. Looked fine. The effect ran on every single render anyway — hammering my API with duplicate calls I couldn't explain. The problem wasn't the value. It was the reference. options was an object getting recreated fresh on every render, so React saw a "new" dependency every time — even when the actual data hadn't changed. React doesn't deep-compare objects in the dep array. It checks identity. Fix was wrapping options in useMemo. Two lines. Effect ran once. Done. But honestly, the bigger shift was realising I'd been thinking about dependencies wrong. It's not just what is in the array — it's whether the things in the array are actually stable between renders. If your effect fires more than it should, check the stability of your deps, not just the list. What kills you about useEffect? Curious if this one's common. #react #javascript #reacthooks #frontenddevelopment #webdev

🚀 Frontend Performance — Learning in Public Over the last couple of days, I explored Lighthouse-based performance analysis on a real application. Key learnings 👇 🧠 Main Thread Matters 👉 Browser runs on a single thread 👉 Heavy JS → slower interaction 🚦 Render-Blocking Resources 👉 CSS/JS can delay UI rendering ⛓️ Critical Request Chain 👉 Too many dependencies → slower loading 📊 Lighthouse Insight 👉 It’s not about score 👉 It’s about identifying root causes 🎯 Big takeaway: Performance = reduce work + remove blockers 📌 Next: Building a real-world performance audit report #Frontend #WebPerformance #JavaScript #ReactJS #SoftwareEngineering #LearnInPublic

🚀 Have you ever needed to grab full-page screenshots of an entire website, only to end up writing a flaky script or doing it manually? Meet ui-capture by ElysiumOSS! 📸🎥 It’s an incredibly powerful open-source crawler driven by Playwright and orchestrated by Effect. It automatically walks through a website and captures full-page screenshots (PNG, real WebP, and JPEG) along with optional multi-quality videos for every reachable internal route. ✨ Why it stands out: 🖼️ Real WebP Generation: Pipes PNGs directly through ffmpeg for true WebP compression, not just renamed file extensions. 🧠 Framework-Aware: Smart link discovery reads traditional anchors and modern framework globals (Next.js, Nuxt, SvelteKit) while intelligently skipping static assets. 📜 Warm-up Scrolls: It automatically scrolls the page down and back up before capturing. This triggers IntersectionObserver lazy-loads and animations—no more capturing empty skeleton UI! 🛡️ Effect-Driven Reliability: Built with structured concurrency, retries, and guaranteed cleanup of browser contexts, ensuring no zombie Chromium processes are left behind. 🎬 Multi-Quality Video: Captures the full run and can automatically transcode it down to multiple resolutions. 💻 Get started in seconds via CLI (Bun or Node): ```bash bun add -g @elysiumoss/ui-capture bunx playwright install chromium ui-capture https://example.com --max-depth 1 --video ``` Whether you need a quick CLI archiving tool or a robust library to integrate into your TypeScript pipelines, ui-capture has you covered. Check out the repo, drop a ⭐, and let automation do the heavy lifting! 🔗 https://lnkd.in/eeM8_TQs #WebDevelopment #Playwright #TypeScript #EffectTS #OpenSource #Automation #QA #Testing #BunJS #NodeJS

Mistake #1: I used useEffect for almost everything. Fetching data, syncing props to state, deriving values, even handling basic logic. At one point, my components had more useEffect than actual UI. Things worked… but they were fragile. Small changes broke unexpected parts. The realisation came later: useEffect is meant for side effects, not general logic. If you’re calculating something from props or state, you probably don’t need an effect at all. Once I reduced unnecessary useEffect usage, my components became predictable and easier to debug. Follow for Day 2. Repost if you’ve ever been stuck debugging useEffect. #reactjs #frontend #javascript #webdevelopment #cleanCode #softwareengineering

We often hear that JavaScript is single threaded. But at the same time, it handles API calls, timers, and UI updates smoothly. The reason is the Event Loop. Here is a simple way to understand it. Think in terms of 5 parts: 1. Call Stack This is where code runs right now. If something blocks here (like an infinite loop), everything else stops. 2. Web APIs The browser handles things like fetch, setTimeout, and events outside the main thread. When they are done, they send callbacks to queues. 3. Microtask Queue (high priority) This includes Promise callbacks and async/await. All microtasks run completely before anything else happens. -> If you keep adding microtasks (like recursive Promise.then), you can actually block rendering completely. 4. Macrotask Queue (low priority) This includes setTimeout, setInterval, and other tasks. Only one macrotask runs at a time. 5. Render After microtasks are done, the browser updates the UI (layout and paint). -> The browser decides when to paint — not strictly after every loop. Simple cycle: Run one macrotask → run all microtasks → update UI → repeat JavaScript isn’t non-blocking — the event loop just makes it feel that way. #javascript #frontend #reactjs #webdevelopment #softwareengineering #webperformance #systemdesign #Coding

Everyone is experimenting with this new text engine. Here is what it actually looks like in a real UI. Text reflows around moving elements in real time. Smooth, no layout breaks. I built an interactive demo 👇 https://lnkd.in/ezshxrKB Built with Pretext by Cheng Lou: https://lnkd.in/eex7dUWH Would you use this in production? #Frontend #JavaScript #WebDev #BuildInPublic #Pretext

Why does your 'ref' return 'null' the moment you wrap your input in a custom component? It is one of those React quirks that trips up even experienced developers. By default, refs do not behave like props. They are treated as special instances that stop at the component boundary to protect encapsulation. This is exactly why we need 'forwardRef'. It acts as a bridge that allows a parent component to reach through a child and grab a direct handle on an internal DOM node. The most practical application is building a reusable UI library. If you create a custom 'Input' or 'Button' component, your parent component might need to call '.focus()' or '.scrollIntoView()'. Without 'forwardRef', your parent is just holding a reference to a React internal object, not the actual HTML element. Another real-world scenario involves Higher-Order Components (HOCs). If you wrap a component with a 'withAnalytics' or 'withTheme' wrapper, that wrapper will 'swallow' the ref by default. By using 'forwardRef' in your HOC implementation, you ensure the reference passes through the wrapper and lands on the component that actually needs it. It is about making your abstractions transparent and ensuring that the parent component maintains the control it expects over the physical DOM. Using this pattern sparingly is key. It is an escape hatch for those moments where declarative state isn't enough to manage physical browser behavior. It keeps your component interfaces clean while providing the necessary access for specialized UI interactions. #ReactJS #SoftwareEngineering #Frontend #WebDevelopment #Javascript #CodingTips #CodingBestPractices

🚀 JavaScript Project 3: Counter System Built a stste-driven counter with increment, decrement and reset actions —but this time, I focused on how engineers think, not just making it work. 🔑 Key ideas: • State is the single source of truth • UI updates are centralized ( updateUI ) • Event delegation for scalable interaction • Data-driven actions using data-* attributes • Clear UI feedback (disabled states, interaction response) 💡Biggest insight: Don't manipulate the UI directly — update state, then let the UI reflect it. 🔗 Live: https://lnkd.in/dTNy6A2M 💻 Code: https://lnkd.in/dp638D6h This is part of my journey building JavaScript systems step-by-step. More coming. #JavaScript #Frontend #WebDevelopment #LearningInPublic

I built a Pomodoro timer into ACE and honestly it's been one of those features I didn't know I needed until I had it. The idea was simple. I was using ACE to study and kept switching tabs to find a timer. So I just built one in. 25 minutes. Focus. Break. Repeat. If you're building something, don't sleep on the small features. Sometimes the thing that makes your product actually usable isn't the AI or the fancy architecture. It's the 25 minute timer sitting quietly in the corner. #buildinpublic #nextjs #webdevelopment #javascript #frontenddevelopment

where does that 'e' or 'event' come from?? If you have ever wondered why that object magically appears in your 'onClick' handler, the answer lies in how React coordinates the bridge between the browser and your code. It isn't just a standard browser event. It is a very specific system designed to keep your UI consistent. When you pass a function reference like 'onClick={handleClick}', React automatically injects a SyntheticEvent as the first argument. You do not have to do anything. It is just there. This is a cross-browser wrapper that ensures your event logic works the same in every environment. Under the hood, React is doing the heavy lifting of mapping native DOM events to this consistent interface. The behavior changes slightly when you use arrow functions in your JSX. If you write 'onClick={() => handleClick()}', you lose that automatic injection. In this case, you are responsible for capturing the event from the anonymous wrapper and passing it down manually, like 'onClick={(e) => handleClick(e)}'. It is a small syntactic difference, but forgetting this is a common reason why 'event.target' suddenly comes back as undefined. Understanding this flow is crucial for writing clean code. Since React 17 removed event pooling, you no longer have to worry about the event object being nullified after the handler runs. You can now use the event inside asynchronous code without calling 'e.persist()'. It is a simpler and cleaner model that allows you to focus on logic rather than browser quirks. #ReactJS #SoftwareEngineering #WebDevelopment #Javascript #CodingTips #Frontend