Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

React.memoでrecomposeのpureが要らなくなった話

More than 1 year has passed since last update.

先日React v16.6.0がリリースされました。
https://reactjs.org/blog/2018/10/23/react-v-16-6.html

リリースされた機能の中にReact.memoというものがあるのですがこれでrecomposeのpureが要らなくなりそうだという話です。

recompose.pureとは

Reactでは再レンダリングを繰り返すとパフォーマンスが落ちるわけですが、多くの場合はshouldComponentUpdateを実装して、propsが同じ場合は再レンダリングをしないよといった具合でパフォーマンスの向上をはかります。
React v15.3からトップレベルAPIでPureComponentというものが追加されました。これはshouldComponentUpdateをデフォルト実装したComponentで、propsをshallow equalしてパフォーマンス向上の実装を楽にしてくれます。

import React, { PureComponent } from 'react'

class Pure extends PureComponent {
  render() {
    return (
      <p>pure component</p>
    )
  }
}

これをHOCで実装できるようにしたのが、HOCによってライフサイクルメソッドを追加できるようにするライブラリのrecomposeです。これのpureメソッドを利用することでSFCなどでも楽に実装することができます。
https://github.com/acdlite/recompose

import React from 'react'
import { pure } from 'recompose'

const Pure = pure(() => (
  <p>pure component</p>
))

React.memoとは

ここで出てくるのが、v16.6で追加されたReact.memoです。これはPureComponentshouldComponentUpdateの実装を関数コンポーネントでもラップするだけで出来るようにしたものです。
propsが変わった場合のみ再レンダリングされます。

import React from 'react'

const Pure = React.memo(() => (
  <p>pure component</p>
))

Reactは今後どんどんSFCになっていきますね。

tatane616
昼寝したりフロントエンド書いたり
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away