DEV Community

Single-File Components in React: Genius or Garbage?

Samir Tahiri on July 11, 2025

Let’s start a fight (respectfully) 🥊 Recently, I came across a few React projects where the entire component was written in one file — logic, st...

Read full post

david duymelinck • Jul 11

Not a React dev. As I see it, a single file component in Vue or Svelte is closer to a web component.

Vue example

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

Here the separation between markup and logic is more visible.
In React it is a function with logic and markup.

Ivan Jeremic • Jul 14

That's not how web-component definition looks like. Read on MDN on how to create and define custom elements and you will see.

david duymelinck • Jul 14

I mentioned it is closer, not that it is a web-component definition. I added the link to MDN, that would be stupid if i didn't read it first.

Ivan Jeremic • Sep 9

not even closer, makes no sense. A web-component is defined by doing. class MyComp extends HTMLElement

david duymelinck • Sep 9

From MDM:

<template id="custom-paragraph">
  <style>
    p {
      color: white;
      background-color: #666666;
      padding: 5px;
    }
  </style>
  <p>My paragraph</p>
</template>

Doesn't that look a lot like a Vue or Svelte component?

Ivan Jeremic • Sep 12 • Edited

That is not a web-component. Your link just shows an example of how the template tag can be used with web-components but this is not a web-component.

david duymelinck • Sep 12 • Edited

If a template is used by a web component, how is that not web component syntax?

What you think a web component is, class MyComp extends HTMLElement, is a custom element. This also can be created by using <my-comp></my-comp>, .
Web component is not a strict definition. It is a set of features in HTML, CSS and javascript that work together. And HTML is the most import part because it is the base.

This is a declarative web component.

<my-comp>
 <template>
  <style>
    p {
      color: white;
      background-color: #666666;
      padding: 5px;
    }
  </style>
  <p>My paragraph</p>
</template>
</my-comp>

Javascript is not a requirement.

Samir Tahiri • Jul 12

Thanks David, great point!
You're right – Vue and Svelte with SFCs definitely highlight that clear separation of markup and logic. In React, the JSX + hooks combo can feel more “blended” since everything lives in one function. That’s exactly what I was touching on in the post – how different frameworks structure and think about components.

Both approaches have pros depending on the mindset and team habits. Appreciate the Vue example!

Dotallio • Jul 11

I've tried SFCs for quick MVPs and they do speed me up, but I always end up splitting things out as the project grows. Have you found a sweet spot where SFCs still work for big apps?

Samir Tahiri • Jul 12

Totally relate. SFCs are great for fast iteration and MVPs, but yeah — as the app grows, keeping everything in one file can feel cramped. I’ve found that the sweet spot is using SFCs for atomic components or isolated logic/UI pieces, and gradually splitting concerns (like store, styles, or templates) only when complexity demands it.

So basically: start simple, scale structure as needed. You?