setState should follow React best practice

[DianaLease]

currently, the pattern used for setting the React component's state is dangerous because const state = this.state does not clone this.state. it's a reference to the state object, which means when you assign state.loading = false you are mutating the state object directly. we could deeply clone the state object and modify the clone, but what we should really do is usesetState to update just the properties on state we want to update.

for example, the current code:

handleLoadingFailed(message) {
        const state = this.state;
        state.loading = false;
        state.loadingFailed = true;
        state.log.loading = message;
        this.setState(state);
    }

would become:

handleLoadingFailed(message) {
        this.setState({
            loading: false,
            loadingFailed: true,
            log: {
                ...this.state.log,
                loading: message
            }
        });
    }

[jeromesimeon]

Also, we should avoid multiple consecutive setState calls whenever possible.

[b30wulffz]

I would like to work on this issue.

[jolanglinais]

@b30wulffz I think it may be better to aim for some other repositories we have (like Template Studio v2). We are planning on replacing template-studio soon, so I may have jumped the gun by labeling this issue as Hacktoberfest.

[nik72619c]

Hi, is this issue currently under progress or can it be taken up ?

[jeromesimeon]

hi @nik72619c It's not under progress but we aren't pushing more work on template studio at the moment (see news around UX / UI / tooling in Slack from a couple of weeks ago).

There are lots of useful work items on other UI components though! Please check cicero-ui or concerto-ui.

[nik72619c]

got it, thanks @jeromesimeon!