これは TECHSCORE Advent Calendar 2018 の2日目の記事です。 React で無邪気に開発をしていると、やたらと render() が呼ばれるのが気になります。 PureComponent を使うと render() の呼び出しを少なくできることは、なんとなく知ってはいるのですが、そもそもどういう場合に render() が呼ばれるのか、 State や Context、 はたまた Redux を使ったときに render() の呼ばれるタイミングがそれぞれどう違うのか、いまいちよくわかっていません。いろいろたっぷり試してみました。 目次 準備 State Vanilla State PureComponent Props に Allow Function を直接渡す Context Vanilla Context PureComponent 独自の Provi