My Path to AsyncRender in React

Abstrct

In the past year, we decided to create out new sister app in React. Sooner than later, we met on of the most famous issues with React's synchronous rendering: render component that relies on an asynchronous data.

When you come from the ClojureScript+cljs/Om, you won't even think this need will raise any issue. See, Clojure has its amazing channels, which makes asynchronous calls very easy. Furthermore, cljs/Om lets you write you views in the code because, well, Clojure is Lisp, and everything is data. To tackle this asynchronous issue, we did what everyone does; we used compoenentDidMount:

class App extends React.Component {
    //...
    componentDidMount() {
        fetch("https://jsonplaceholder.typicode.com/todos/1")
            .then((response) => response.json())
            .then((json) => this.setState({ data: JSON.stringify(json) }));
    }
    //...
}

This is not a good solution.

Problem in every store

In real app there are a lot of asynchronous calls. Our application, is a medical application. As such, the app needs to maintain and contain a lot of data, that needs to be loaded with the page.

Given that we came from a data-oriented language, Stores are one of the first concept I looked to implement, and after some investigations, arguments and a lot of asking around, I have managed to convince the team to use MobX.

Good developers - Good practice

MobX has a great utils library, including fromPromise(). Though fromPromise is not a new idea, and can be found in other places, it's still a great solution to help your app be more reactive.

What fromPromise do generally, is to take a promise call, say fetch, and return a new promise, with state, and value.

Wait, what?

Here's where the magic comes in: We return the promise into an observable, meaning it will return again on state change. If you are familiar with channels, this will be very intuitive for you.

We were glad to find it (thank you Benjamin Gruenbaum), and I immediately started to brainstrom with myself on ways to use is on a system-wide scale.

After some thought I wrote the following function:

function viewByState(promise, props, elementFn) {
    switch (promise.state) {
        case "pending":
            return <div>pending</div>;
        case "rejected":
            return <div>Error {promise.value.toString()}</div>;
        case "fulfilled":
            return elementFn(promise.value);
        default:
            return "Nothing to see here";
    }
}

And used it in the component

async function getData() {
    const data = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    return data.json();
}

@observer
class App extends React.Component {
    @observable promised = fromPromise(getData());
    view = (data) => <div>{JSON.stringify(data)}</div>;
    render() {
        return viewByState(this.promised, this.props, this.view); 
    }
}

Cool!

Yet, this is not enough.

We now have a new problem! Actually, two.

Problem 1  -  disconnected

When you return the promise results, you loose the connection to any other store. this can be easily fixed by returning the props and the result.

Problem 2  -  Declare Yourself

This method is not declarative. and cannot be nested easily.

Final Cut

Enter the declarative AsyncRender:

function viewByState(promise, props, elementFn) {
    switch (promise.state) {
        case "pending":
            return <div>pending</div>;
        case "rejected":
            return <div>Error {promise.value.toString()}</div>;
        case "fulfilled":
            return elementFn(promise.value);
        default:
            return "Nothing to see here";
    }
}
async function getData() {
    const data = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    return data.json();
}

@observer
class App extends React.Component {
    @observable promised = fromPromise(getData());
    view = (data) => <div>{JSON.stringify(data)}</div>;
    render() {
        const promised = this.promised;
        return (
            <AsyncRender promise={promised}>
                <div>{JSON.stringify(promised.value)}</div>
            </AsyncRender>
        );
    }
}

@observer
class AsyncRender extends React.Component {
    render() {
        const promise = this.props.promise;
        switch (promise.state) {
            case "pending":
                return <div>pending</div>;
            case "rejected":
                return <div>Error {promise.value.toString()}</div>;
            case "fulfilled":
                return this.props.children;
            default:
                return "Nothing to see here";
        }
    }
}

Async? Sync?

Let's take a look at this implementation's power, shall we? Let assume we have one page.

The page has a list, with a nested data in each <li> Every <li> is async, so does the list itself Inside some <li> there is async data. easy!.

function viewByState(promise, elementFn) {
    switch (promise.state) {
        case "pending":
            return <div>pending</div>;
        case "rejected":
            return <div>Error {promise.value.toString()}</div>;
        case "fulfilled":
            return elementFn(promise.value);
        default:
            return "Nothing to see here";
    }
}
async function getData(id) {
    const data = await fetch(
        `https://jsonplaceholder.typicode.com/posts/${id}`
    );
    return data.json();
}
async function postComments(id) {
    const data = await fetch(
        `https://jsonplaceholder.typicode.com/posts/${id}/comments`
    );
    return data.json();
}
async function getPost() {
    const data = await fetch(
        "https://jsonplaceholder.typicode.com/posts?userId=1"
    );
    return data.json();
}
function commentCount(comments) {
    if (comments && comments.value) {
        return comments.value.length;
    }
}

@observer
class App extends React.Component {
    @observable promised = fromPromise(getPost());
    @observable
    listElements = [
        {
            post: fromPromise(getData(1)),
            comments: fromPromise(postComments(1)),
        },
        {
            post: fromPromise(getData(2)),
            comments: fromPromise(postComments(2)),
        },
        {
            posts: fromPromise(getData(3)),
            comments: fromPromise(postComments(3)),
        },
        {
            post: fromPromise(getData(4)),
            comments: fromPromise(postComments(4)),
        },
        {
            post: fromPromise(getData(5)),
            comments: fromPromise(postComments(5)),
        },
    ];
    @computed
    get postCount() {
        if (this.promised && this.promised.value)
            return this.promised.value.length;
    }
    render() {
        const promised = this.promised;
        return (
            <AsyncRender promise={promised}>
                <b>{this.postCount} Posts found</b>
                {this.listElements.map((item, index) => {
                    return (
                        <AsyncRender promise={item.post}>
                            <div>{JSON.stringify(item.post.value)}</div>
                            {viewByState(item.comments, () => (
                                <div>
                                    Found {item.comments.value.length} comments{" "}
                                </div>
                            ))}
                        </AsyncRender>
                    );
                })}
            </AsyncRender>
        );
    }
}

@observer
class AsyncRender extends React.Component {
    render() {
        const promise = this.props.promise;
        switch (promise.state) {
            case "pending":
                return <div>pending</div>;
            case "rejected":
                return <div>Error {promise.value.toString()}</div>;
            case "fulfilled":
                return this.props.children;
            default:
                return "Nothing to see here";
        }
    }
}

I know that for a lot of you guys, the smart ones, this is all but a new thing. In my case, coming to this solution was a great journey of re-wiring my mind to think in terms and design-patterns not usually combined with JavaScript for most of us.

This gave us the power to load our data at will, and to rethink on our Stores structures and realize they were too coupled to the UI.

This solution gave us the possibility to write the MobX store without thinking about the UI flow, as from now on, the UI loaded what it needs at will.

Furthermore, this idea gave us easy route to a consistent UI, meaning AsyncRender can show unified error, loaded, and messages to the user.

Last, but not least, is the developing process. We now can see visually which async call failed, as the corresponding UI will show an error, without breaking other UI, and will prevent rendering of elements the rely on the failed data retrieval .

What are your thought? :)