React vs. Svelte: A Comparative Analysis

Introduction

• Purpose: Compare React and Svelte frameworks side-by-side.
• Goal: Understand common patterns and design choices.
• Objective: Not to declare a winner, but to inform and let developers decide based on their needs.

Courses Available

• New Courses: Full SvelteKit course and Next.js 13 course on Fireship Pro.

Rendering Mechanisms

• Common Goal: Help developers build reactive UIs with JavaScript by organizing code into reusable components.
• End User: Cannot distinguish between React and Svelte.
• Developer Experience: Significant differences.

React.js

• Virtual DOM: Tracks data changes; renders them in the actual DOM.
• Runtime: Requires initial JavaScript. Example: Next.js has a ~70kb baseline for “Hello World”.

Svelte

• Compiler Approach: Eliminates need for runtime by converting Svelte code into vanilla JavaScript.
• Efficient: Smaller hello world size.
• Use of Non-JavaScript Code: Allows for more efficiency but seen as 'black magic' by JavaScript purists.

Component State

React

• Creating Components: Use functions.
• Reactive State: useState hook for state value and setter function.

Svelte

• Single Component File: Define logic in script tags.
• Reactive State: Use let keyword to create a reactive state.

Props

React

• Passing Props: Define as function arguments and typically destructure them.

Svelte

• Passing Props: Use export keyword in front of the variable.
• Props Handling: Similar in both; more syntactic sugar in Svelte.
• Limitations: Cannot pass components as props in Svelte.

Children

React

• Using Props: Direct rendering in JSX, use props.children.

Svelte

• Slots: Default slot for props.children, named slots for specific points in markup.

Component Initialization

React

• Use Effect Hook: Callback function and empty array to signify no dependent data.

Svelte

• OnMount Function: More readable and handles async functions directly.

Side Effects and Computed State

React

• Use Effect Hook for Side Effects: Update document title based on dependencies array.
• Computed State: Use useMemo hook for expensive computations.

Svelte

• Reactive Declarations: Update code automatically based on dependencies, more concise and reliable.
• Computed State: Similar reactive declarations, no need for useMemo.

Templating and Conditional Logic

React

• JSX: HTML in JavaScript.
• Conditional Logic: Ternary operators, function components.

Svelte

• Templating: JavaScript in HTML, if statements directly in HTML.
• Conditional Logic: More readable, traditional if-else statements.

Loops

React

• Map Function: Array mapping, requires key prop.

Svelte

• Each Block: Loop over data, template variable for each item.
• Key Loop: Parentheses with key value inside each block.

Shared State

React

• External Libraries: e.g., MobX, Redux, Jotai for state management.
• Jotai Usage: Create atom for shared value, access with useAtom hook.

Svelte

• Built-in Stores: Writable store similar to observables, subscribe in templates and JavaScript with $ sign.
• Advantages: Less boilerplate, automatic unsubscribe.

Async Data

React

• Experimental Use Hook: Await promise, show loading state with Suspense, handle errors with error boundaries.

Svelte

• Unwrap Promises: Directly in templates with await, simple loading and error handling.

Conclusion

• Further Learning: Full stack comparisons and courses available for Fireship Pro members.
• Promotions: Last day for a discount on membership.
• Acknowledgement: Thanks to supporters.