What is the correct way of setting React State with Oboe.js?

Question

I am new to both React-JS and Oboe.js. I am trying to speed up loading of some JSON data by using Oboe to stream the results. Unfortunately I am unable to do an update state in the function block. So I try to call another function that does the stateSet. Below is a method I have tried but doesn't work. It errors out a mapping function that uses search-results to render it in a table.

var that = this;

oboe({
            url: //url,
            method: 'POST',          // optional
            body: //POST-DATA,     // optional
        })
        .on('node', '*', function(things){

            that.updateState(things);
            // This callback will be called everytime a new object is
            // found in the foods array.
      
            console.log( 'Go eat some', things.id);
         });

 updateState = (props) => {
        this.setState({search-result: props});
    }

What I am not sure about is the right way of updating a state with oboe.js and React?

Is there a better library to use for streaming JSON data into React?

Answer 1

Recommended approach

If you have the ability to change things server-side, then I would not recommend using Oboe for this. Oboe is useful if your only alternative is to load a large JSON object and you would like to access that data before the whole thing can be parsed.

The best way to optimize loading a lot of data on a client is to send less data at a time and to make multiple requests. A web-socket is the best approach, and Socket.io is a good tool for doing that.

If you need to use Oboe

I'm working to put together an example of oboe.js + react for you to look at, though it's tricky as much of the activity of Oboe happens outside the React lifecyle. I'll update this answer with that example