Callback Reusability

CallbackReusability.scala

import japgolly.scalajs.react._
import japgolly.scalajs.react.extra._
import japgolly.scalajs.react.vdom.html_<^._

object NotReusable {

  final case class Props(name: String, update: Callback)

  final class Backend($: BackendScope[Props, Unit]) {
    def render(p: Props): VdomElement =
      <.button(p.name, ^.onClick --> p.update) // <--------- Uses p.update which isn't Reusable
  }

  val Component = ScalaComponent.builder[Props]("")
    .renderBackend[Backend]
    .build
}


// █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████

object Safe {

  final case class Props(name: String, update: Reusable[Callback])

  implicit val reusabilityProps: Reusability[Props] =
    Reusability.caseClass

  final class Backend($: BackendScope[Props, Unit]) {
    def render(p: Props): VdomElement =
      <.button(p.name, ^.onClick --> p.update)
  }

  val Component = ScalaComponent.builder[Props]("")
    .renderBackend[Backend]
    .configure(Reusability.shouldComponentUpdate)
    .build
}

// █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████

/** This is dangerous because the type system isn't sophisticated enough to support this and you have to just rely on
  * devs' eyes.
  * 
  * Anything is safely reusable so long as:
  * 1. it's not accessed via the component's render method
  * 2. it's only accessed from within other Callbacks
  */
object SafeButDangerous {

  final case class Props(name: String, update: Callback)

  implicit val reusabilityProps: Reusability[Props] =
    Reusability.caseClassExcept('update) // <--------- Excluding .update from Reusability logic = dangerous

  final class Backend($: BackendScope[Props, Unit]) {
    val update: Callback =
      $.props.flatMap(_.update) // <--------- Uses p.update access inside another Callback = safe

    def render(p: Props): VdomElement =
      <.button(p.name, ^.onClick --> update) // <--------- Doesn't use p.update
  }

  val Component = ScalaComponent.builder[Props]("")
    .renderBackend[Backend]
    .configure(Reusability.shouldComponentUpdate)
    .build
}