Approaching React performance with Halogen

I’m not sure what I’m doing differently, but even with basic I don’t see any discernible lagginess or GC pausing. With 10k rows it’s not exactly snappy (and it’s horrible with profiling enabled), but I still don’t get the GC issue.

I’m not sure what you mean about state diffing… I don’t think many things do that, React certainly doesn’t. The diffing occurs when updating the DOM.

Since your list of rows is static you could avoid re-rendering the vdom for them by computing them as a value, that should reduce GC overhead, but I don’t really know if that’s the problem since I don’t know why its behaving the way you describe for you.

I’m not sure where you read that single components are recommended. There are performance benefits to using components since vdom diffing doesn’t cross component boundaries (which is an improvement over React actually). You wouldn’t make components pervasively for the smallest thing, but that’s just because it’s inconvenient. I generally use a component anywhere I have a reusable element with non trivial functionality (so, not a button, but perhaps a panel with several buttons in it), or anywhere that would make me want to reach for a lens to deal with state modifications in the absence of a component. Items in a list are a prime example of that, unless they are purely being rendered.

edit: there are indeed options for memoized rendering outside of component usage too: https://github.com/purescript-halogen/purescript-halogen/blob/v5.0.0-rc.8/src/Halogen/HTML.purs#L68-L115

2 Likes