Sources

(1, 2, 3) Like most frameworks that abstract the DOM, Svelte has incompatibilities like the inability to name a prop `class` because it’s a reserved keyword in JS, and you’ll use `on:click` not `onclick`, but these quirks are few in number and reflect carefully chosen tradeoffs. … Concurrent mode applies additional restrictions that developers are learning to work with, which the React team confidently trades for the benefits. The tradeoffs are complex, context-dependent, and nuanced. React may provide amazing UX in some circumstances once concurrent mode is ready, but I’m skeptical that their solution is the best one for our problems. … Svelte’s upsides are compelling to our team, but we also need to understand its downsides. First we’ll discuss the negatives that are unlikely to change. The compiler architecture moves complexity from the runtime and source code to buildtime and tools. Behind Svelte’s simple APIs sits a beefy compiler. Frontend web development has become very tool heavy in the webapp era, so in practice this adds little cost beyond what developers like myself already pay, but increased build complexity is important to acknowledge. For example Vue’s Evan You has stated that Vue should always be droppable into any webpage for immediate development. Many people like and rely on this ability. It keeps things simple. Svelte can do this but only by including its compiler in the browser, which currently weighs 870k. This is super useful in some circumstances, like Svelte’s REPL, but it’s not a viable option for normal application code. Svelte requires a build step that’s heavier than React’s JSX and Vue’s `.vue` files. Svelte is its own language not plain HTML+CSS+JS, increasing the risks of adoption, … Svelte may never be able to implement the equivalent of React’s concurrent mode. This could be a big deal and it’s probably the weakest part of my recommendation to my team. See the discussion above for more about concurrent mode. Rich Harris intends to implement an equivalent to React’s suspense, so it appears React’s advantage there is temporary. Svelte has a history of surprising innovations but we shouldn’t count on this one. … Svelte’s userland resources and cultural knowledge like patterns, anti-patterns, best practices, and consensus libraries are sparse and under-developed. People who adopt it today will have to think through problems where other communities have common knowledge solutions, making the learning curve temporarily steeper. Svelte’s beginner documentation is great but people are still figuring out what mastery looks like. … Svelte is known for its tantalizingly small JavaScript bundles, and compiler improvements sometimes shrink the output even more for free, but there’s a problem here. With its current compiler, as more components are added to a single bundle, Svelte’s JS size advantage shrinks and eventually reverses, because Svelte templates are compiled to a form that is more verbose than the source.

### What’s the downside? - **IDE support** is not yet comparable to the commonly-used frameworks. It still has a lot of room for improvement. Although there are some good resources online to solve some of the issues, it can be considered as a major disadvantage as of today. - **Not many Svelte dev tools** exist at the moment. It is still a young and growing ecosystem. Keep that in mind. However, that’s a great opportunity to develop some for the Svelte community.

useEffect(() => { a += 1; }, [b]); ... https://github.com/sveltejs/svelte/issues/6730 https://github.com/sveltejs/svelte/issues/6732 So basically, reactive blocks are only allowed to run once per tick; if a dependency changes after a block has run, too bad, the block won't run again. That is really shocking to me. (I won't say more due to my inexperience with Svelte...) danielvaughn on Sept 9, 2022 ... What Svelte is doing is simply covering up the flaws in your code by short circuiting an infinite loop scenario which has been coded into your app. This will have unexpected side effects, however. … Great frameworks don't trap developers in local maxima. ... A couple years ago, that feature used to work similar as useEffect, so I got used to use it for transitions, and now is biting my ass because the Svelte team are breaking my transition use-cases … BigJono on Sept 9, 2022 I think the dev community does really poorly with these kinds of abstractions that are very simple but completely unintuitive. I place a lot of the blame on the React team too. When hooks came out, their docs were absolutely terrible. They probably still are. They were full of shitty editorialising like "we created hooks because we found classes were too difficult for people to understand!", which made every dev I worked with feel insecure for not immediately knowing how to write super awesome clean code.

However, I have frustration with Svelte. **THE DISADVANTAGES WITH USING SVELTE** 1.) **SMALL UNHELPFUL COMMUNITY** When I wanted to learn Svelte, what I was presented with, is that the Svelte Community is small. In the long run, what I found out, is that the issue with the Svelte Community isn't about being small. It is about the truth that the Svelte Community isn't very helpful and supportive to newbies and beginners: -- they don't share code snippets. -- they don't take out time to help you look at your problem to support you in fixing it. -- they are not willing to properly guide you. -- and they many times behave very hostile. … 2.) **EASY BEGINNER FRIENDLY DOCUMENTATION** New adopters and beginners are the people that will use Svelte and SvelteKit. Senior developers are already hooked to React, Angular and Vue. So it is an error of judgement for Svelte to say that its documentation is not for beginners. Svelte should re-align its philosophy, and make itself "*the JavaScript User Interface and State Management framework for beginners and dummies*".

## Identifying Performance Bottlenecks in Svelte Apps Utilize the built-in tools for monitoring and profiling applications. The Svelte DevTools extension offers insights into component rendering times and state updates, enabling developers to pinpoint slow components effectively. Examine the frequency and duration of re-renders, which can lead to sluggish performance. … **Reduce bundle sizes:**Implement code splitting to ensure that only necessary code is loaded initially. Research shows that applications that employ code splitting can achieve up to 40% reduced bundle sizes. **Profiling and monitoring:**Utilize tools like the Svelte Devtools or browsers’ built-in performance profiling to identify bottlenecks. Regular profiling can reveal significant performance issues, with some applications improving load times by over 50% after adjustments. … **Avoid blocking tasks:**Optimize for asynchronous operations. Data fetching, especially in loops, can block the rendering process. Switching to asynchronous routes can lead to smoother experiences. Understand derived state and avoid unnecessary computed properties when simple reactive statements suffice. Overhead from excessive computed properties can degrade performance by around 25% during complex renders. … Limit the use of reactive statements within loops or large datasets, as this can create a cascade effect of updates. Instead, aim to compute values before entering the reactive context, preserving resources and rendering speed. Monitor performance using Svelte’s built-in debugging tools to identify where excessive reactivity occurs. Profiling CPU usage and re-render counts allow developers to pinpoint inefficiencies and tune their reactive logic accordingly. Awareness of how many times portions of your UI update can guide you in structuring your state management effectively. … One problem I see a lot is not utilizing stores in Svelte. Stores are great for managing shared state and can help reduce reactivity in components. Plus, they make it easier to communicate between components. Absolutely! Another issue I've encountered is not properly handling component lifecycle events. It's important to unsubscribe from stores or clean up any side effects in onDestroy to avoid memory leaks. … One approach is to lazy load data or use virtual lists to only render the items that are in view. This can significantly improve performance when dealing with large datasets. Yo, one common issue I've run into with Svelte applications is performance bottlenecks. It's important to keep an eye out for unnecessary re-renders and optimize your code to minimize unnecessary updates. I totally agree with that, @dev One solution to this is using the built-in Svelte `shouldUpdate` lifecycle method to control when a component should re-render. This can help prevent unnecessary re-renders and boost performance. Yeah, but sometimes it's not just the components causing performance issues. Another common problem is inefficient use of stores. Make sure to leverage reactive statements and only update the parts of the store that need to be updated to avoid unnecessary re-renders. … I've also encountered issues with suboptimal CSS styles affecting the performance of Svelte applications. Make sure to optimize your CSS by using scoped styles and avoiding unnecessary nesting to keep your stylesheets lean and efficient. @styleGuru That's a great point! Another common mistake developers make is not properly handling asynchronous operations in Svelte. Make sure to use async/await syntax or promises to handle async data fetching and updates to prevent blocking the main thread and optimize performance. … Hey fellow devs! I've been diving into optimizing Svelte apps lately and wanted to share some best practices I've found. One common issue I've seen is inefficient reactivity causing unnecessary re-renders. One solution is to use the onMount lifecycle hook to fetch data only once when the component is mounted. Must be vigilant with reactivity to ensure only necessary parts of the tree are re-rendered.<code> // Example of using onMount hook import { onMount } from 'svelte'; onMount(() => { fetchData(); }); </code> Another issue is over-fetching data, which can slow down your app. … While they're great for managing shared state, having too many can lead to a mess of interconnected dependencies. Consider consolidating related state into a single store or using context instead for more granular control. Speaking of control, remember to use the each block for iterating over lists instead of relying on raw JavaScript loops. This allows Svelte to optimize the rendering process and handle updates more efficiently. Also, keep an eye out for unnecessary reactivity in your components – sometimes less is more! How do you ensure proper memoization in your Svelte components? Any tips for avoiding global store sprawl? … /LazyComponent.svelte'); }); </code> Another common pitfall is excessive prop drilling, where props are passed down multiple levels of nested components. This can make your code harder to maintain and lead to unnecessary re-renders. Instead, use context to pass down global state or consider restructuring your components to reduce prop drilling.

> which means its server-first model leads you to slow feeling websites, or lots of glue code to compensate Again, I don't think this is true - what makes you say it's slow feeling? Personally, I feel it's the opposite. My websites (and apps) are faster than before, with less code. Because server component data fetching solves the waterfall problem and co-locating data retrieval closer to your APIs or data stores means faster round-trips. And for slower fetches, you can use suspense and serialize promises over the wire to prefetch. Then unwrapping those promises on the client, showing loading states in the meantime as jsx and data stream from the server. ... You say it's worse UX but that does not ring true to my experience, nor does it really make sense as RSCs are additive, not prescriptive. The DX has some downsides because it requires a more complex model to understand and adds overhead to bundling and development, but it gives you back DX gains as well. It does not lead to worse UX unless you explicitly hold it wrong (true of any web technology). … State management is also another issue - considering React has had a compiler due to jsx since the outset, not using that since the beginning to do a little data flow analysis and figure out which piece of state affects what UI elements is just criminal - an further exacerbates the waste in other parts of framework, by running already wasteful code more often than it needs to. … Templating is more of a bother: Either you use JSX, which in most cases is not XML, but instead DOM, subtle but a pain, additionally requires a compilation step before you can run the code, and also requires a DOM or DOM-lite library. Or you do chained calls with an ending call, e.g. https://sonnet.js.org/, or you do something like lit-html which is quite practical. … Even if I could ignore that, for my super tiny hobby project that I tried Kit with, the routing ended up being strewn across a million folders and files that are called +page nested in (page) folders, and a super tiny app turned into a nightmare to navigate and find things in. I didn't even use any of the stupid SSR stuff, just SPA mode, I can't even imagine what it ends up looking like with +layout and all the server-side files … The main issue I had with Svelte was building real full-stack applications, where Sveltekit itself certainly felt behind its peers, but that's unrelated to runes/signals. It's certainly not a rare viewpoint, just click on any link about "svelte runes" to see people upset. - https://www.reddit.com/r/sveltejs/comments/1crpj0r/svelte_5_...I am deeply, deeply disappointed in the field. It simultaneously has an extremely high rate of churn and an extremely low rate of actual innovation. After observing the discipline for nearly two decades, I am concluding that almost all the "progress" really starts to look like we're just rearranging the furniture endlessly without substantive improvements in developer velocity or end user experience.

## When Not to Use Svelte - Heavy reliance on React- or Vue-only libraries - Teams needing large hiring pools - Content-heavy sites with minimal interactivity - Projects benefiting from islands architecture (Astro) - Apps requiring instant-resume performance (Qwik) - Preference for fine-grained reactivity + big ecosystem (Solid / SolidStart) If your application relies heavily on niche React- or Vue-only libraries that can’t be replaced, switching to a compiler-first framework may introduce more overhead than it removes. In those cases, staying within the larger ecosystems usually makes integration work easier. Hiring can also be a factor. Some companies prefer frameworks with broad talent pools, especially for fast-growing teams. While Svelte adoption is rising, React and Vue still dominate when it comes to available developers.

##### Real-world Impact: You might find yourself spending more time than expected understanding why your component isn’t updating as you think it should, or struggling with the nuances of Svelte’s reactivity system in complex scenarios. For example, you might write a component that seems logically correct, but doesn’t update as expected because you’ve missed a subtle reactivity trigger. Or you might struggle with managing shared state across multiple components, as Svelte’s built-in store mechanism works differently from state management solutions in other frameworks. These challenges can lead to increased development time, especially in the early stages of a project or when onboarding new team members. It may also result in bugs that are harder to track down, as the root cause might be hidden in the way Svelte’s reactivity system interprets your code. However, it’s worth noting that once these concepts click, many developers find Svelte’s approach more intuitive and less boilerplate-heavy than other frameworks. … ##### The Challenge: While Svelte’s ecosystem is growing, it’s still considerably smaller than those of React, Vue, or Angular. This means fewer third-party components, utilities, and tools to choose from. For example, while React has countless UI component libraries like Material-UI, Ant Design, or Chakra UI, Svelte’s options are more limited. You might find yourself needing to build custom components from scratch more often. … ##### Real-world Impact: You might need to build custom solutions for problems that have ready-made solutions in other frameworks. This can slow down development, especially for larger projects with diverse requirements. For instance, if you’re building a complex form with advanced validation and dynamic fields, you might find yourself writing much of this functionality from scratch in Svelte, whereas in React you could leverage popular libraries like Formik or React Hook Form. … ##### Real-world Impact: You might find yourself writing more type assertions or struggling with IDE support for TypeScript in Svelte files. This can lead to a less fluid development experience and potentially more runtime errors. For example, you might not get as robust type checking for your component props as you would in a React component, leading to potential bugs that could have been caught at compile-time. … ##### The Challenge: Svelte’s compile-time approach means that each component generates its own runtime code. In applications with a very large number of small components, this can lead to larger bundle sizes compared to runtime-based frameworks. This is because each component includes its own minimal runtime, which can add up in large applications. Additionally, Svelte’s reactivity system, while efficient for most use cases, can sometimes lead to unnecessary updates in complex scenarios. If not carefully managed, this can result in performance bottlenecks, especially in applications with complex state management needs. … ##### The Challenge: Advanced development tools, debugging utilities, and testing frameworks aren’t as mature or numerous for Svelte as they are for React or Vue. This includes things like developer tools extensions for browsers, advanced state management solutions, or specialized testing utilities. For example, while React has the powerful React DevTools browser extension, Svelte’s equivalent is less feature-rich. Similarly, while Vue has the Vuex state management library deeply integrated into its ecosystem, Svelte’s built-in stores, while powerful, might feel limited for very complex state management needs. ##### Real-world Impact: You might find yourself missing certain developer tools you’re accustomed to, or spending more time setting up testing and debugging environments. For instance, debugging reactivity issues or component updates might require more manual work, like adding console logs, compared to using specialized tools in React or Vue. Testing can also be more challenging. While there are testing libraries available for Svelte, they might not be as feature-rich or well-documented as something like React Testing Library. You might need to spend more time setting up your testing environment or writing custom testing utilities. … ##### The Challenge: Finding solutions to specific problems or edge cases can sometimes be more difficult due to the smaller pool of developers and fewer resources available online. This is particularly noticeable when you’re dealing with advanced use cases or integrating Svelte with other technologies. For example, if you’re trying to integrate Svelte with a specific backend technology or a niche API, you might find fewer tutorials, blog posts, or Stack Overflow answers compared to what you’d find for React or Angular. This can make problem-solving more time-consuming, especially for less common use cases. ##### Real-world Impact: You might spend more time troubleshooting issues or seeking answers to Svelte-specific questions, especially for more advanced use cases. This can slow down development, particularly when you’re pushing the boundaries of what’s typically done with Svelte. Additionally, the smaller community can impact the availability of learning resources. While there are excellent official docs and tutorials for Svelte, the breadth of third-party courses, books, and video tutorials is not as extensive as for more established frameworks. This can make it more challenging to find resources that match your specific learning style or that cover advanced topics in depth.

### Lack of Community Support One of the biggest challenges faced by Svelte developers is the lack of a large community compared to other popular frameworks like React or Angular. This can make it difficult to find resources, libraries, and solutions to common problems faced during development. Without a strong community to rely on, developers may find themselves spending more time troubleshooting issues on their own. … ### Learning Curve Another common challenge faced by Svelte developers is the learning curve associated with the framework. Svelte has a unique syntax and approach to building web applications, which may be unfamiliar to developers who are used to working with other frameworks. This can make it challenging for developers to quickly adapt to Svelte and start building projects efficiently. … ### Tooling and Integrations Developers using Svelte may also face challenges related to tooling and integrations with other technologies. Since Svelte is a relatively new framework, there may be limited support for popular tools and libraries that developers commonly use in their projects. This can make it difficult to set up development environments, integrate third-party services, and optimize workflows for efficient project delivery. … ### Performance Optimization Performance optimization is another common challenge faced by Svelte developers, especially when building complex web applications with dynamic user interfaces. Since Svelte compiles components at build time, developers need to carefully manage the size and complexity of their components to ensure fast rendering and smooth user experience. Without proper optimization, developers may encounter performance issues such as slow loading times, janky animations, and high resource usage. … While Svelte offers a lightweight and efficient framework for building web applications, developers may encounter common challenges such as lack of community support, learning curve, tooling and integrations, and performance optimization. By actively engaging with the Svelte community, investing in learning resources, exploring available tools and integrations, and optimizing performance, developers can overcome these challenges and unlock the full potential of Svelte for their projects. ... One of the main challenges that Svelte developers face is the limited availability of libraries and plugins compared to more established frameworks like React or Angular. While these frameworks have a vast ecosystem of third-party libraries and plugins that can be easily integrated into projects, Svelte's ecosystem is still relatively small. This can make it difficult for developers to find solutions to common problems or to add advanced features to their applications. … ### Performance Optimization Svelte is well-known for its performance optimization capabilities, thanks to its unique approach to compiling components in a highly efficient way. However, achieving optimal performance can still be a challenge for developers, especially when working on complex applications with multiple components and data flows. To address this challenge, developers need to familiarize themselves with Svelte's reactivity system and understand how it impacts performance. By optimizing component re-renders, minimizing unnecessary updates, and lazy-loading resources, developers can ensure that their Svelte applications run smoothly and efficiently. ... ### Learning Curve Another common challenge for developers transitioning to Svelte is the learning curve associated with this new framework. While Svelte's syntax is relatively easy to learn compared to other frameworks, its reactive programming model and compiler-based approach can be unfamiliar to developers coming from a different background. … ### Steep Learning Curve One of the common challenges faced by Svelte developers, particularly beginners, is the steep learning curve associated with the framework. Unlike more traditional frameworks like React or Angular, Svelte has a unique approach to building web applications that may take some time to grasp. Developers who are used to working with other frameworks may find it challenging to transition to Svelte and understand its concepts such as reactive declarations, stores, and transitions. … ### Lack of Resources and Community Support Another challenge that Svelte developers may face is the lack of resources and community support compared to more established frameworks like React or Angular. Since Svelte is a relatively new framework, developers may find it difficult to find tutorials, documentation, and answers to their questions when working with the framework. However, the Svelte community is growing rapidly, and more resources are becoming available to help developers learn and use the framework effectively. There are now online courses, forums, and blog posts dedicated to Svelte development, making it easier for developers to find the information they need to overcome challenges and build successful projects with Svelte. ### Debugging and Tooling Debugging and tooling can also pose challenges for Svelte developers, especially those who are used to the rich development tools available for frameworks like React and Angular. While Svelte's compiler is fast and efficient, it may not offer the same level of debugging capabilities as other frameworks, making it harder for developers to identify and fix issues in their code.

### 1) IDE Our IDEs, which we use, have stopped responding efficiently. It takes about a minute for Svelte LSP to initialize. Our laptops are overheating badly. Autocomplete works very slowly or doesn’t work at all. This affects both the autocomplete in component markup, such as props, and in script tags, where autocomplete has become very unresponsive. For some colleagues, Svelte LSP even stops working because it runs out of RAM. This issue affects VS Code, WebStorm, Nvim, and Zed. … I understand that the issue might not be entirely with Svelte LSP or Svelte itself, but could be rooted elsewhere, such as the fact that the entire JavaScript tooling ecosystem is written in JavaScript and runs on single-threaded Node.js. However, I wanted to highlight that in large projects, the IDE becomes extremely unresponsive, and it would be great if the team supporting the Svelte ecosystem was aware of this. ### 2) Build speed Building the application for production takes 10 minutes, and Svelte-check takes an additional 10 minutes. This is quite slow, and it's hard to find a workaround. Neither esbuild, swc, nor rspack currently have good support for Svelte. As projects grow and evolve, this build time is likely to increase. ### 3) Responsiveness of the development server The cold start for `npm run dev` (Vite) takes 1:30 minutes, while the hot restart takes 1 minute. This is also quite slow, especially when you need to restart the server after changing the configuration. Along with the IDE, my MacBook Pro starts to struggle. … This can lead to discrepancies between server behavior during development and production, which has repeatedly caused bugs. We managed to work around this issue similarly to how SvelteKit handles the dev mode for Vite (SvelteKit Vite dev mode code). However, I dislike such workarounds and would prefer having an API for server customization in both dev and production modes. … ### 5) Runtime perfomance I appreciate that SvelteKit allows you to write API endpoints out of the box (SvelteKit server routes). However, as experience has shown, this approach isn't always the most performant. For a load of 11k RPS, it required around 200 pods just to proxy requests to other backends and render HTML. This is a significant amount of resources for relatively simple tasks. As a result, we decided that the best approach would be to write endpoints directly on the Node.js server, bypassing SvelteKit. ### 6) UI kit Our UI kit isn't the largest, but it contains many icons (about 2,000). Svelte doesn’t currently support compiling libraries to publish as pre-built JavaScript, which means these components are recompiled every time. I’m not sure what can be done about this, but it seems like unnecessary overhead. … Since client-side load functions (`+page.js`) started serializing responses, it has become impossible to mock them effectively. Additionally, SSR in SvelteKit can lead to flaky tests. For example, a Playwright selector might click a button before hydration is complete, causing the test to fail because the event handler hasn’t been attached yet. … Don't have much to say here...there's probably a bit of overhead because those could be generic endpoints while you can write more performant specific endpoints directly in node but i think this is definitely something we should look into. ... To be honest, we can't move to svelte 5 at the moment, the code base is too big. Also, in this case, we would have to freeze development, which we can't afford. But in our microfrontends, into which we are sawing our monolith, there are no problems with Svelte 5 yet … Right now the app’s **dependency graph**, build pipeline, and integration points are carrying *more* load than they were designed for. That's why you see slow LSPs, long builds, dev‑server lag, flaky SSR tests, and even uneven runtime performance. They’re all different faces of the same issue: **the system can’t scale cleanly with its current structure**. … Fix the architecture, and you remove entire **classes** of problems at once — instead of whack‑a‑moling them forever! P.S.: Most of the pain points—IDE lag, build times, testing wrinkles, icon recompilation, and microfrontend hacks—originate in the **broader** JavaScript/TypeScript ecosystem or community plugins.

You've optimized hooks, lazy loaded everything, but the Virtual DOM's still whispering "re render me" in the background, guzzling battery like it's 2018. ... Before code, the why: Most frameworks (React, Vue) use a Virtual DOM to diff changes at runtime efficient, but it adds overhead. Every update? Compare trees, patch the real DOM. ... Svelte compiles your components to imperative JS at build time, surgically updating only what's changed. … **Traps for the Unwary: Svelte Gotchas** Svelte's simple, but pitfalls lurk: 1. **Immutability Mandate: **Mutate array in-place? No reactivity. Always reassign (arr = [...arr]). 2. **Store Gotchas:** Forgetting $ prefix reads snapshot—use $store for live. 3. **SSR Mismatches:** Client-only APIs in script? Guard with browser from $app/environment. 4. **Ecosystem Gaps:** Fewer libs than React—adapt with svelte:html for raw DOM.

• Svelte: Usage increased slightly to 27% (up from 26%). It maintains the highest interest rating for the sixth consecutive year, though interest is slightly declining—a trend seen across most frameworks. Satisfaction remains high at number two (86%), just behind Solid. ... The hosts discuss the complexity of React Server Components (RSC) and the risks of framework developers losing touch with practical usage ("dogfooding").