Svelte vs React: Core Feature Comparison

This article compares React and Svelte, two reactive UI frameworks, through various practical examples. React uses a Virtual DOM and requires a runtime, leading to larger code sizes compared to Svelte. Svelte compiles code during the build process, resulting in smaller bundles and no need for a runtime. React uses useState for state management, while Svelte uses `let` declarations for reactive variables. React passes properties as function parameters, whereas Svelte uses the `export` keyword. React uses `props.children` for child components, while Svelte employs slots. Lifecycle methods are simulated with useEffect in React but are directly imported in Svelte. Side effects are managed with useEffect in React, requiring explicit dependency declaration, while Svelte uses the `$` symbol for reactive expressions. React employs useMemo for computed properties, whereas Svelte leverages the `$` expression. React uses ternary expressions for conditional rendering, while Svelte uses a template-like syntax. Finally, React uses createContext and useContext for global state management, whereas Svelte uses writable stores with a more concise syntax.