DEV Community

Discussion on: Separation of concerns with custom React hooks

joesky profile image

Thank you for your reply, I will also read your Vue post. Seriously, I've also consider of the custom hooks idea for the main points of this post.

My situation here is that most projects use React, and I am also a loyal React user. Vue3 is very good now, but JSX/TSX support is not as rich as react ecosystem. For example, there is no stable CSS-in-JS solution(e.g. styled-components、Emotion) for Vue3.

The React SFC inspiration is actually to solve my pain points in the development, I haven't promoted it yet and I'm not sure how many people will agree with it. Separation of concerns is really just a way, but it is very successful in Vue. In the React environment I want to combine the separation of concerns with the existing TSX/eslint/CSS-in-JS ecosystem in a new cohesive way, and no string template is required.

If you take a closer look, you will find that I am not completely imitating Vue's SFC. Of course, different people have different needs, so their understanding will be different, it's perfectly normal.

Thread Thread
areknawo profile image
Arek Nawo Author

I did take a look at your library. The API seems interesting, though I can imagine your potential users would really have to know what they're after in terms of structuring their code.
As for Vue 3 - you're right that the ecosystem is lacking. I get around that in my projects as I recently stopped using CSS-in-JS in favor of Tailwind. And although there are a few pain-points, it's a fairly good solution. But I acknowledge that React ecosystem has better tooling available even for Tailwind, which you can in this blog post (another plug 😅):