

Show HN: React-hn – Supports all Hacker News API v0 item types - insin
https://github.com/insin/react-hn

======
fudged71
Auto-updating has a lot of potential but also a few usability concerns.

You'll find on other auto-updating comment systems that "x new comments" is
introduced so that you don't lose the spot you were viewing and you have the
choice of seeing the new comments or not.

Animations and color can be used to show the movement, appearance, and
disappearance of items. This would be great for seeing how votes and positions
of items are changing.

~~~
insin
Hoping to experiment with some of that soon.

I implemented "x new comments" for Hacker New as a userscript [1]. Thinking of
doing something similar by having new comments add themselves as "new" if
you're already on a page and caching the max comment id seen in localStorage
for when you revisit.

This API really needs something sitting with the websocket always open on the
backend to do some caching, particularly for comment counts.

If top stories were being cached and data passed top-down rather than fetched
individually as with this hack, you could even reuse the same React components
to pre-render on the server.

[1]
[https://twitter.com/jbscript/status/462657449497874432/photo...](https://twitter.com/jbscript/status/462657449497874432/photo/1)

------
swartkrans
I like it and I very much like react.js, but there's a very bad flash of no
content followed by quick iterative loading, a frequent problem with pure
JavaScript applications. I bet your react component's render is calling
multiple times for each new item you load, and that seems unnecessary. I
realize react says you shouldn't worry about this, but there I doubt that
multiple renders are going to be faster than a single render as with each
render the CSS has to be recalculated by the browser. When the browser parses
pure HTML and renders Hacker News proper, it's not that slow, you do not see
each item load.

~~~
boucher
The issue is more likely the timing of the data arrival than just because
render is being called multiple times. It would be pretty easy to fix.

I actually have been really pleased with the combination of a few related
react packages (mostly react-async) put together in this sort of quickstart
repo:

[https://github.com/andreypopp/react-
quickstart](https://github.com/andreypopp/react-quickstart)

It's extremely easy to write a primarily client side app that still prefetches
its data and renders the initial HTML on the server (which would completely
eliminate the issue here).

~~~
andreypopp
Uhm... no, I don't think react-async is a good way to manage data flow in
React applications. I wrote it when I started to work with React but now I
consider React Async an anti-pattern.

~~~
colinramsay
Have you considered marking it as deprecated on the repo's readme? I'd be
interested in reading your thought processes between writing react-async and
decided it was an anti-pattern.

~~~
andreypopp
I've added a paragraph to the README. Basically UI lifecycle and data flow
should be decoupled. React component's state (which is used by React Async to
store data) is for UI state and not for data.

~~~
colinramsay
Thanks!

------
me_so_happy
Woooooooohooo!

