User
Write something
🛠️ Stop Making These Two Critical useEffect Mistakes!
Brief summary of my video about useEffect (generated by NotebookLM): The React useEffect Hook is essential for side effects like data fetching. But watch out for these two common traps that can lead to broken or buggy application behavior. 1. The Missing Dependency Trap Many developers use an empty dependency array ([]) to make useEffect run only once when the component mounts. The Problem: If your effect logic uses a state variable (like a Filter), but that variable is not included in the dependency array, the effect will not rerun when the state changes. React itself cannot automatically detect this dependency. You'll see the component re-render with the new state (e.g., 'Sale'), but the product list remains unchanged (e.g., still 'Popular' products 1, 2, 3). The Fix: Always provide an array containing all dependent values used within the effect's callback. By including the state variable Filter, React notices when the value changes, and the effect is correctly triggered again to fetch the updated data. Action Item: If your effect isn't running when you expect it to, check your Dependency Array first! 2. The async/await Trap A major error occurs when you try to declare the useEffect callback function itself as async. The Problem: The useEffect callback must return either nothing (undefined) or a cleanup function. An async function, however, implicitly returns a Promise. Since a Promise is not a valid cleanup function, React throws an error: "cleanup function must be a function or undefined". The Fixes (Keep the Outer Function Synchronous): 1. Use .then(): Avoid async/await and use the Promise API syntax with .then() to handle the asynchronous result. 2. Declare an Inner Function (Recommended): Define a separate, named async function (e.g., innerFetch) inside the useEffect callback. The outer useEffect callback remains synchronous and simply calls this inner function, successfully avoiding the implicit Promise return. --------------------------------------------------------------------------------
1
0
Notes about the courses in the Classroom
Hey Devs, as some of you might already know, you can find my courses here in the Classroom — these are (atm) the same ones I offer on Udemy. If you’re interested, I recommend checking them out here directly — on Udemy, the prices are usually higher because I’m no longer part of the automatic discount program. Also, if a course is purchased on Udemy without one of my promo links, I only receive a small share of the sale. Here on Skool, the courses are currently cheaper (at least for now 😉) — plus, we can discuss questions or related topics directly here in the feed if you’d like to dive deeper.(That’s completely optional of course — the courses are still self-paced as usual.) Cheers, Stephan
0
0
Who’s already using Bun in production?
I tried out Bun.js back when it first came out — but at that time it wasn’t really stable yet, and a lot of Node APIs weren’t fully supported. Since then, I’ve only kept an eye on it from the sidelines. From what I can tell, it’s now being used for server deployments too, which makes me curious: ➡️ Has anyone here actually used Bun in production yet? ➡️ How’s it going in practice — stable and worth it, or still better to wait a bit?
1
0
React 19.2 – interesting for you?
With React 19.2 there have been a few updates (it’s been out for a little while already), mainly focused on performance and server rendering. Here are some of the highlights: - Activities – allow switching between different UI states without re-rendering everything. Useful for more complex interfaces that should keep running in the background. - useEffectEvent Hook – helps separate event handlers more cleanly from effects, reducing unnecessary re-renders. - cacheSignal() – a new API for better control and cancellation of fetch requests in Server Components. - Partial pre-rendering – lets you render static and dynamic parts of a page separately, making SSR more efficient. - Improved performance tools – React Performance Tracks in Chrome DevTools now give deeper insight into scheduling and rendering behavior. I find the new Activities concept interesting — it reminds me a bit of Android Activities. Probably still something for specific use cases right now, but if React continues expanding on it, it could become a standard feature for more advanced UIs that map well to this model. 👉 What do you think? Does React even need more new features, or is it already getting too complex? Personally, I’d say the latter — that’s why I find newer approaches like Ripple so interesting. They rethink the whole thing from the ground up, keeping it simpler and more elegant.
0
0
So... what’s your problem? 😉
Hey everyone,I just wanted to ask — what’s the biggest problem or challenge you’re currently facing in your development work? If you’re stuck somewhere, maybe the community here can help. Feel free to post about it — especially if it’s something others might also run into — so we can share experiences, ideas, and possible solutions. For me right now, the main challenge is figuring out how to make local AI practical and user-friendly — ideally without needing a GPU-powered server. I’m exploring ways to run it locally on the user’s machine, either in the browser or through something like an Ollama setup. There are so many options — Prompt API, WebLLM, Ollama, or even just running it on a strong remote server with NVIDIA hardware.Balancing all that and finding the right setup for different use cases is what I’m working on right now. What about you? What’s your current challenge?
0
0
1-7 of 7
powered by
Web Dev Group
skool.com/web-dev-1x1-de-3340
JavaScript/TypeScript, freie & Premium-Kurse, Diskussionen und News zu Webentwicklung & Künstlicher Intelligenz (OpenAI, Prompt API).
Build your own community
Bring people together around your passion and get paid.
Powered by