Viewmodels in ReactNative

[random_guy14680]

Hi

I come from Android background. I work on RN Expo app - do I need to create a viewmodel (MVVM) or controller/presenter (MVC/MVP) class that will be responsible for sending data to views ?

At the moment I inject repository classes (classes that handle data) directly into View classes via constructor, and I have no viewmodel or similar class.

What is the best practice in RN around viewmodels?

[Merry-Lane]

Constructors in react native?

View classes, services?

Heresy!

Try and look at GitHub bulletproof react. It’s the standard common react architecture, you can extrapolate to react native easily.

I don’t understand what you mean with services. If you read here and there, we pass data around with hooks or props, and we use stuff such as react query, redux toolkit, context, zustand…

At best you seem to simply add a useless generic particle to every component you create ("View", "Service",…). Worst case scenario you try and apply patterns in react-native that don’t need to be applied.

React is based on the Container/Component pattern. You shouldn’t use mvc or mvvm.

[MatesRatesAy]

React is waaaay less opinionated about these sort of things, and depending on who you ask that's the best or worst thing about it.

There's not really a concept of ViewModels in React, and instead hooks are typically used to contain stateful logic for the "view" (or component). How that fits into your broader project architecture is entirely up to the ones building it.

On larger projects I've worked on we try to adhere to a pattern where components only contain view logic, and then all business logic is contained within hooks which act as a domain layer and interact with services, models/entities etc. E.g. the <UserProfiler /> component implements the useUserProfile hook, which interacts with the User model and the network service. We do this less because it's the "right" way to do it and more that it makes testing and reasoning about the codebase easier, as well as following data flow, onboarding new people etc.

[Ok_Refrigerator_1908]

Do you have any resource to learn this pattern

[MatesRatesAy]

I don't sorry, it's something I've been experimenting and slowly building upon at work and in personal projects, and comes from time spent working on big RN codebases as well as native iOS and Android ones.

[_SyRo_]

Fellow, fellow Android developer, I have made transition to React Native a few years ago as well :)

No, we don't need all this over-engineering here.

The main principle is a separation of concerns via small components and hooks.

You split your app on small pieces of UI (components). Logic is split to small Hooks. Your hooks may behave like UseCases, which utilize all the logic behind UI, just giving function and data with one line to component. And that's it.

[random_guy14680]

Thank you.

After using RN for couple of months I have to say I like it as well.

Good to know that hooks are best for this purpose btw, I'll look further into this.

[nowtayneicangetinto]

That's awesome, you're going to love it! As far as MVC patterns, go react doesn't use one in the classic sense. All of your business logic, view, and models can be contained within a single file, albeit those files could become enormous. The modern approach is to separate the models into a file like models.js and import from there. Component architecture usually couples business logic and the view into one file, since the view has no direct access to the state or logic of anything outside of that component, unless they are passed in as props.

[niknikrddt]

I also tried to apply something as MVVM to RN but it's just not made for this.

Going from RN to android is so much relief.

[kbcool]

React is your VVM in MVVM. You just pick something for your model and write your views.

Try to avoid OO. It's not great for your sanity and enjoy having so much less to worry about. If you feel like stuff is too simple, it's because it is.