we areKangaroo Cloud Stack UED Team, committed to creating excellent one-stop data middle platform products. We always maintain the craftsman spirit, explore the front-end path, and accumulate and spread experience value for the community.
Author of this article: Xiuneng
If you study without thinking, you will be confused; if you think without learning, you will be in danger. --- "The Analects of Confucius·Politics"
What
useSyncExternalStoreis a React Hook that lets you subscribe to an external store.
useSyncExternalStoreIt is a Hook that allows users to subscribe to external storage.Official Documentation
const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)
Why
First, we abstract a simple version of mini-molecule based on the version here.
import { EventBus } from "../utils";
type Item = { key: string };
// Declare an event subscription
const eventBus = new EventBus();
// Declare the module data type
class Model {
constructor(public data: Item[] = [], public current?: string) {}
}
export class Service {
protected state: Model;
constructor() {
= new Model();
}
setState(nextState: Partial<Model>) {
= { ..., ...nextState };
();
}
private render(state: Model) {
("render", state);
}
}export default function Home() {
const state = useExternal();
if (!state) return <div>loading...</div>;
return (
<>
<strong>{ || "empty"}</strong>
<ul>
{((i) => (
<li key={}>{}</li>
))}
</ul>
</>
);
}
const service = new Service();
function useExternal() {
const [state, setState] = useState<Model | undefined>(undefined);
useEffect(() => {
setState(());
((next) => {
setState(next);
});
}, []);
return state;
}
As shown in the above code, it has been implemented to obtain relevant data from external storage, listen to the update of external data, and trigger the update of function components.
Next, update external data operations.
export default function Home() {
const state = useExternal();
if (!state) return <div>loading...</div>;
return (
<>
<ul>
{((i) => (
<li key={}>{}</li>
))}
</ul>
+ <button onClick={() => (`${new Date().valueOf()}`)}>
+ add list
+ </button>
</>
);
}
In fact, what you need to do is to add a trigger button to modify the data.
The useExternal supported in the above relatively simple scenario is also relatively simple to write. When your scenario becomes more complex, the more you need to think about. This will lead to the increasing complexity of the project. At this time, if there is an official API produced and the React team endorsed by the API will be much more comfortable.
The following is the shim version related code of useSyncExternlaStore:
function useSyncExternalStore(subscribe, getSnapshot, // Note: The shim does not use getServerSnapshot, because pre-18 versions of
// React do not expose a way to check if we're hydrating. So users of the shim
// will need to track that themselves and return the correct value
// from `getSnapshot`.
getServerSnapshot) {
{
if (!didWarnOld18Alpha) {
if ( !== undefined) {
didWarnOld18Alpha = true;
error('You are using an outdated, pre-release alpha of React 18 that ' + 'does not support useSyncExternalStore. The ' + 'use-sync-external-store shim will not work correctly. Upgrade ' + 'to a newer pre-release.');
}
}
} // Read the current snapshot from the store on every render. Again, this
// breaks the rules of React, and only works here because of specific
// implementation details, most importantly that updates are
// always synchronous.
var value = getSnapshot();
{
if (!didWarnUncachedGetSnapshot) {
var cachedValue = getSnapshot();
if (!objectIs(value, cachedValue)) {
error('The result of getSnapshot should be cached to avoid an infinite loop');
didWarnUncachedGetSnapshot = true;
}
}
} // Because updates are synchronous, we don't queue them. Instead we force a
// re-render whenever the subscribed state changes by updating an some
// arbitrary useState hook. Then, during render, we call getSnapshot to read
// the current value.
//
// Because we don't actually use the state returned by the useState hook, we
// can save a bit of memory by storing other stuff in that slot.
//
// To implement the early bailout, we need to track some things on a mutable
// object. Usually, we would put that in a useRef hook, but we can stash it in
// our useState hook instead.
//
// To force a re-render, we call forceUpdate({inst}). That works because the
// new object always fails an equality check.
var _useState = useState({
inst: {
value: value,
getSnapshot: getSnapshot
}
}),
inst = _useState[0].inst,
forceUpdate = _useState[1]; // Track the latest getSnapshot function with a ref. This needs to be updated
// in the layout phase so we can access it during the tearing check that
// happens on subscribe.
useLayoutEffect(function () {
= value;
= getSnapshot; // Whenever getSnapshot or subscribe changes, we need to check in the
// commit phase if there was an interleaved mutation. In concurrent mode
// this can happen all the time, but even in synchronous mode, an earlier
// effect may have mutated the store.
if (checkIfSnapshotChanged(inst)) {
// Force a re-render.
forceUpdate({
inst: inst
});
}
}, [subscribe, value, getSnapshot]);
useEffect(function () {
// Check for changes right before subscribing. Subsequent changes will be
// detected in the subscription handler.
if (checkIfSnapshotChanged(inst)) {
// Force a re-render.
forceUpdate({
inst: inst
});
}
var handleStoreChange = function () {
// TODO: Because there is no cross-renderer API for batching updates, it's
// up to the consumer of this library to wrap their subscription event
// with unstable_batchedUpdates. Should we try to detect when this isn't
// the case and print a warning in development?
// The store changed. Check if the snapshot changed since the last time we
// read from the store.
if (checkIfSnapshotChanged(inst)) {
// Force a re-render.
forceUpdate({
inst: inst
});
}
}; // Subscribe to the store and return a clean-up function.
return subscribe(handleStoreChange);
}, [subscribe]);
useDebugValue(value);
return value;
}
How
Renovate the above examples
const service = new Service();
export default function Home() {
const state = useSyncExternalStore(
(cb) => () => (cb),
(service)
);
if (!state) return <div>loading...</div>;
return (
<>
<ul>
{((i) => (
<li key={}>{}</li>
))}
</ul>
<button onClick={() => (`${new Date().valueOf()}`)}>
add list
</button>
</>
);
}
Use in Molecule
import { useContext, useMemo } from 'react';
import type { IMoleculeContext } from 'mo/types';
import { useSyncExternalStore } from 'use-sync-external-store/shim';
import { Context } from '../context';
type Selector = keyof IMoleculeContext;
type StateType<T extends keyof IMoleculeContext> = ReturnType<IMoleculeContext[T]['getState']>;
export default function useConnector<T extends Selector>(selector: T) {
const { molecule } = useContext(Context);
const target = useMemo(() => molecule[selector], [molecule]);
const subscribe = useMemo(() => {
return (notify: () => void) => {
(notify);
return () => (notify);
};
}, []);
return useSyncExternalStore(subscribe, () => ()) as StateType<T>;
}
at last
Welcome to follow [Kangaroo Cloud Sender UED Team] ~
Kangaroo Cloud Data Stack UED team continues to share technical achievements for developers and has successively participated in open source welcome star
- Big data distributed task scheduling system——Taier
- Lightweight Web IDE UI framework—Molecule
- SQL Parser project for the big data field—dt-sql-parser
- Kangaroo Cloud Data Stack Front-end Team Code Review Engineering Practice Document-code-review-practices
- A faster, more flexible configuration and simpler module packer - ko
- Ant-design-testing library for component testing tools for antd