Dan Neciu’s Post

Today, this way of thinking feels completely natural — but when I was learning React, I struggled a lot with understanding what useEffect is actually for and when it should be used. I went from avoiding it altogether to wanting to solve everything with useEffect, until that moment when it finally clicked: it’s about syncing with the outside world, not normal render logic. Once that sank in, everything became much clearer. A great reminder that good React is about intentional choices, not more hooks. 👏

🎯 Are you overusing useEffect in React? I recently came across a brilliant decision tree that completely changed how I think about React hooks. Here's the game-changer: Before writing useEffect, ask yourself ONE question: "Is this syncing with an EXTERNAL system?" ✅ If YES → useEffect is fine ❌ If NO → You probably don't need it Here are the better alternatives: 📊 Transforming data? → Calculate during render (or use useMemo) 🖱️ Handling user events? → Use event handlers, not effects ⚡ Expensive calculation? → useMemo (not useEffect + setState) 🔄 Resetting state on prop change? → Use the `key` prop 📡 Subscribing to external store? → useSyncExternalStore The biggest mistake: Using useEffect to filter data or handle clicks. If you're doing this, there's a better way. Common anti-patterns to avoid: - useEffect + setState from props/state (causes extra re-renders) - useEffect for click/submit handlers (loses event context) - useEffect to notify parent components (breaks unidirectional data flow) When useEffect IS appropriate: - WebSocket connections - Third-party widget integration - Measuring DOM elements after render - Browser API subscriptions with cleanup Want to enforce this in your codebase? Check out the ESLint plugin: eslint-plugin-react-you-might-not-need-an-effect The React team's documentation on this topic is exceptional. Link in comments. 👇 What's your most common useEffect mistake? Drop it in the comments – let's learn together! hashtag #React hashtag #JavaScript hashtag #WebDevelopment hashtag #FrontendDevelopment hashtag #Programming hashtag #SoftwareEngineering hashtag #ReactJS hashtag #CodeQuality

Hi there! I’d like to share the result of my homework assignment “Creating an React based Image Search Application using HTTP requests. Working with API” As part of this task, I built an application that allows users to search for images by keyword using an external API. What was implemented and used: - React with a modern development approach - React hooks such as useState(), useEffect(), useRef(), and others - HTTP requests to fetch data from an API - Dynamic image search functionality - Viewing detailed image information When opening an image, additional data from the API is displayed, including: number of likes, views and the nickname of the user who originally uploaded the image. Working with API is a very nice task to train your understanding of using data in creative way. It also brings me closer to the future work with Back-end and creating my own data storages. You can try it out by the link and see you soon with the next assignment! https://lnkd.in/eP49y26i #GoITNeoversity #React #JavaScript #API #Frontend #WebDevelopment #LearningJourney

⚡ Stop using .filter() and .map() together. Your bundle size will thank you. I've seen this pattern in 100+ React codebases this year: const users = data .filter(user => user.active) .map(user => <UserCard {...user} />); Looks clean. Feels right. But here's the problem? Your code loops through that array TWICE. Your browser processes it twice. Your bundle gets heavier. ━━━━━━━━━━━━━━━━━━━━━━━━━ The Issue: ❌ Two iterations over same array ❌ Creates intermediate arrays in memory ❌ Slows down large datasets ❌ Unnecessary re-renders ━━━━━━━━━━━━━━━━━━━━━━━━━ The Better Way: ✅ Use reduce() → Single loop ✅ Cleaner code, fewer dependencies ✅ Smaller bundle size ✅ Better edge case handling ━━━━━━━━━━━━━━━━━━━━━━━━━ Why This Matters: • Performance: Only loops once • Dependencies: Zero extra libraries • Bundle Size: Noticeably smaller • Scalability: Handles 10K+ items smoothly Master the basics before reaching for optimization libraries. ━━━━━━━━━━━━━━━━━━━━━━━━━ 💬 Question for you: Do you prefer readability (.filter().map()) or performance (reduce())? Is there a middle ground I'm missing? Let's debate in the comments. 👇 #JavaScript #ReactJS #WebDevelopment #CodingTips #Performance #FrontendDevelopment #BestPractices #Coding #TechTips #DeveloperCommunity

Performance vs. Readability: at the end of the day, both are O(n). While .reduce() avoids intermediate array allocations, modern JIT engines like V8 optimize these patterns so heavily that the overhead is often negligible for most use cases. In 4 years of building critical digital solutions, I’ve learned that "clever" code usually costs more in developer maintenance and debugging than it saves in micro-seconds of execution. Unless you’re handling massive datasets where memory pressure is a verified bottleneck, prioritize the human reader. Premature optimization is the root of unnecessary complexity. Always profile your system before sacrificing legibility.

⚛️ React 19 makes <script> tags a first-class citizen. 🎊 ✋ Stop writing useEffect to load external scripts. Whenever we need to add Google Analytics, Stripe, or a Maps widget, we usually reach for a useEffect hook to manually append a <script> tag to the document body. It feels like a hack because it is a hack. ❌ The Old Way: You had to write 10 lines of DOM manipulation code. You had to worry about race conditions: "What if this component mounts twice? Will I load the script twice?" ✅ The Modern Way: Just render the <script> tag right inside your component (next to your JSX). React handles the hard part: • Hoisting: It moves the script to the correct place in the document. • Deduplication: If 5 different buttons all render this script tag, React guarantees it only loads once. The Result: You can finally co-locate your dependencies. If a component needs a script, it declares it itself. No more global setup in _document.js. 👉 Note: This works for <link rel="stylesheet"> too! #ReactJS #React19 #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #ReactsHacks #Tips #ReactTips #ReactHooks #FrontendDeveloper #DeveloperTips #ReactHack

⚛️ React 19 makes <script> tags a first-class citizen. 🎊 ✋ Stop writing useEffect to load external scripts. Whenever we need to add Google Analytics, Stripe, or a Maps widget, we usually reach for a useEffect hook to manually append a <script> tag to the document body. It feels like a hack because it is a hack. ❌ The Old Way: You had to write 10 lines of DOM manipulation code. You had to worry about race conditions: "What if this component mounts twice? Will I load the script twice?" ✅ The Modern Way: Just render the <script> tag right inside your component (next to your JSX). React handles the hard part: • Hoisting: It moves the script to the correct place in the document. • Deduplication: If 5 different buttons all render this script tag, React guarantees it only loads once. The Result: You can finally co-locate your dependencies. If a component needs a script, it declares it itself. No more global setup in _document.js. 👉 Note: This works for <link rel="stylesheet"> too! #ReactJS #React19 #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #ReactsHacks #Tips #ReactTips #ReactHooks #FrontendDeveloper #DeveloperTips #ReactHack

React just got a whole lot cleaner. ✨ If you’ve just started exploring React 19, the first thing you’ll notice is how much "boilerplate noise" we can finally delete. The shift from useEffect to the new use() hook is a perfect example. Here is the breakdown of what's happening in this image: ⬅️ The Left: The "Old" Way (React <18) This is the pattern we've used for years, but it has always felt a bit clunky: Manual State: We had to create useState for the data, the loading spinner, and the error handling. The Lifecycle Trap: We relied on useEffect to trigger the fetch on mount. Verbosity: It takes about 15 lines of code just to display one piece of data. ➡️ The Right: The "New" Way (React 19) With the introduction of the use() hook, the code becomes declarative: Direct Unwrapping: No more effects. The use(promise) hook handles the resolution of the data directly in the render path. Suspense Integration: We no longer need manual if (loading) checks. React handles the "waiting" state using <Suspense> boundaries higher up the tree. Pure Logic: We've gone from 15+ lines of ceremony to just 2 or 3 lines of actual logic. I am officially moving our projects toward this cleaner, more readable syntax. hashtag #webdeveloper hashtag #ReactJS hashtag #React19 hashtag #react18 hashtag #WebDevelopment hashtag #CleanCode hashtag #JavaScript hashtag #SoftwareEngineering hashtag #Frontend hashtag #Reactnative

🚀 What is Event Bubbling in Node.js? Many developers confuse Event Bubbling in the browser with how events work in Node.js. Let’s clear this up 👇 In the browser, event bubbling means: When an event is triggered on a child element, it propagates upward to its parent elements in the DOM tree. But in Node.js, things are different. Node.js does NOT have: ❌ DOM ❌ Parent-child event propagation Instead, Node.js follows an Event-Driven Architecture using the built-in: 👉 EventEmitter 💡 How Events Work in Node.js Node.js uses the events module: const EventEmitter = require('events'); const emitter = new EventEmitter(); emitter.on('greet', () => { console.log('Hello Developer!'); }); emitter.emit('greet'); Here’s what happens: 1️⃣ We register a listener using .on() 2️⃣ We trigger the event using .emit() 3️⃣ The callback runs immediately There is no bubbling phase like in the browser. 🔥 Key Difference Browser (DOM)Node.jsHas event bubblingNo bubblingParent-child propagationDirect listener executionDOM-basedEventEmitter-based 🎯 Why This Matters Understanding this difference helps you: Avoid confusion during interviews Design scalable event-driven systems Write cleaner backend logic Node.js is powerful because it is built around non-blocking, event-driven architecture. 💬 Final Takeaway 👉 Event Bubbling belongs to the browser world. 👉 Node.js uses EventEmitter, not DOM propagation. Two environments. Two different event models. One JavaScript. 💚 If you’re learning backend with Node.js, this concept is fundamental. #NodeJS #JavaScript #BackendDevelopment #WebDevelopment #EventDriven #FullStackDeveloper

One JavaScript habit that improved my React code a lot: Thinking in data, not UI first. Earlier, I used to jump straight into JSX and styling. Now I pause and ask: • What data does this component need? • What should be state and what shouldn’t? Once the data flow is clear, the UI becomes easier and cleaner. This small mindset shift reduced bugs and made my components more predictable. Still learning, but this helped me move forward. #JavaScript #ReactJS #MERNStackDeveloper #SoftwareDeveloper #LearningInPublic #DeveloperTips