Do YOU really understand React state and WHY?

I know when we all “get started” in something new (say, #React or #javascript or #html or #css) we follow examples. And Cut/Paste and continue,

I dont think React people really understand “state” (class or function).  So they stuff everything into it and not even sure why (this is more true in the Class React world).  Let’s understand.  Your React “components” are actually just jscript classes, right? Or if a newbie or foreign to transpilers maybe you dont know that. But they are.

JSX is so cool, so welcome, but to newbies it’s some weird layer of “magic”.  This is not Angular. It’s a library, a very cute and very simple and very well thought-out library.

So you create a “class” that inherits from React and thus it knows about it, and it can do introspection (namely: find “render()” and find “state”).   Somehow, we that read the examples, think that “all data goes into ‘state'”.

I agree its odd because you/we never “new MyComponent()”; something else does. But it does just that. Its an object. And it can keep anything it wants in its implementation.  In fact, in your render-return you can {var} any var you want. You can. That ‘var’ can be anything local in your class or a function call to something else; it will work. It will.

The key is triggering a render.  This is where React looks at your output and compares to DOM and does/not update accordingly.  So, then, what triggers a render (meaning: a method call to your render() functions…recall, this is all just regular javascript classes).

So #React doesn’t really know that in your returned JSX-like code that there are magic data. It really can’t. It could be {this.pizza} or “{this.state.pizza}”.  Still works.  Still will render. But WONT update.  The trigger is “setState()” (or the functional version).  This is why this can happen out of bound (meaning: callbacks, timer timeouts, REST returns, websockets, more).

It would be SOOOOO much easier if we could just do:  this.stuff=5 and magic UI happens.  But there’s a gap between the browser and javascript. You could, always, of course, set the DOM element yourself but then you’ve lost the beauty layering and the separation of UI and biz nor could you simply set a variable–you have to call something to update the DOM.  We use React for avoiding all that.  It gives us a feeling of magic, and does it quite well.

So this is where setState() (or similar) matters.  It tells React: Please care about these items and follow your vDOM tree and do the right thing.  And she will.

My only point here is to help people understand the “magic” (which isn’t magic, just really cool stuff). Your component (or function-component) need to talk to React to let it effect the DOM. Keep whatever data wherever you wish, write code like you want to, but if you want a UI effect you have to tell React.  It’s just that simple.

If you read my blog on why #Redux is dead, you’ll the beauty of this even better.  Kudos #react for an amazingly simple but so powerful environment.

Leave a Comment

Your email address will not be published. Required fields are marked *