Back to articles

From React to Svelte: A Practical Migration Guide

Majd Muhtaseb04/28/20257 minutes

Why Migrate to Svelte?

Svelte offers a component-based approach like React, but it compiles your code to highly efficient vanilla JavaScript at build time. This results in smaller bundle sizes and better runtime performance. Let's explore how to transition from React to Svelte.

1. Understanding the Fundamental Differences

React uses a virtual DOM and relies on reconciliation to update the UI. Svelte, on the other hand, is a compiler that surgically updates the DOM when your app's state changes. This eliminates the virtual DOM overhead.

React:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Svelte:

<script>
  let count = 0;

  function increment() {
    count += 1;
  }
</script>

<p>Count: {count}</p>
<button on:click={increment}>Increment</button>

Notice how Svelte uses standard JavaScript assignments (count += 1) to update the state, and the template automatically reflects the changes.

2. Component Structure

React components are JavaScript functions or classes that return JSX. Svelte components are defined in .svelte files, which combine HTML, CSS, and JavaScript logic.

3. Data Binding

React uses one-way data binding with setState to update the UI. Svelte uses reactive declarations ($:) to automatically update parts of your component when dependencies change.

Svelte Reactive Declaration:

<script>
  let count = 0;
  $: doubled = count * 2;
</script>

<p>Count: {count}</p>
<p>Doubled: {doubled}</p>
<button on:click={() => count += 1}>Increment</button>

4. Props and State

In React, props are passed down from parent components, and state is managed internally. In Svelte, props are declared using export let, and state is simply declared as variables.

Svelte Props:

<script>
  export let name;
</script>

<h1>Hello, {name}!</h1>

5. Event Handling

React uses synthetic events, while Svelte uses native DOM events. Svelte's event handling is more concise.

React:

<button onClick={handleClick}>Click Me</button>

Svelte:

<button on:click={handleClick}>Click Me</button>

6. Migrating a Simple Component

Let's migrate a simple React component to Svelte.

React:

import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

Svelte:

<script>
  export let name;
</script>

<h1>Hello, {name}!</h1>

7. Gradual Migration

It's best to migrate incrementally. Start with smaller, self-contained components. Use tools like svelte-hmr for hot module replacement during development.

Conclusion

Migrating from React to Svelte can be a rewarding experience, leading to performance improvements and a more streamlined development workflow. By understanding the key differences and adopting a gradual approach, you can successfully transition your React application to Svelte.