Remix clone Hacker News

A lot of UIs have redundant data, it's very common to have the same data represented in different ways. Consider the comments page on HN, for example, which has plenty of duplicate information:

The list of comments on a submission tells you how many comments exist, but the comment count is also made explicit at the top of the page directly underneath the submission title.

If one person comments multiple times, their user name will appear multiple times on the page, despite being the same every time.

All the timestamps are presented as relative timestamps, which means they're all dependent on the current time.

Now this is a very simple page, and it's not so important that everything be updated live. But if it were, you'd need to update every single timestamp on the page, keep all of the usernames in sync in case a user changed their name, insert new comments while also updating the comment count, etc. There is a lot of redundancy in most UIs.

In fact, I vaguely remember one of the early React blog posts using a very similar example (I think something to do with Messenger?) to explain the benefits of having a data-driven framework rather than using the DOM as the source of truth for data. For a messaging application, it's much more important that everything be live, and that elements don't end up out-of-sync.

▲

wordofx 3 days ago | parent [-]

HN is static data. It doesn’t update. Re-rendering a user name 20 times doesn’t matter.

	▲	MrJohz 3 days ago \| parent [-]
		I wasn't trying to suggest that HN needs to update the UI like this, just give an example of how even a relatively simple UI like the one we're using now is full of duplicate data. I then also gave the example of a messaging app because that's a case where you do want everything in sync all the time. If you just rerender everything every time, then it's no problem to keep the whole UI in sync. But you probably don't want to render everything all the time - that's unnecessary work, and will break any stateful elements in the UI (such as form inputs that will get reset with every render). That's where the idea of React comes from: write code as if the whole UI is being rerendered every time, but internally only rerender the parts of the UI that have changed. Now that has its own disadvantages, and I think there are similar approaches out there, but the point is that keeping UIs in sync is a surprisingly hard problem.