<p dir="auto">This code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="function a(f) {
   return () =&gt; {}
}

@a(foo =&gt; ({}))
class MyClass {
}"><pre class="notranslate"><code class="notranslate">function a(f) {
   return () =&gt; {}
}

@a(foo =&gt; ({}))
class MyClass {
}
</code></pre></div>
<p dir="auto">is transpiled to</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="function a(f) {
   return function () {};
}

var MyClass = function MyClass() {
   _classCallCheck(this, MyClass);
};"><pre class="notranslate"><code class="notranslate">function a(f) {
   return function () {};
}

var MyClass = function MyClass() {
   _classCallCheck(this, MyClass);
};
</code></pre></div>
<p dir="auto">whereas if you replace the annotation with <code class="notranslate">@a(foo =&gt; 1)</code> the result changes dramatically:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="function a(f) {
   return function () {};
}

var MyClass = (function () {
   function MyClass() {
      _classCallCheck(this, _MyClass);
   }

   var _MyClass = MyClass;
   MyClass = a(function (foo) {
      return 1;
   })(MyClass) || MyClass;
   return MyClass;
})();"><pre class="notranslate"><code class="notranslate">function a(f) {
   return function () {};
}

var MyClass = (function () {
   function MyClass() {
      _classCallCheck(this, _MyClass);
   }

   var _MyClass = MyClass;
   MyClass = a(function (foo) {
      return 1;
   })(MyClass) || MyClass;
   return MyClass;
})();
</code></pre></div>
<p dir="auto">So it looks like it's not possible to use an arrow function syntax that return object literals</p>
<p dir="auto">Possible use cases:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@connect(state =&gt; ({
  counter: state.counter
}))
export default class CounterApp {
  render() {
    const { counter, dispatch } = this.props;
    // Instead of `bindActionCreators`, you may also pass `dispatch` as a prop
    // to your component and call `dispatch(CounterActions.increment())`
    return (
      &lt;Counter counter={counter}
               {...bindActionCreators(CounterActions, dispatch)} /&gt;
    );
  }
}"><pre class="notranslate"><code class="notranslate">@connect(state =&gt; ({
  counter: state.counter
}))
export default class CounterApp {
  render() {
    const { counter, dispatch } = this.props;
    // Instead of `bindActionCreators`, you may also pass `dispatch` as a prop
    // to your component and call `dispatch(CounterActions.increment())`
    return (
      &lt;Counter counter={counter}
               {...bindActionCreators(CounterActions, dispatch)} /&gt;
    );
  }
}
</code></pre></div>
<p dir="auto">Compare the output of these two to show the difference.</p>
<p dir="auto"><a href="https://babeljs.io/repl/#?experimental=true&amp;evaluate=true&amp;loose=false&amp;spec=false&amp;code=%40decorate((arg)%20%3D%3E%20null)%0Aclass%20Example1%20%7B%0A%7D%0A%0A%40decorate(arg%20%3D%3E%20null)%0Aclass%20Example2%20%7B%0A%7D" rel="nofollow">https://babeljs.io/repl/#?experimental=true&amp;evaluate=true&amp;loose=false&amp;spec=false&amp;code=%40decorate((arg)%20%3D%3E%20null)%0Aclass%20Example1%20%7B%0A%7D%0A%0A%40decorate(arg%20%3D%3E%20null)%0Aclass%20Example2%20%7B%0A%7D</a></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@decorate((arg) =&gt; null)
class Example1 {
}

@decorate(arg =&gt; null)
class Example2 {
}"><pre class="notranslate">@<span class="pl-en">decorate</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">arg</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">null</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-v">Example1</span> <span class="pl-kos">{</span>
<span class="pl-kos">}</span>

@<span class="pl-en">decorate</span><span class="pl-kos">(</span><span class="pl-s1">arg</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">null</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-v">Example2</span> <span class="pl-kos">{</span>
<span class="pl-kos">}</span></pre></div>