Handle high frequency updates

[wrabit]

Hi Arqex, firstly, apologies as this may come across more like a React noob question rather than a technical freezer issue.

One feature of my app is listening for device orientation and a compass is turned accordingly in multiple child components. In turn, the state and UI is updating at a high rate and I can see the affects of jittering and lagging in the affect of the css transform - I believe because I'm force updating the whole app on new orientation.

My question: is there an obvious design pattern I am missing that could be more efficient in doing this? Is it possible to do some checks in my App componentDidMount?

App.js

    componentDidMount() {
        State.on('update', () => this.forceUpdate());
    }
    callbackUpdateOrientation(orientation) {
        State.emit('app:update_orientation', orientation);
    }
    componentWillMount() {
        orientationListener( this.callbackUpdateOrientation.bind(this) );
    }

Reactions.js

    ...
    State.get().geo.set({orientation: orientation})

Child.js

    ... orientation calculation
    <IconCompass style={{ transform: `rotate(${heading}deg)` }} />;

Many thanks in advance

[arqex]

Hey @digitaloutback ,

Sorry so much for the delay on the reply, maybe you are not even using freezer anymore after seeing how unresponsive I am :/

Your solution is great. It's nice to see how you use the event system, it's exactly the way I have thought of it. So even if the orientation state is really a browser (device) part of data, you update your app state to reflect its current value. And that update refreshes your app.

Freezer's events are used most of the time for tasks related to data fetch/update from the server, but it's cool to see it also in use for changes of state initiated by the device. Another nice use case is to handle websocket events where the server is the one updaing the app state.

Thanks for your interest in the library :)