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 '25

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 '25

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 '25

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 '25

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

david duymelinck • Sep 9 '25

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 '25 • 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.

Dotallio • Jul 11 '25

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 '25

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?