State in JavaScript without React

Question

I am learning React and wondered if there was a way to re-render on state change without using React. Is this possible in plain JavaScript?

I suggest reading the code that React uses if you want to know how the code works in React. — Heretic Monkey, Oct 05 '16 at 17:49
[redux](https://github.com/reactjs/redux) or [mobx](https://github.com/mobxjs/mobx)? They are both framework-agnostic — Paolo Moretti, Oct 05 '16 at 17:55
You have to know what you really want and need. Is really necessary reinvent the wheel? Any framework or library can solve my problem? — Alessander França, Oct 05 '16 at 17:57
A Redux-like Flux implementation in <75 lines of code: https://gist.github.com/acdlite/9f1b5883d132ad242323 — Paolo Moretti, Oct 05 '16 at 18:03
See http://stackoverflow.com/questions/1269633/watch-for-object-properties-changes-in-javascript — Etheryte, Oct 05 '16 at 18:43

score 0 · Accepted Answer · answered Oct 06 '16 at 02:14

Let's assume that our whole application is this:

<input id="myState" />
<h2 id="myView"></h2>

We have some sort of value we call state and we have some sort of value we call view. Now what we want is that when we update our state, we want to update our view. Yes, that is absolutely possible without React/Redux/etc.

window.onload = function(){
    var state = document.getElementById('myState'),
            view = document.getElementById('myView')
    state.addEventListener('keyup',function(e){
        view.innerText = e.target.value
    })
}

Every time the 'state' of our application changes, we are resetting the 'view'.

Going past this dummy problem you will run into alot of issues, which are the issues that React/Angular/Ember/Backbone/etc all try to help fix.

Can it be done in vanilla JS? Yes, because someone else already did it in vanilla JS.

I discussed this at a meetup last night and they had a similar answer to yours. React/Redux makes it easier but it's all javascript either way so technically you could write you own mini framework to strip the feature that you want out but you should really just use the framework that does this as long as it isn't too bloated. — D. Cantatore, Oct 06 '16 at 14:01
I would say it really depends on how crazy your UI is. If it's just a list of ~100 elements that you want to filter/dedraw, it's simple to just filter and repaint in vanilla JS. If you are wanting a full fledged SPA, it gets more fun but then you end up building the libraries over again. Give for what you get. — Tim Roberts, Oct 06 '16 at 18:17

State in JavaScript without React

1 Answers1