New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Data fetching - on load vs on demand? #577

Closed
moshekatz opened this Issue Feb 6, 2019 · 1 comment

Comments

Projects
None yet
2 participants
@moshekatz
Copy link

moshekatz commented Feb 6, 2019

Hi there!
I'm wondering when to use one over the other (or maybe a combination of both)?

Things to consider:

  1. Handling a lot of requests (I guess with some sort of caching)
  2. The data doesn't change very often, and even if it does - it's ok to wait for a page refresh

Stuff I though about

Fetching on load:

  • (-) slows down initial load
  • (-) handling race conditions for some use cases (therefore probably introducing additional async API)
  • (+) after a single request, I can access the data synchronously through cache (most use cases)
// onLoadApi.js
const cache = {};

/* ...fetching logic to fill the cache... */

const get = key => cache[key];
const getAsync = key => /* reading from cache or waiting for the response */

export { get, getAsync }

// usageOnLoad.js
import { get, getAsync } from './onLoadApi'; 

const value = get('key');
const otherValue = await getAsync('otherKey');

Fetching on demand:

  • (+) no effect on initial loading
  • (-) accessing the data asynchronously in all use cases
  • (+) no need for multiple API's, always returns a Promise
// onDemandApi.js
const cache = {};

const getAsync = key => /* reading from cache or fetching from server */

export { getAsync }

// usageOnDemand.js
import { getAsync } from './onDemandApi'; 

const anyValue = await getAsync('key');
@kentcdodds

This comment has been minimized.

Copy link
Owner

kentcdodds commented Feb 7, 2019

Hi @moshekatz!

Here's your audio answer!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment