Incremental Migration:
React → Svelte 5

A Practical Guide from Production Experience

Scan for slides

Hello! 👋

I'm David

🎯 Product Manager at dipp

🛠️ Engineering Lead for the past 2 years

🌟 Contributing to esbuild, vite and Svelte ecosystem since 2021

📦 Authored esbuild-plugin-pino which has 70k weekly downloads on npm

Svelte Summit 2025

Why Consider Migration?

80% JavaScript codebase (no tests)
Performance bottleneck in graphic editor
Months of optimization yielded limited gains

⚠️ Complete rewrites are not an option. We need incremental approach.

Mental Model Shift

React

Svelte

The Business Conversation

❌ Traditional Approach

"6 month rewrite"

"Stop all features"

"Big bang release"

✅ Our Approach

"Ship incrementally"

"Measure each step"

"Prove value and gain confidence"

Migration Strategy

Component

→

Page

→

App

Start Small, Think Big

Test with isolated components
Prove technical feasibility
Build team confidence
Demonstrate business value

Measurable Results

-23%

Bundle Size

-50%

Dev Time

+28%

Lighthouse Score

Focus on user-facing metrics, not just technical ones

useSvelte Hook

                        // 1. Create wrapper hook
export default function useSvelte(Component: Component) {
  const svelteRef = useRef(null);
  
  return (props: Props) => {
    useLayoutEffect(() => {
      mount(Component, {
        target: svelteRef.current,
        props,
      });
    }, []);
    
    return 
;
  };
}

// 2. Use memo() to prevent unnecessary remounts

export default memo(function MyComponent(props) {
  const SvelteComponent = useSvelte(Component);
  return ;
});
                

use-react.svelte Component

                    <script lang="ts">
  import { onMount } from "svelte";
  import { createRoot } from "react-dom/client";
  import React from "react";
  
  let { component, ...reactProps } = $props();
  let container = $state<HTMLDivElement>();
  let root = $state<ReturnType<typeof createRoot>>();
  
  onMount(() => {
    if (container) {
      root = createRoot(container);
      root.render(React.createElement(component, reactProps));
    }
    
    return () => root?.unmount();
  });
</script>
                

Real Challenges

Ecosystem maturity - Libraries catching up
Mental model shift - From re-renders to reactivity
Team learning curve - Unlearning React patterns
Best practices - Creating as we go

💡 These are temporary growing pains, not blockers

Key Takeaways

Start with low-risk components
Measure everything - Bundle, performance, DX
Communicate business value not tech details
Give team time to adapt - It's a paradigm shift
Focus on incremental wins not perfection

Connect & Code

Scan for code examples & documentation

Questions?

Let's discuss your migration challenges

Remember: Technology migrations don't have to be all-or-nothing

Incremental Migration:React → Svelte 5