ReactJs and my thoughts

One of the aspects of Angular that I liked most was the two-way binding.  It just makes sense to me when working with the MVVM.  I like the convenience knowing that someone else is observing the changes for me.  Well, that is no longer an option for me since we moved to ReactJs.

At first I was a skeptic since you needed to drag along the simplest of tooling like jQuery for ajax calls.  Even though I went kicking and screaming, I kind of like it now.  I like the control structure and the reuse patterns (even though we don’t reuse them 🙂 ).  It is not without its oddities, but I have yet to find a work around.

One of the most notable irritations is the timing of the actual state persistence. For example:

this.setState({myValue : SomeValue});

Even though you would think that this happens synchronously, it does not.  At some non-deterministic point later the new value is persisted and available through the state accessor.  This got me a bunch of times, and I had cobbled some garbage code to get around this until I read the docs more closely (not a surprise).

There is a callback that is available and runs when the state is truly persisted.

this.setState({myValue : SomeValue}, function(){

console.log('Hurray, my value is persisted');

});

This comes in handy when the data is passed between controls.  Today I needed to signal to a parent from a child that data has changed.  Once that notification was propagated, the parent needed to call into the child to get the current value, in my case this was from a textbox control.  The solution was the same as above.

Child

this.setState({value:$('#myTextbox').val()});

this.signalToParentThatDataHasChanged();

Parent

onDataChangedCallback(){

var childValue = this.childReference.getValue();

}

This seems on the surface like it would be fine and in other frameworks this is intuitively true.  React is another story.  Like I mentioned above, setting the state variables do not happen synchronously in the sense that once you call setState it it is available everywhere.  This is a bummer, but easily remedied using the setState callback above.

All in all I am learning to love ReactJs.  I guess there are two lessons here: read the docs carefully and that setState is not synchronous.  The first lesson has always been elusive for me.

Cheers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s