DEV Community

Cover image for How To Use MVVM in React Using Hooks and TypeScript

How To Use MVVM in React Using Hooks and TypeScript

Dennis Persson on April 16, 2023

Software applications often start out simple and quickly grows big. No matter how small one try to keep it, the code somehow always grows up to be ...
Collapse
 
vladislavmurashchenko profile image
VladislavMurashchenko

Good article, good implementation of MVVM in React. But in practice you might don't need it in React in most cases.

The core idea behind MVVM is SRP principle. In React we can reach SRP by splitting components to smaller ones. For example instead of splitting Articles page by 4 layers ( Model, ViewModel, Controller, View) we can split it to CreateArticle and ArticlesList components with corresponding responsibilities. It would be simpler and better from SRP perspective.

Collapse
 
perssondennis profile image
Dennis Persson

I totally agree to this, MVVM is not necessary at all. With the component based architecture and tools like Redux and useSWR we do not need a MVVM structure.

And one can argue not to use MVVM in React. Although, lots of backend developers asks about it. The benefit I see with MVVM though is particularly with testing. Testing is many times half of the development time, and for new developers it can be a lot more than that.

The issue with testing components with a lot of mixed logic is that it requires lots of different mocks and assertions for a single component. What happens is often that developers searches through the code in hope of finding similar mocks they can reuse.

By using the MVVM setup I have described in this article, testing is a piece of cake. Each file will have just a few kind of tests that needs to be written. To learn how to test the code, developers will only have to look how it's done in an adjacent file and can quickly write the tests for all code they develop.

In the end, it's just a matter of taste. MVVM is not the mainstream React way, but with this article I wanted to show a way for how to do it :)

Collapse
 
vladislavmurashchenko profile image
VladislavMurashchenko

From my experience writing tests for components takes much effort and don't provide so much business value.

When there is a peace of complicated logic which need to be tested (for example complicated state transition) I extract it to pure function and test it easily without any mocks.

Thread Thread
 
jamesthomson profile image
James Thomson

Couldn't agree more with this. We practice it this way as well. It's so much easier to test (and refactor) when logic is extracted as pure functions.

Collapse
 
soorajsnblaze333 profile image
Sooraj (PS)

Good article,

But I would prefer to have a different kind of separation in React such as

  • having the fetch wrapper separately
  • all the http requests that use the fetch implementation separately as model functions
  • all the routes stored separately
  • UI view pages separately that would implement these model functions and the UI pages would have component chunks.
Collapse
 
perssondennis profile image
Dennis Persson

Thanks for reading! Let me know if I should post more articles like this by writing a comment or reacting with some of the reactions ❤️🦄 🔥

If you want more memes, you can find those at my Instagram page. Enjoy your day! :)

Collapse
 
carlosjs23 profile image
Carlos A. Escobar

Thanks I'm new to React but coming from backend frameworks like Laravel
where everything is well structured, I was struggling with large React components with everything included inside the view and it's a pain.

Collapse
 
perssondennis profile image
Dennis Persson

Ya, that's a very common thing, backend developers missing the structure they are used to. I often see the web as the Wild West Web since there are so many ways to implement stuff, everyone have their own way to work (at least in frontend).

Truth is though, there are lots of architectural patterns to follow though, just many of them to choose among. For React, Redux has long time served a good structure for scaling applications. With new hooks, things have changed, new structures have been needed.

I would say it works well using MVVM with React. But to backend developers, I would at least recommend trying to grasp what kinds of structures there are for React. They do work very well after all even if it doesn't look like that at a first glance :)

Collapse
 
mattbarnicle profile image
Matt Barnicle

This is a very useful article. Thanks for posting it. I've been thinking about how to implement this pattern in React to add more structure to my data components but never taken the time to look into it. I found this to be a good introductory guide. And I would appreciate more articles like this one.

Collapse
 
xenosgrilda profile image
Eduardo L.

Awesome article, thank you for taking your time to write it, I've always struggled to understand how some of those design patters could be applied to front-end applications, it was very interesting to see how you ported MVVM to React.

As someone that has worked with both React and Angular, I couldn't help but to think that, at least the View and ViewController is something that Angular does natively, it's actually their implementation of a component, maybe leaning more to the MVC side.

Thanks for the article again,

Cheers!

Collapse
 
luciamartyn profile image
Lucia Martyn

Very informative article. Thank you for sharing you knowledge. It has been a constant challenge for me to comprehend the implementation of certain design patterns in front-end applications. Therefore, it was fascinating to observe how you adapted MVVM to React.

Collapse
 
sajidhasan007 profile image
sajidhasan007

Can I get the source code of this project?

Collapse
 
perssondennis profile image
Dennis Persson

I'm sorry to say it doesn't exist. I wrote this article from scratch, by copying and modifying parts from another project. So there's no github repo for this guide.

Collapse
 
c01nd01r profile image
Stanislav

Thank you for the article!
In my opinion, when using MVVM, the separation should be more explicit. Hooks don't contribute to this.
I like how this is implemented in the React VVM library
yoskutik.github.io/react-vvm/

Collapse
 
jwilliams profile image
Jessica williams

MVVM is not a standard pattern in React, but you can implement its principles using Hooks and TypeScript. The basic idea is to separate business logic from presentation by using ViewModel components. These components handle data manipulation and state management while the View components focus on rendering the UI.

Collapse
 
valodyapapikyan profile image
v4lodya

Hi everyone,

I am seeking feedback on the code for my github.com/valodyapapikyan/publish... project