search

elmish / react

Elmish React extensions for writing SPA and Native apps
https://elmish.github.io/react
Other
104 stars 21 forks source link

App re-render on each state change #54

Closed MangelMaxime closed 3 years ago

MangelMaxime commented 3 years ago

Description

From F# Slack:

artemy

Hi everyone. While working on my Feliz + Elmish app I've discovered that the whole global state dependent part of the app tends to re-render on every app state change (according to React Dev Tools), even though I pass only necessary parts of the global state to some child view. For example one of the pages has a form, where its state is a part of the global Elmish state. Even one form's input change causes the whole app UI to re-render. I know I can optimize that by switching from global Elmish state to React-hooks or try Feliz.Recoil (which at first glance seems quite attractive :visage_légèrement_souriant:). But maybe there are any optimization ways even with Elmish?

Mangel Maxime

Hum, Elmish does recompute the whole view on change but React diff mechanism only update DOM part that changed.We didn't change anything in this part of Elmish since a long time. Could you perhaps make a reproduction repository and open an issue on Elmish react repository?

artemy

Ok, no problem. I'll prepare a simple example tomorrow. And during that I'll check once again whether I am not doing something wrong :)

Finally created a demo: https://github.com/ArtemyB/ElmishDemo Maybe the whole problem is in my implementation, so I will be glad to know what is wrong and how it should be done

Repro code

https://github.com/ArtemyB/ElmishDemo

MangelMaxime commented 3 years ago

The goal here is to check if we have the expected bahviour meaning only the part that changed are receiving a DOM update or is all the DOM being re-render?

MangelMaxime commented 3 years ago

Closed in favor of #55