857ee8cdf9
This disables symbol renaming in production builds. The original variable and function names are preserved. All other forms of compression applied by Closure (dead code elimination, inlining, etc) are unchanged — the final program is identical to what we were producing before, just in a more readable form. The motivation is to make it easier to debug React issues that only occur in production — the same reason we decided to start shipping sourcemaps in #28827 and #28827. However, because most apps run their own minification step on their npm dependencies, it's not necessary for us to minify the symbols before publishing — it'll be handled the app, if desired. This is the same strategy Meta has used to ship React for years. The React build itself has unminified symbols, but they get minified as part of Meta's regular build pipeline. Even if an app does not minify their npm dependencies, gzip covers most of the cost of symbol renaming anyway. This saves us from having to ship sourcemaps, which means even apps that don't have sourcemaps configured will be able to debug the React build as easily as they would any other npm dependency.
use-subscription
React Hook for subscribing to external data sources.
You may now migrate to use-sync-external-store directly instead, which has the same API as React.useSyncExternalStore. The use-subscription package is now a thin wrapper over use-sync-external-store and will not be updated further.
Installation
# Yarn
yarn add use-subscription
# NPM
npm install use-subscription
Usage
To configure a subscription, you must provide two methods: getCurrentValue and subscribe.
In order to avoid removing and re-adding subscriptions each time this hook is called, the parameters passed to this hook should be memoized. This can be done by wrapping the entire subscription with useMemo(), or by wrapping the individual callbacks with useCallback().
Subscribing to event dispatchers
Below is an example showing how use-subscription can be used to subscribe to event dispatchers such as DOM elements.
import React, { useMemo } from "react";
import { useSubscription } from "use-subscription";
// In this example, "input" is an event dispatcher (e.g. an HTMLInputElement)
// but it could be anything that emits an event and has a readable current value.
function Example({ input }) {
// Memoize to avoid removing and re-adding subscriptions each time this hook is called.
const subscription = useMemo(
() => ({
getCurrentValue: () => input.value,
subscribe: callback => {
input.addEventListener("change", callback);
return () => input.removeEventListener("change", callback);
}
}),
// Re-subscribe any time our input changes
// (e.g. we get a new HTMLInputElement prop to subscribe to)
[input]
);
// The value returned by this hook reflects the input's current value.
// Our component will automatically be re-rendered when that value changes.
const value = useSubscription(subscription);
// Your rendered output goes here ...
}
Subscribing to observables
Below are examples showing how use-subscription can be used to subscribe to certain types of observables (e.g. RxJS BehaviorSubject and ReplaySubject).
Note that it is not possible to support all observable types (e.g. RxJS Subject or Observable) because some provide no way to read the "current" value after it has been emitted.
BehaviorSubject
const subscription = useMemo(
() => ({
getCurrentValue: () => behaviorSubject.getValue(),
subscribe: callback => {
const subscription = behaviorSubject.subscribe(callback);
return () => subscription.unsubscribe();
}
}),
// Re-subscribe any time the behaviorSubject changes
[behaviorSubject]
);
const value = useSubscription(subscription);
ReplaySubject
const subscription = useMemo(
() => ({
getCurrentValue: () => {
let currentValue;
// ReplaySubject does not have a sync data getter,
// So we need to temporarily subscribe to retrieve the most recent value.
replaySubject
.subscribe(value => {
currentValue = value;
})
.unsubscribe();
return currentValue;
},
subscribe: callback => {
const subscription = replaySubject.subscribe(callback);
return () => subscription.unsubscribe();
}
}),
// Re-subscribe any time the replaySubject changes
[replaySubject]
);
const value = useSubscription(subscription);