Back to articles

From React to Svelte: A Modern Component Migration Guide

Majd Muhtaseb04/28/20257 minutes

Introduction

Migrating components from one framework to another can seem daunting, but Svelte's simplicity makes the transition from React surprisingly smooth. This guide provides a practical approach, focusing on key differences and offering concrete code examples.

Key Differences: React vs. Svelte

• Virtual DOM vs. Real DOM Updates: React relies on a Virtual DOM for updates, while Svelte compiles your code to highly optimized vanilla JavaScript that directly manipulates the DOM.
• JSX vs. HTML Templates: React uses JSX, a JavaScript syntax extension. Svelte uses standard HTML templates with minimal extensions.
• State Management: React relies on useState hooks or external libraries like Redux. Svelte uses simple variable assignments and reactive declarations.

A Basic Component Example: Button

Let's consider a simple button component in React and its Svelte equivalent.

React:

import React, { useState } from 'react';

function MyButton({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

export default MyButton;

Svelte:

<script>
  export let initialCount;
  let count = initialCount;

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

<button on:click={handleClick}>
  Clicked {count} times
</button>

Explanation:

• In React, we use useState to manage the count. In Svelte, we simply declare a count variable. The = sign becomes reactive to variable updates.
• React uses onClick and an anonymous function for the event handler. Svelte uses on:click and a named function for cleaner code.
• export let initialCount in Svelte is how you define props.

Data Binding

React typically uses event handlers to update form values. Svelte offers two-way data binding for easier form handling.

React:

import React, { useState } from 'react';

function MyInput() {
  const [name, setName] = useState('');

  return (
    <input
      type="text"
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
  );
}

export default MyInput;

Svelte:

<script>
  let name = '';
</script>

<input type="text" bind:value={name} />

Explanation:

• bind:value={name} in Svelte creates a two-way binding, automatically updating the name variable when the input changes.

Conditional Rendering

React:

function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
}

Svelte:

<script>
  export let isLoggedIn;
</script>

<div>
  {#if isLoggedIn}
    <p>Welcome back!</p>
  {:else}
    <p>Please log in.</p>
  {/if}
</div>

Explanation:

Svelte utilizes the {#if} block for conditional rendering, making the template cleaner and more readable.

Conclusion

Migrating from React to Svelte involves understanding these core differences. Svelte's focus on simplicity and performance offers a compelling alternative for modern web development. Start with smaller components and gradually migrate larger sections of your application for a smooth transition. Remember to thoroughly test after each migration.