Hacker News new | past | comments | ask | show | jobs | submit login

You don't do that.

Why would fetching data depend on whatever is being rendered?

You know what data you need or not need before rendering anything, or you will be in a world of pain.




I am not sure I am following. Say your homepage has a link to a page that shows the top scorers in a league. Where/when does the fetching of the top scorers happen ?


Sure:

- Click the link to show top scorers

- Initiate fetching the data

- (The view may change to indicate you're loading the top scorers, if you want, that's a different matter).

- Receive the data, the view changes to display the data

This is opposed to:

- Click the link to show top scorers

- View changes to show top scorers component. A component loads, or mounts, or inits, or does something which triggers a data fetch

- Receive the data, the view changes to display the data

Your app "knows" you need the data when the user clicks the link, no need to involve the view components into this.

This gives you the ability of adding a lot of complexity to how you fetch the data that is best handled outside a UI component (like caching, reusing it in other components, error handling, retrying, throtling, whatever), while saving you from a whole class of problems where a misunderstood component lifecycle has consequences for your data. Frameworks like React or Angular are going to try to help you by caching outputs, reusing components, dropping updates for the same frame, prerendering, preloading or anything really. If you fetch data when a component does any of that, suddenly you have to care about it and fully understand it. The abstraction leaked. If you treat the component as close to a pure function as you can, things become much simpler.

This applies to relatively big, relatively complicated apps, controlled by a single entity, where it pays off to prioritize simplicity.


Okay, I get the idea. How are you solving these issues:

- how is the data fetch completion signalled to the component?

- how is the data piped into the component?

Would be happy to be pointed to some example code if you have.


> - how is the data fetch completion signalled to the component? > - how is the data piped into the component?

Both have the same answer. When you fetch the data you put it in the state, and then you render your components based only on that state.

If we're talking React the state makes it into the component through the props (pure UI component) or, if using Redux or similar, some kind of hook that triggers a rerender when the store changes (useSelector? My React-Redux is a bit rusty).

The point is not to worry anymore about change detection and rendering, because the framework takes care of it by being either fast enough that it can run on every change, or smart enough that it can tell when it's not necessary to re-render (caching, change detection).

Of course, this setup with redux etc makes a lot of sense for bigger apps with lots of state coming from different sources. I don't have any specific example I can point to, but any redux implementation examples could help. I use NgRx with Angular, and the docs are OK at explaining the flow of data.


Thanks, this was useful.




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: