Add React.memo

Author: japgolly

core/src/main/scala/japgolly/scalajs/react/React.scala

@@ -34,6 +34,21 @@ object React {
     */
   @inline def forwardRef = component.ReactForwardRef
 
+  /** Class components can bail out from rendering when their input props are the same using shouldComponentUpdate.
+    * Now you can do the same with function components by wrapping them in React.memo.
+    *
+    * @since 1.4.0 / React 16.6.0
+    */
+  def memo[P, CT[-p, +u] <: CtorType[p, u]](c: ScalaFnComponent[P, CT])
+                                           (implicit r: Reusability[P],
+                                            s: CtorType.Summoner[Box[P], c.ctor.ChildrenType])
+      : GenericComponent[P, s.CT, JsComponent.Unmounted[Box[P], Null]] = {
+    val r2 = implicitly[Reusability[Box[P]]]
+    val c2 = Raw.React.memo(c.raw, r2.test)
+    JsComponent.force[Box[P], c.ctor.ChildrenType, Null](c2)
+      .cmapCtorProps[P](Box(_))
+  }
+
   /** StrictMode is a tool for highlighting potential problems in an application.
     * Like Fragment, StrictMode does not render any visible UI.
     * It activates additional checks and warnings for its descendants.

core/src/main/scala/japgolly/scalajs/react/Reusability.scala

@@ -1,6 +1,6 @@
 package japgolly.scalajs.react
 
-import japgolly.scalajs.react.internal.{OptionLike, ReusabilityMacros}
+import japgolly.scalajs.react.internal.{Box, OptionLike, ReusabilityMacros}
 import java.util.{Date, UUID}
 import org.scalajs.dom.console
 import scala.annotation.tailrec
@@ -239,6 +239,9 @@ object Reusability {
   implicit def set[A]: Reusability[Set[A]] =
     byRefOr_== // universal equality must hold for Sets
 
+  implicit def box[A: Reusability]: Reusability[Box[A]] =
+    by(_.unbox)
+
   // Generated by bin/gen-reusable
 
   implicit def tuple2[A:Reusability, B:Reusability]: Reusability[(A,B)] =

core/src/main/scala/japgolly/scalajs/react/raw/React.scala

@@ -211,7 +211,7 @@ trait React extends js.Object {
   final def `lazy`[P <: js.Object](f: js.Function0[js.Promise[LazyResult[P]]]): Lazy[P] = js.native
 
   /** @since 16.6.0 */
-  final def memo[P <: js.Object, A](f: js.Function1[P, A], areEqual: js.Function2[P, P, Boolean] = js.native): js.Function1[P, A] = js.native
+  final def memo[P <: js.Object, A](f: js.Function1[P, A], areEqual: js.Function2[P, P, Boolean] = js.native): js.Object = js.native
 
   final val version: String = js.native
 

doc/changelog/1.4.0.md

@@ -33,6 +33,7 @@
     For technical reasons (types, power, constraints) `React.lazy` is not added nor needed in Scala;
     use the new `AsyncCallback` instead.
   * The new `getDerivedStateFromError` has *not* been implemented, and cannot be until facebook/react#13986 is merged.
+  * Add `React.memo` to add reusability to "functional" components
 
 * `Reusability` & `Reusable` have been moved from the `extra` module, into `core`.
   1. It was required to implement the new `React.memo`
@@ -83,9 +84,5 @@ find . -type f -name '*.scala' -exec perl -pi -e '
 
 # TODO
 
-* `React.memo`
-  * Add `React.memo`
-  * Add `.memo` (?) to `JsFnComponent`
-  * Test from `ScalaFnComponent`
 * SSR stuff
 * Rename `.runNow()` to `.unsafeRunNow()`?

test/src/test/scala/japgolly/scalajs/react/core/ScalaFnComponentTest.scala

@@ -2,14 +2,15 @@ package japgolly.scalajs.react.core
 
 import utest._
 import japgolly.scalajs.react._
+import japgolly.scalajs.react.test.ReactTestUtils
 import japgolly.scalajs.react.vdom.html_<^._
 import japgolly.scalajs.react.test.TestUtil._
 
 object ScalaFnComponentTest extends TestSuite {
 
   val IntProps = ScalaFnComponent[Int](i => <.code(s"$i² = ${i * i}"))
 
-  case class Add(x: Int, y: Int)
+  final case class Add(x: Int, y: Int)
 
   val CaseClassProps = ScalaFnComponent[Add] { a =>
     import a._
@@ -30,5 +31,28 @@ object ScalaFnComponentTest extends TestSuite {
     'withChildren - assertRender(WithChildren(3)(c1, c2),    "<div>i=3<i>good</i>222</div>")
     'justChild    - assertRender(JustChildren(c1),           "<h4><i>good</i></h4>")
     'justChildren - assertRender(JustChildren(c1, c2),       "<h4><i>good</i>222</h4>")
+
+    'memo - {
+      var rendered = 0
+      implicit def reusabilityAdd: Reusability[Add] = Reusability.by(_.x)
+      val c = React.memo(ScalaFnComponent[Add] { _ =>
+        rendered += 1
+        <.br
+      })
+      val w = ScalaComponent.builder[Unit]("").initialState(Add(1, 1)).render_S(c(_)).build
+      ReactTestUtils.withRenderedIntoDocument(w()) { m =>
+        assert(rendered == 1)
+        m.setState(Add(1, 2))
+        assert(rendered == 1)
+        m.setState(Add(2, 2))
+        assert(rendered == 2)
+        m.setState(Add(2, 3))
+        assert(rendered == 2)
+        m.setState(Add(2, 2))
+        assert(rendered == 2)
+        m.setState(Add(1, 2))
+        assert(rendered == 3)
+      }
+    }
   }
 }