Update the DOM Easily with the Re:dom Library — Component Updates

We can update the DOM with the Re:dom library in a way easier than plain JavaScript.

In this article, we’ll look at how to use the library to diff the DOM and patch it.

Diffing

Re:dom will do the diffing and patching manually.

For example, we can write:

import { el, mount } from "redom";

class Image {
  constructor() {
    this.el = el("img");
    this.data = {};
  }
  update(data) {
    const { url } = data;

    if (url !== this.data.url) {
      this.el.src = url;
    }

    this.data = data;
  }
}
const image = new Image();
image.update({ url: "https://picsum.photos/id/237/200/300" });
image.update({ url: "https://picsum.photos/id/238/200/300" });

mount(document.body, image);

Then the 2nd image URL will be the final URL that’s set as the src of the img element.

Lists

We can create lists with an li element an array of items:

import { el, list, mount } from "redom";

class Li {
  constructor() {
    this.el = el("li");
  }
  update(data) {
    this.el.textContent = `Item ${data}`;
  }
}

const ul = list("ul", Li);

mount(document.body, ul);

ul.update([1, 2, 3]);
ul.update([2, 3, 4]);

We create an Li component that has the li element.

We just set the text content to an array of items and it’ll automatically be rendered into multiple li elements each with the entry.

Also, we can set the styles and content simultaneously:

import { el, list, mount } from "redom";

class Li {
  constructor() {
    this.el = el("li");
  }
  update(data, index, items, context) {
    this.el.style.color = context.colors.accent;
    this.el.textContent = `[${index}] - ${data}`;
  }
}

const ul = list("ul", Li);

mount(document.body, ul);

ul.update([1, 2, 3], { colors: { accent: "green" } });

We have the context with an object with the styles.

And textContent has the text content.

Component Lifecycle

Components have their own lifecycles.

We can add the following methods to our component to run code at various stages of the lifecycle:

import { el, mount } from "redom";

class Hello {
  constructor() {
    this.el = el("h1", "Hello world");
  }
  onmount() {
    console.log("mounted Hello");
  }
  onremount() {
    console.log("remounted Hello");
  }
  onunmount() {
    console.log("unmounted Hello");
  }
}

class App {
  constructor() {
    this.el = el("app", (this.hello = new Hello()));
  }
  onmount() {
    console.log("mounted App");
  }
  onremount() {
    console.log("remounted App");
  }
  onunmount() {
    console.log("unmounted App");
  }
}

const app = new App();
mount(document.body, app);

onmount is run when the component mounts.

onremount is run when we mount the element again.

onunmount is run when the component unmounts.

Update Keyed Lists

Re:dom can update items by its key.

For example, we can write:

import { el, list, mount } from "redom";

class Li {
  constructor() {
    this.el = el("li");
  }
  update(data) {
    this.el.textContent = data.name;
  }
}

const ul = list("ul", Li, "id");

mount(document.body, ul);

ul.update([
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
  { id: 3, name: "Item 3" }
]);

setTimeout(() => {
  ul.update([
    { id: 3, name: "Item 3" },
    { id: 2, name: "Item 2" }
  ]);
}, 1000);

We pass the property name of the ID as the 3rd argument.

Then the list will be updated accordingly.

Conclusion

We can update our components in many ways with Re:dom.