124 lines
4.9 KiB
JavaScript
124 lines
4.9 KiB
JavaScript
![]() |
/** @license React vundefined
|
|||
|
* use-subscription.development.js
|
|||
|
*
|
|||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|||
|
*
|
|||
|
* This source code is licensed under the MIT license found in the
|
|||
|
* LICENSE file in the root directory of this source tree.
|
|||
|
*/
|
|||
|
|
|||
|
'use strict';
|
|||
|
|
|||
|
if (process.env.NODE_ENV !== "production") {
|
|||
|
(function() {
|
|||
|
'use strict';
|
|||
|
|
|||
|
var _assign = require('object-assign');
|
|||
|
var react = require('react');
|
|||
|
|
|||
|
//
|
|||
|
// In order to avoid removing and re-adding subscriptions each time this hook is called,
|
|||
|
// the parameters passed to this hook should be memoized in some way–
|
|||
|
// either by wrapping the entire params object with useMemo()
|
|||
|
// or by wrapping the individual callbacks with useCallback().
|
|||
|
|
|||
|
function useSubscription(_ref) {
|
|||
|
var getCurrentValue = _ref.getCurrentValue,
|
|||
|
subscribe = _ref.subscribe;
|
|||
|
|
|||
|
// Read the current value from our subscription.
|
|||
|
// When this value changes, we'll schedule an update with React.
|
|||
|
// It's important to also store the hook params so that we can check for staleness.
|
|||
|
// (See the comment in checkForUpdates() below for more info.)
|
|||
|
var _useState = react.useState(function () {
|
|||
|
return {
|
|||
|
getCurrentValue: getCurrentValue,
|
|||
|
subscribe: subscribe,
|
|||
|
value: getCurrentValue()
|
|||
|
};
|
|||
|
}),
|
|||
|
state = _useState[0],
|
|||
|
setState = _useState[1];
|
|||
|
|
|||
|
var valueToReturn = state.value; // If parameters have changed since our last render, schedule an update with its current value.
|
|||
|
|
|||
|
if (state.getCurrentValue !== getCurrentValue || state.subscribe !== subscribe) {
|
|||
|
// If the subscription has been updated, we'll schedule another update with React.
|
|||
|
// React will process this update immediately, so the old subscription value won't be committed.
|
|||
|
// It is still nice to avoid returning a mismatched value though, so let's override the return value.
|
|||
|
valueToReturn = getCurrentValue();
|
|||
|
setState({
|
|||
|
getCurrentValue: getCurrentValue,
|
|||
|
subscribe: subscribe,
|
|||
|
value: valueToReturn
|
|||
|
});
|
|||
|
} // Display the current value for this hook in React DevTools.
|
|||
|
|
|||
|
|
|||
|
react.useDebugValue(valueToReturn); // It is important not to subscribe while rendering because this can lead to memory leaks.
|
|||
|
// (Learn more at reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects)
|
|||
|
// Instead, we wait until the commit phase to attach our handler.
|
|||
|
//
|
|||
|
// We intentionally use a passive effect (useEffect) rather than a synchronous one (useLayoutEffect)
|
|||
|
// so that we don't stretch the commit phase.
|
|||
|
// This also has an added benefit when multiple components are subscribed to the same source:
|
|||
|
// It allows each of the event handlers to safely schedule work without potentially removing an another handler.
|
|||
|
// (Learn more at https://codesandbox.io/s/k0yvr5970o)
|
|||
|
|
|||
|
react.useEffect(function () {
|
|||
|
var didUnsubscribe = false;
|
|||
|
|
|||
|
var checkForUpdates = function () {
|
|||
|
// It's possible that this callback will be invoked even after being unsubscribed,
|
|||
|
// if it's removed as a result of a subscription event/update.
|
|||
|
// In this case, React will log a DEV warning about an update from an unmounted component.
|
|||
|
// We can avoid triggering that warning with this check.
|
|||
|
if (didUnsubscribe) {
|
|||
|
return;
|
|||
|
} // We use a state updater function to avoid scheduling work for a stale source.
|
|||
|
// However it's important to eagerly read the currently value,
|
|||
|
// so that all scheduled work shares the same value (in the event of multiple subscriptions).
|
|||
|
// This avoids visual "tearing" when a mutation happens during a (concurrent) render.
|
|||
|
|
|||
|
|
|||
|
var value = getCurrentValue();
|
|||
|
setState(function (prevState) {
|
|||
|
// Ignore values from stale sources!
|
|||
|
// Since we subscribe an unsubscribe in a passive effect,
|
|||
|
// it's possible that this callback will be invoked for a stale (previous) subscription.
|
|||
|
// This check avoids scheduling an update for that stale subscription.
|
|||
|
if (prevState.getCurrentValue !== getCurrentValue || prevState.subscribe !== subscribe) {
|
|||
|
return prevState;
|
|||
|
} // Some subscriptions will auto-invoke the handler, even if the value hasn't changed.
|
|||
|
// If the value hasn't changed, no update is needed.
|
|||
|
// Return state as-is so React can bail out and avoid an unnecessary render.
|
|||
|
|
|||
|
|
|||
|
if (prevState.value === value) {
|
|||
|
return prevState;
|
|||
|
}
|
|||
|
|
|||
|
return _assign({}, prevState, {
|
|||
|
value: value
|
|||
|
});
|
|||
|
});
|
|||
|
};
|
|||
|
|
|||
|
var unsubscribe = subscribe(checkForUpdates); // Because we're subscribing in a passive effect,
|
|||
|
// it's possible that an update has occurred between render and our effect handler.
|
|||
|
// Check for this and schedule an update if work has occurred.
|
|||
|
|
|||
|
checkForUpdates();
|
|||
|
return function () {
|
|||
|
didUnsubscribe = true;
|
|||
|
unsubscribe();
|
|||
|
};
|
|||
|
}, [getCurrentValue, subscribe]); // Return the current value for our caller to use while rendering.
|
|||
|
|
|||
|
return valueToReturn;
|
|||
|
}
|
|||
|
|
|||
|
exports.useSubscription = useSubscription;
|
|||
|
})();
|
|||
|
}
|