Setting and deleting custom properties

[coot]

Checkout the gist.

This allows to set custom properties on ReactThis within componentWillMount and required to delete them in componentWillUnmount (no memory leaks).

Beyond basic react components setting callbacks on ReactThis is necessary. For example if you want to create a debounced event callback where you need to access to ReactThis you will need to create it in componentWillMount.

I think this approach can be extended to refs (where the render method would be allowed to change the type of This.

We could allow the resulting type of this in componentWillUnmount to be a subrow of what componentWillMount returns. Just the Subrow class from purescript-records fails to recognize that () is a subrow of any non empty row. Maybe that's an actual bug in Union type class.

[coot]

I think I found a pretty nice solution using idexed monads to track changed of properties that are added / removed from ReactThis. For now I put it in a separate repo. Now it's just a proof of concept. There are some example in the test file that compile.

[ethul]

Thanks for putting this together. I will dig into this soon. I see the appeal of being able to attach properties to this. You mentioned debounce as an example. I've had to use state in a wrapper component in the past. It would be convenient to do this as you propose. I wonder if we should consider this for storing element refs. Do we need both constructs?

…

On Fri, Jul 21, 2017 at 16:48 Coot ***@***.***> wrote: I think I found a pretty nice solution using idexed monads to track changed of properties that are added / removed from ReactThis. For now I put it in a separate repo <https://github.com/coot/purescript-react-ix>. Now it's just a proof of concept. There are some example in the test file that compile. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#106 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAVYy8xu86sVD-kr2aU8iTeJyUaBDtScks5sQRyagaJpZM4OfFAl> .

[coot]

I packaged this in purescript-react-ix. I hope to get some nice algebra for combining various specs in this indexed monad (in a horizontal way, not changing the render method but adding things in componentWillMount, e.g. adding isMounted property or something else).

Indeed there are a few reasons why one would like to add properties to this

• store refs
• create callbacks in componentWillMount: also for optimisation, since now one is forcing react to remove and reattach event handlers on every render.

I like the current mechanism for refs and the type of spec: it's very simple, while doing things with an indexed monad adds complexity (but also safety).