React - 為什麼在 Render 之中的同一句 console.log 會出兩次

 有時在 return 的時候想使用 console.log 去觀察一些 value 的時候，都會發現會重覆做多了一次。

例如在新的 create-react-app template 之中加一個沒有用的 useState 和在 return 的時候加一句 console.log。

function App() {

  

  const [count , setCount] = useState(0)

  return (

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>

          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a

          className="App-link"

          href="https://reactjs.org"

          target="_blank"

          rel="noopener noreferrer"

        >

          Learn React

        </a>

      </header>

      {console.log('testing')}

    </div>

  );

}

在 npm start 後使用 F12 功能查看，還是會有兩句的 testing 出現。

一直以來都沒有理會這一個現象...

直到看到這篇文章

https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

當中有一段令我恍然大悟，

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

原來如此... 在 Strict mode 之中把我的行動重覆兩次，這樣就能解釋為什麼我的 console.log 永遠都是會顯示兩行了。

在文中之中所說的 Strict mode 這個限制只會在 development 之中發生，我把以上的 script build 一次之後再用 local server 運行，果然只會顯示只有一行。

不過在文中的最後有以下的提示，在 React 版本 17 之後， console.log() 就不會再顯示第二次由 Strict Mode 所作出的 log 了，但為免日後還是抱有一樣的擬問，還是記錄一下。

Note:

Starting with React 17, React automatically modifies the console methods like console.log() to silence the logs in the second call to lifecycle functions. However, it may cause undesired behavior in certain cases where a workaround can be used.

優木かな 2nd live birthday live 感想

雖然是 3 月 10 日發生的事，

但一路拖到現在才開始記錄，3 月 10 日的附近前住了日本去參加優木加奈的 2nd live 。

首先做的第一件事是去便利店拿入場票。

大約是 3 月 8 日去到日本的，在參加之前有空閒的時候，在機鋪玩得累的時候，就去了 paseal 體驗一下，也有點了 かなしぃ 的歌曲。

到 live 的當天，在 live good 區買了衣服，照片等等，不過這次 live tee 在正面寫上了「優木かな」四隻的大字和深紅色的色調實在沒有什麼穿著的機會只能收藏用，下圖為 live 之中用到的螢光棒。

除了下半場我是事前買了票之外，上半場我也購買了當日券進場，而下半場坐的位置是第三行中間的位置。

當中有唱遙的接球的角色歌和在這次 live 之中首次公開的新歌。

感想就是值得在近距離之中可以直視台上的かなしぃ，光是這一點就已經令到整個行程變得值得，能夠在 live 之中體驗到她的努力和準備，以及最後演出的成果。當然其中一個最重要去的原因是給喜歡的聲優一個支持...

本身不太懂得去寫感想之類的東西，只能蜻蜓點水寫一點...

優木かな Yuuki Kana 第二張單曲 『Be yourself!』

其實早在11月尾之前就出了，不過一路懶惰沒有寫

優木加奈的第二張單曲於11月28日發售，作為かなしぃすこ民的其中之一當然也已預訂購入，以下圖片為開箱照。

主打歌「Be yourself!」在之前已在 YouTube 官方頻道放上 full version

https://www.youtube.com/watch?v=qJrNQlvxvFA

一直期待 full version 的我就在那幾天狂 loop 這首歌，個人最喜歡是 1:28 附近「とびきりの笑顏で 夢みていたあの舞台(ステージ)へ」這句之間的旋律

當然購買初回限定版最大的原因就是 3 月 10 日的 2nd live，幸運地又抽中了其實可能根本沒人買

於是明年的三月預定應該會再飛一次去聽 live 見かなしぃ順便旅游休息一下

有想過把這兩首CD四首的歌詞都打一次上來做一個備忘但發覺也要花一段時間，先放在預定會做的事中

優木かな 1st live & talk prologue 序章 感想(下)

隔了一個月，終於立下決心去完全這篇文章 其實是因為懶得拍照

在去之前的幾天，還是用破爛的日文寫了一篇投稿去廣播

在聽 live 的途中得知有從海外的人來參加這次 live 就知道那篇會在當晚的廣播之中出現了

https://www.nicovideo.jp/watch/so33788168

正式聽聲優的演唱會算是第一次，聽歌的時候都是跟著大家揮螢光棒感受氣氛

翻唱的カザハネ和瑠璃の鳥在之前都尚未認識，去完之後就加了我的歌單了

然後那天公開的第二張CD的歌曲 Be yourself! 也是很快就喜歡上的一首歌曲，發售日要等到十一月尾實在有點晚，在這之前只能聽之後廣播的刪減版止渴

以下是在物販之中買到的東西，留為紀念

照片集之類的東西，演唱會當天也有穿著這套藍色的衣裳

真的是筆記本的 kananote 和照片

掛飾的かなちゃん 想不到掛那裡仍繼續封存中

最後要說的是在演唱會的最後，有抽獎的環節，獎品是簽了名的 t-shirt ，上下半節各抽 3 名。在下半節的抽獎的時候，聽到喊選中的是 J 行的時候，就在想會不會是我呢的時候，在聽到喊出的是我的座號的時候還是有一點不可思議的感覺，不玩手機遊戲的運氣累積全都用在這身上了，之後就投稿去 radio 寫了當天的感想和抽到 t-shirt 的這件事，雖然這次沒有被讀出來，但是在 omake 的時間就提到有海外的人抽中了簽了名的 t-shirt 還是意會到寫上去的東西確確實實看過 XD

在這之後，畢竟是在機場過了一晚沒有好好睡，就搭車回到預約的酒店休息了，之後兩天時間都是躲在遊戲機中心之中玩街機，剛好那時有颱風但航班沒有被延誤，就順利上機回到香港了，這次的旅途亦告一段落。第二天就馬上上班

優木かな 1st live & talk prologue 序章 感想(上)

在 9 月 2 號的時候，坐飛機去了東京參加かなしぃ的LIVE，正式的名稱是有點長的「優木かな 1stシングル発売記念ライブ＆トーク 『Kana Note』prologue -序章-」，但難得要請假的話只為了看一場LIVE有一點浪費，順便多請了幾天的假期順便在東京遊玩休息一下。

在先前購買特典版第一首 CD 的時附送的先行抽選卷，在透過O寶上的人成功開設了需要日本電話的抽選帳號和入金購票，去到的時候只需要去便利店拿粟就完成了，於是下圖就是成功拿到的票。

我下飛機的地方是在羽田機場，LIVE的會場就在羽田機場，下機之後不用特意去找地方真是太好了呢。省略在機場渡過的一晚，在機場內部的餐廳吃過東西和稍作休息之後，就去到舉辦的會場TIAT SKY HALL。會場出面的電子螢幕顯示今天的演出詳細。

大於在 11 時 30 分左右去到會場的時候發現已經排了幾十人，原來是排物販的隊列，雖則參加的人數並不多，但看到當時物販隊列的消化速度讓我有點擔心會不會到了開演的時間都還沒有買到，還好最後這個問題沒有發生，能夠順利入場坐下，但記憶中開演的時間應該是由 12 時 30 分延時了一點點。

下面這樣圖是還沒有人坐下時的會場，數了數有大約 14 行而每行有 15 個位置，開演之後座位並沒有坐滿，我想以一場計的參加人數大約落在 170 ~ 180 人左右吧。

其後 LIVE 的內容和感想，物販買到的東西就留待有空閒再寫的下篇。