FG
๐Ÿ’ป Software๐ŸŒ Web & Full-Stack

Implement Sideways Data Loading

Freshover 7 years ago
Mar 14, 20260 views
Confidence Score87%
87%

Problem

This is a first-class API for sideways data loading of stateless (although potentially memoized) data from a global store/network/resource, potentially using props/state as input. [code block] observe() executes after componentWillMount/componentWillUpdate but before render. For each key/value in the record. Subscribe to the Observable in the value. [code block] We allow onNext to be synchronously invoked from subscribe. If it is, we set: [code block] Otherwise we leave it as undefined for the initial render. (Maybe we set it to null?) Then render proceeds as usual. Every time onNext gets invoked, we schedule a new "this.data[key]" which effectively triggers a forcedUpdate on this component. If this is the only change, then observe is not reexecuted (componentWillUpdate -> render -> componentDidUpdate). If props / state changed (i.e. an update from recieveProps or setState), then observe() is reexecuted (during reconciliation). At this point we loop over the new record, and subscribe to all the new Observables. After that, unsubscribe to the previous Observables. [code block] This ordering is important since it allows the provider of data to do reference counting of their cache. I.e. I can cache data for as long as nobody listens to it. If I unsubscribed immediately, then the reference count would go down to zero before I subscribe to the same data again. When a component is unmounted, we automatically unsubscribe from all the active subscriptions. If the new

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Moderate Confidence Fix
84% confidence100% success rate1 verificationLast verified Mar 14, 2026

Solution: Implement Sideways Data Loading

Low Risk

`undefined` is probably the safest value to assign to `data` until the observable provides its first value via `onNext`. For example in Relay we assign different meanings to `null` (data does not exist) and `undefined` (not yet fetched), so our ideal default data value would be `undefined`. The alternative is to provide a new method, eg `getInitialData`, but I suspect this is unnecessary/overkill.

84

Trust Score

1 verification

100% success
  1. 1

    `undefined` is probably the safest value to assign to `data` until the observabl

    `undefined` is probably the safest value to assign to `data` until the observable provides its first value via `onNext`. For example in Relay we assign different meanings to `null` (data does not exist) and `undefined` (not yet fetched), so our ideal default data value would be `undefined`. The alternative is to provide a new method, eg `getInitialData`, but I suspect this is unnecessary/overkill.

Validation

Resolved in facebook/react GitHub issue #3398. Community reactions: 0 upvotes.

Verification Summary

Worked: 1
Last verified Mar 14, 2026

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

reactjavascripttype:-big-picturecomponent:-component-api