Best way to handle complex state in halogen

Help
#1

So I found myself unable to handle complex state situations nicely in halogen. Say I have an Editor component which has multiple children which need to read and/or modify parts of the state of that parent component. Some of the chdildren have some more nested stuff which also needs parts of the state… I found myself having a super messy set of queries, outputs and actions which do stuff like syncing parts of the state or notifying components some state changed, and even with this I still have some unnecessary rerenders…
What are your strategies for handling problems like these where you have lots of components all needing to share state with other components?

Note: the state isnt global so I can’t just use the reader monad with an aff bus or something

2 Likes
#2

Reposting quote without code block to make this question more legible for others.

This might be easier to troubleshoot with code from a small example app that demonstrates this issue.
My only advice is to see if some of the children can be replaced with render functions where the state now lives in the parent.

#3

OH, I wrapped it in a code block by accident…
:man_facepalming:
Sorry…

Thanks for doing that for me:)

#4

Also, thanks for the tip, I’m already using plain render functions for some stuff, I’ll try using them more in the future!

A little bit off-topic: this is my favorite react state lib. Since halogen has hooks now, is there any way to achive something similar to that?

#5

It sounds like maybe you’ve broken things into components that don’t need to be? The sub-components that want to pass state back up to/receive state from their parent - do they have any additional state that would be awkward to manage in the parent? If not, I’d start collapsing back into the main component.

#6

Yes, you’re right, I split it into way too many pieces… I will try merging them into 1 together and see how it works:)

Question: does having giant components like that have any impact on performance? The smallest components I had were some draggable boxes and the drag and drop was super laggy. Like, I know svg is slower than canvas but sometimes I had like 2 renders per second or something, so I just told myself I’ll oltimize it later. Will merging those components slow it down or speed it up?

#7

Giant components shouldn’t be a problem as long as you avoid unnecessary re-rendering with techniques such as HH.lazy. There are lots of tips in the Halogen Performance thread.

#8

Which version of Halogen are you using?

1 Like
#9

I’m using version 5 atm:)