5 ms·

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 hav

by boucher 12y ago

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).

swartkrans 12y ago
I like the idea of prefetching data if it is done apart from serving the HTTP response, blocking an HTTP response for an API call seems problematic. Hacker News doesn't update that frequently so it could be scheduled independently of a page load, every so many seconds or invalidate a cache and just make one out of every n requests load slow. Firebase has a node.js SDK so it's possible to do that pre-fetching server side too.
- boucher 12y ago
  With the right set of abstractions, you can use an API to get data from the client side, and a direct local database lookup (or cache here, or whatever) on the server. This is, of course, a bit more difficult than the simplest version, and probably isn't worth it until you're further along.
- couchand 12y ago
  +1 for using the Firebase API for realtime notifications rather than rolling your own API polling. Moreover, their API is consistent between the browser and Node.js clients, so almost all the application code can be shared. Just inject the appropriate client and away you go.
andreypopp 12y ago
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.
- boucher 12y ago
  Interesting. I actually ended up not using react-async, because we were trying to manage all the data at the top level, but I'm not entirely convinced that's the way to go (at least not for every app). I just started playing around with react pretty recently, and it definitely seems like people's opinions about how to structure things have shifted pretty quickly.
- colinramsay 12y ago
  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 12y ago
    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 12y ago
      Thanks!
- swartkrans 12y ago
  Why do you think it's an anti-pattern?

by boucher 12y ago

swartkrans 12y ago

I like the idea of prefetching data if it is done apart from serving the HTTP response, blocking an HTTP response for an API call seems problematic. Hacker News doesn't update that frequently so it could be scheduled independently of a page load, every so many seconds or invalidate a cache and just make one out of every n requests load slow. Firebase has a node.js SDK so it's possible to do that pre-fetching server side too.

boucher 12y ago
With the right set of abstractions, you can use an API to get data from the client side, and a direct local database lookup (or cache here, or whatever) on the server. This is, of course, a bit more difficult than the simplest version, and probably isn't worth it until you're further along.
couchand 12y ago
+1 for using the Firebase API for realtime notifications rather than rolling your own API polling. Moreover, their API is consistent between the browser and Node.js clients, so almost all the application code can be shared. Just inject the appropriate client and away you go.

andreypopp 12y ago

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.

boucher 12y ago
Interesting. I actually ended up not using react-async, because we were trying to manage all the data at the top level, but I'm not entirely convinced that's the way to go (at least not for every app). I just started playing around with react pretty recently, and it definitely seems like people's opinions about how to structure things have shifted pretty quickly.
colinramsay 12y ago
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 12y ago
  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 12y ago
    Thanks!
swartkrans 12y ago
Why do you think it's an anti-pattern?