JSFiddle - React, Tailwind, and code Playground

by Lars Holm Jensen

HTML

<nav id="demo-nav"></nav>
<div class="controls">
  <button onClick="runArrow()"><img src="/img/logo.png" class="arrow" alt="ArrowJS"></button>
  <p>Test: 500 list items, each changing their own value on a 10ms timeout. Refresh before click Arrow.</p>
</div>
<div id="arrow"></div>

CSS

ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
li {
  display: block;
  width: 10%;
  border: 1px solid var(--gray-l);
  border-width: 0 1px 1px 0;
  box-sizing: border-box;
  padding: .25em;
}
button {
  background-color: white;
  padding: .5em;
  border: 2px solid var(--gray-l);
  border-radius: .5em;
}
button img {
  height: 30px;
}
.controls {
  padding: 1em;
  border-bottom: 1px solid var(--gray-l);
}
p {
  margin-bottom: 0;
  font-size: .875em;
}

JavaScript

import { t, r } from 'https://www.arrow-js.com/dev/index.js';
const el = document.getElementById('arrow');
const token = () => Math.random().toString(36).substring(2, 10);
const list = [];
for (let i = 0; i < 400; i++) {
  list.push({name: token(), id: i });
}

window.runArrow = function(){
  const data = r({
    list
  });
  
  t`
<ul>
${data.list.map(item => t`<li>${() => item.name}</li>`)}
</ul>`(el);

  const go = () => {
    data.list.forEach(item => {
      setTimeout(() => {
        item.name = token()
      }, 10);
    })
    setTimeout(go, 10);
  }
  go();
}