Don't re-render siblings in Treeview with scalajs-react

Question

I've built a simple TreeView with scalajs-react. Each node contains a text field.

I write some text into child 1.1:

Now, if I add new child 1.2 below 1, the text disappears because node 1 with all its children gets re-rendered:

When adding a child in this Javascript-Redux TreeView, the siblings are not re-rendered. How can I achieve that with scalajs-react?

See my code below or a minimal example project on GitHub.

case class Node(text: String, children: Vector[Node])

object TreeView {
  val childNode = Node("1.1", Vector())
  val parentNode = Node("1", Vector(childNode))

  val rootNode = ScalaComponent.builder[Unit]("Node")
    .initialState(parentNode)
    .renderBackend[NodeBackend].build

  class NodeBackend($ : BackendScope[Unit, Node]) {

    def addChild =
      $.modState(
        _.copy(children = $.state.runNow().children :+ Node("1.2", Vector())))

    def render(node: Node): VdomElement = {
      val children =
        if (node.children.nonEmpty)
          node.children.toVdomArray(child => {
            val childNode = ScalaComponent.builder[Unit]("Node")
              .initialState(child)
              .renderBackend[NodeBackend].build
            childNode.withKey(child.text)()
          })
        else EmptyVdom

      <.div(
        node.text, <.input(), <.button("Add child", ^.onClick --> addChild),
        children
      )
    }
  }

  def apply() = rootNode()

score 2 · Accepted Answer · answered Jul 19 '17 at 20:37

This is more along the lines of how to do it:

case class Node(label: String, text: String, children: Vector[Node])

object TreeView {
  val childNode = Node("1.1", "", Vector.empty)
  val parentNode = Node("1", "", Vector(childNode))

  val NodeComponent = ScalaComponent.builder[Node]("Node")
    .initialStateFromProps(identity)
    .renderBackend[NodeBackend]
    .build

  class NodeBackend($: BackendScope[Node, Node]) {

    def addChild =
      $.modState(s =>
        s.copy(children = s.children :+ Node("1.2", "", Vector.empty)))

    val onTextChange: ReactEventFromInput => Callback =
      _.extract(_.target.value)(t => $.modState(_.copy(text = t)))

    def render(node: Node): VdomElement = {
      val children =
        node.children.toVdomArray(child =>
          NodeComponent.withKey(child.label)(child))

      val input =
        <.input.text(
          ^.value := node.text,
          ^.onChange ==> onTextChange)

      <.div(
        node.label, input, <.button("Add child", ^.onClick --> addChild),
        children
      )
    }
  }

  def root = NodeComponent(parentNode)
}

Changes

Don't create a new component per Node, create a new instance of the same component. Amongst other reasons, React will always think it's got something different and redraw it, losing state for stateful components
Add value and onChange to input so that React tracks the editor contents, else editor changes only appear to work but React will wipe them whenever it feels like it.
Don't call .runNow() on Callback - it's an escape hatch for fringe situations and should always be avoided

That'll do. This still concerns me because you're using stateful components which are dangerous because they're the high-level version of a big mutable variable. You might find that React makes the wrong call and throws your state away at runtime in certain situations. You can achieve the same goals in a safer way statelessly, check out https://japgolly.github.io/scalajs-react/#examples/state-snapshot for one of the ways it can be done. Hope that helps.

Thank you very much for your help! Unfortunately, I get `TreeView.scala:15: Don't know what to feed (node: app.Node) in app.TreeView.NodeBackend.render. [error] .renderBackend[NodeBackend]` when running your code. — Tamriel, Jul 19 '17 at 23:20
I understand your StateSnapshot example as follows: All components get a reference to a global StateSnapshot object. If a component sets it to a new state, all other components get that change, too. For each variable exists a global StateSnapshot, so when a change happens only the components using that variable are updated. — Tamriel, Jul 20 '17 at 08:34
I tried to implement the TreeView with StateSnapshots, but I don't know how I should handle the children. A `Traversal.fromTraverse[Vector, Node]` seems of no help. I would like to use a global state object of the form `Map[Id, Node]` since my data comes in this form. — Tamriel, Jul 20 '17 at 12:03
Oops, rename the render param from "node" to "state" seeing as it's ambiguous (props/state both being Node). i.e. `def render(state: Node): VdomElement = ` — Golly, Jul 25 '17 at 04:51

Don't re-render siblings in Treeview with scalajs-react

1 Answers1