Keyed lists causing re-render

This issue has been tracked since 2022-11-23.

I have just tried the library and it's quite impressive for a such small code but I'm having an issue with list and map. We can use .key() to avoid creating new item but the problem happens when we use

  return t`
        ${() => => TodoItem(todo).key( )}

The problem with this loop, it will rerender every list item even if we only edit one element todos[1].title for instance.


The system could proxy the map méthod to "memo" the value and only rerun the method when the item in the array changed.

justin-schroeder wrote this answer on 2022-11-24

This depends on how your TodoItem is structured. If it renders its props also using arrow fns, those should be isolating boundaries preventing the list from re-rendering.

It is still quite experimental however so if it’s not actually doing that properly it wouldn’t be a huge shock, are you able to provide a reproduction?

Grafikart wrote this answer on 2022-11-24

Here is an example of the problem (I just kept the code linked to the issue)

import { r, t} from "@arrow-js/core";

const root = document.querySelector("#root");
const endpoint = "";

const TodoItem = (todo) => {
  return t`<li>
    <span>${() => todo.title}</span>
    <input type="text" name="title" value="${todo.title}" @input="${(e) => todo.title = e.currentTarget.value}">
  </li> `;

const TodoList = () => {
  const state = r({
    loading: true,
    todos: [],

  fetch(endpoint).then(r => r.json()).then(todos => {
    state.loading = false
    state.todos = todos

  return t`
      ${() => state.loading && t`<div>Chargement...</div>`}
        ${() => => TodoItem(todo).key(}


I created a CodeSandbox to illustrate the problem. When I input a letter in an input, the whole list is rerendered and we loose the focus.

justin-schroeder wrote this answer on 2022-11-24

Hmm..interesting. It seems this is related to using keys specifically — If I remove the keys, all good:

More Details About Repo
Owner Name justin-schroeder
Repo Name arrow-js
Full Name justin-schroeder/arrow-js
Language TypeScript
Created Date 2022-11-08
Updated Date 2023-03-28
Star Count 1240
Watcher Count 21
Fork Count 22
Issue Count 7


Issue Title Created Date Updated Date