...Object Rest Spread

Keep on Learning!

If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.

Start your All-Access Pass
Buy just this tutorial for $12.00

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

When a user submit an invalid form, we get a nice error message... but our cool "lifting to the database" message stays! Totally confusing! It looks like we're still trying to save the new rep log. Let's fix that!

In RepLogApp, the state that controls this is called isSavingNewRepLog. When the AJAX call is successful, we set this back to false. We need to also set this back to false inside the catch. And yes, fixing this is as easy as just copying this key and pasting it below. Sure, this would duplicate that key in two places... but, that's super-minor duplication: no big deal.

Except... I want to learn a super-fun new language feature. To show that, let's fix this in a slightly fancier way. Above the AJAX call, set const newState = an object with savingNewRepLog set to false.

... lines 1 - 45
handleAddRepLog(item, reps) {
... lines 47 - 55
const newState = {
isSavingNewRepLog: false
... lines 59 - 82
... lines 84 - 148

This represents the new state that we want to apply in all situations: success or failure. In other words, we want to merge this state into whatever is being set in success and also down in catch.

How can you merge objects in JavaScript? We've seen it before: Object.assign(). Check it out: return Object.assign(). For the first argument, copy the new state and paste. For the second argument, use newState.

... lines 1 - 58
.then(repLog => {
this.setState(prevState => {
... lines 62 - 63
return Object.assign({
repLogs: newRepLogs,
newRepLogValidationErrorMessage: '',
}, newState);
... lines 69 - 70
... lines 72 - 148

Object.assign() will merge the data from newState into the first object and return it. Perfect!

Repeat this in catch: add Object.assign(), then newState.

... lines 1 - 71
.catch(error => {
error.response.json().then(errorsData => {
... lines 74 - 76
newRepLogValidationErrorMessage: firstError
}, newState));
... lines 82 - 148

Let's go make sure this works: refresh, select our bad data and... cool. It shows for just a second, then disappears.

Installing & Configuring babel-plugin-transform-object-rest-spread

Object.assign() is really great. We also used it earlier to merge two objects without modifying the original object. That was super important.

The only problem with Object.assign() is that it's... kinda confusing to look at, especially if you need to use it to avoid mutation.

Ok, idea time: what if we could do this: remove the Object.assign(), return a normal object, but then, add ...newState.

... lines 1 - 59
.then(repLog => {
this.setState(prevState => {
... lines 62 - 63
return {
... lines 66 - 67
... lines 70 - 71
... lines 73 - 150

That would be cool, right? I mean, we already do this for arrays! But... Webpack explodes: the "spread" syntax does not work for objects.

Or does it?! Google for "babel plugin transform object rest spread" and find the Babel documentation page. The feature we're "dreaming" about is called "object rest spread". It is not an official ECMAScript feature. But, it's currently a proposed, "draft" feature that's in a late stage. There's no promises, but that means it will likely become a real feature in a future ECMAScript version.

And, because the JS world is a bit nuts, you don't need to wait! We can teach Babel how to understand this syntax. Copy the package name, find your terminal and run:

yarn add babel-plugin-transform-object-rest-spread --dev

Oh, and as I mentioned before, most of these Babel plugins will have a slightly new name in the future: @babel/plugin-transform-object-rest-spread. But, it's really the same library.

When you work with Babel, you typically configure it with a .babelrc file. But, Encore does this for us! Open webpack.config.js: the configureBabel() function allows us to extend its configuration. Add babelConfig.plugins.push() and paste the name.

... lines 1 - 3
... lines 5 - 29
.configureBabel((babelConfig) => {
... lines 31 - 36
... lines 39 - 43

In the future, if you download the new @babel/plugin-transform-object-rest-spread library, the plugin name will be the full library name, starting with the @babel part. Just follow the docs.

Head back to the tab that's running Encore. Yep, it's super angry. Stop and re-run this command:

yarn run encore dev-server

And... it works! That's awesome! Babel now understands this syntax.

But... PhpStorm is still angry: ESLint parsing error. No worries: we just need to tell ESLint that this syntax is cool with us. Open .eslintrc.js. Under ecmaFeatures, add experimentalObjectRestSpread set to true.


On ESLint version 6 or higher, you only need to change the ecmaVersion to 2018. You do not need to add the experimentalObjectRestSpread option because it's already enabled.

21 lines .eslintrc.js
module.exports = {
... line 2
parserOptions: {
... lines 4 - 5
ecmaFeatures: {
... line 7
experimentalObjectRestSpread: true
... lines 11 - 19

Deep breath: go back to RepLogApp. And... sweet! The error is gone!

Using the Object Rest Spread

Let's finish this! Down in catch, remove Object.assign(), remove the second argument and add ...newState.

... lines 1 - 72
.catch(error => {
error.response.json().then(errorsData => {
... lines 75 - 77
... line 80
... lines 84 - 150

And one more time: scroll down to handleDeleteRepLog(). We don't need this weird code anymore! Just return a new object with ...repLog then isDeleting: true.

... lines 1 - 92
handleDeleteRepLog(id) {
this.setState((prevState) => {
return {
repLogs: prevState.repLogs.map(repLog => {
... lines 97 - 100
return {...repLog, isDeleting: true};
... lines 105 - 117
... lines 119 - 150

I love that. And even better, when we refresh, it's not broken! We rock!

Leave a comment!

  • 2020-03-30 weaverryan

    Thanks Carlos!

    We'll get a not added for people using newer versions of eslint! The new way is easier anyways ;)


  • 2020-03-29 Carlos

    ESLint version 6 don't work with "experimentalObjectRestSpread: true,".

    "parserOptions": {
    "ecmaVersion": 2018


  • 2019-12-23 Victor Bocharsky

    Hey Stinndler,

    Thank you for sharing some tips with others! I suppose when you installed a new version of babel/preset-react - you actually upgraded this package... so, it means that when you later removed this - it removed not the "old version" of it, it removed it completely from your dependencies. So, you would need to remove the old version first and install the new one... ot just upgrade the package without removing it.

    Anyway, I'm glad you got it working!


  • 2019-12-21 stinndler

    trying to follow but ran into issues. ended up installing newer: yarn add @babel/plugin-proposal-object-rest-spread --dev
    but this required @babel/core so yarn add @babel/core --dev
    and then yarn add @babel/preset-react --dev

    then removed the old version: yarn remove babel-preset-react

    but now i get: Error: Install babel-preset-react to use enableReactPreset()

    How can I tell webpack encore to use the newer version of preset-react?

    EDIT: I was able to back everything out and get it working. Just caution to those that might try to install the @babel/plugin instead of the one you use.

  • 2019-05-06 weaverryan

    Great news! Thanks for sharing Brizzz!

  • 2019-05-03 Brizzz

    This syntax is available by default since v7 of babel/preset-react