括弧に関する基礎知識としてはmaisumakunさんの回答の通りなのですが、JavaScriptのreturnと括弧の関係について少し補足しますね。
JavaScript の return で戻り値を指定する場合、戻り値を囲む丸括弧は基本的に不要です。
ただし、return とそれに続く評価式(expression)が複数行になる場合、評価式の一部(1文字以上)が return と同じ行に記述されている必要があります。
つまり・・・
JavaScript
1
2// 戻り値を丸括弧で囲む必要はない
3return 10;
4// 式の一部が同じ行に書かれていれば複数行にしてもOK
5return 1
6 +2+3+4;
7// また当然ですが評価式は丸括弧で囲むことができ、括弧も式の一部です。
8return (10);
9return (1+2+3+4);
10return (
11 1+2+3+4
12);
13// これはNG(戻り値は undefined になります)
14return
15 10;
16return
17 1+2+3+4;
18return
19 (10);
20return
21 (1+2+3+4);
22
上記を基本として、オブジェクトリテラルや配列を戻す場合、以下のようになります。
JavaScript
1// 戻り値を丸括弧で囲む必要はない
2return {name:"Yamada", age:30};
3return [1,2,3];
4// 式の一部が同じ行に書かれていれば複数行にしてもOK
5return {
6 name:"Yamada",
7 age:30
8 };
9return [
10 1,2,3
11 ];
12// また当然ですが評価式は丸括弧で囲むことができ、括弧も式の一部です。
13return ({name:"Yamada", age:30});
14return (
15 {name:"Yamada", age:30}
16);
17return ({
18 name:"Yamada",age:30
19});
20return ([1,2,3]);
21return (
22 [1,2,3]
23);
24return ([
25 1,2,3
26]);
27// これはNG(戻り値は undefined になります)
28return
29 {
30 name:"Yamada",
31 age:30
32 };
33return
34 ({
35 name:"Yamada",age:30
36 });
37return
38 [
39 1,2,3
40 ];
41return
42 ([
43 1,2,3
44 ]);
つまり、countUp() の中の return {...} という構文は、丸括弧を省略してオブジェクトリテラルを戻す表記あり、render() の中の return (...) という構文は、左丸括弧を return に続く評価式の一部として利用した複数行の JSXテンプレート を戻す表記です。
ちなみに以下のように書けば、JSXテンプレートも丸括弧無しで return することができます。
JavaScript
1render() {
2 return <div>hello world!</div>;
3}
4
5render() {
6 return <div>
7 hello world!
8 </div>;
9}
10
ご参考になれば。