Skip to content

Instantly share code, notes, and snippets.

@acdlite
Last active Jun 11, 2021
Embed
What would you like to do?
Prefetching in React
function prefetch(getKey, getValue, getInitialValue, propName) {
const inFlight = new Set();
const cache = new Map();
return ChildComponent => {
return class extends React.Component {
state = {value: getInitialValue(this.props)};
componentWillReceiveProps(nextProps) {
const key = getKey(nextProps);
if (cache.has(key)) {
// Use cached value
this.setState({value: cache.get(key)});
}
}
async componentWillUpdate(nextProps) {
const key = getKey(nextProps);
if (cache.has(key) || inFlight.has(key)) {
// Request already in-flight
return;
}
inFlight.add(key);
const value = await getValue(key);
inFlight.delete(key);
cache.set(key, value);
this.setState({value});
}
render() {
const props = {[propName]: this.state.value};
return <ChildComponent {...props} />;
}
};
};
}
// Can use on multiple components, will share same internal cache
const prefetchThing = prefetch(
props => props.thingId,
thingId => fetch(`/api/thing/${thingId}`),
() => null,
'thing'
);
function View({thing}) {
if (user === null) {
return <LoadingSpinner />;
}
return <BlahBlahRealCode thing={thing} />;
}
export default prefetchThing(View);
@acdlite

This comment has been minimized.

Copy link
Owner Author

@acdlite acdlite commented Jul 20, 2017

Didn't proofread, probably bugs!

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