maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix getSnapshot warning when a selector returns NaN (#23333) 

* fix getSnapshot warning when a selector returns NaN

useSyncExternalStoreWithSelector delegate a selector as
getSnapshot of useSyncExternalStore.

* Fiber's use sync external store has a same issue

* Small nits

We use Object.is to check whether the snapshot value has been updated,
so we should also use it to check whether the value is cached.

Co-authored-by: Andrew Clark <git@andrewclark.io>
This commit is contained in:
OGURA Daiki 2022-02-21 15:07:41 +09:00 committed by GitHub
parent 40eaa22d9a
commit 4de99b3ca6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/react-reconciler/src/ReactFiberHooks.new.js
View File

@ -1290,7 +1290,8 @@ function mountSyncExternalStore<T>(
nextSnapshot = getSnapshot();
if (__DEV__) {
if (!didWarnUncachedGetSnapshot) {
if (nextSnapshot !== getSnapshot()) {
const cachedSnapshot = getSnapshot();
if (!is(nextSnapshot, cachedSnapshot)) {
console.error(
'The result of getSnapshot should be cached to avoid an infinite loop',
);
@ -1362,7 +1363,8 @@ function updateSyncExternalStore<T>(
const nextSnapshot = getSnapshot();
if (__DEV__) {
if (!didWarnUncachedGetSnapshot) {
if (nextSnapshot !== getSnapshot()) {
const cachedSnapshot = getSnapshot();
if (!is(nextSnapshot, cachedSnapshot)) {
console.error(
'The result of getSnapshot should be cached to avoid an infinite loop',
);

6
packages/react-reconciler/src/ReactFiberHooks.old.js
View File

@ -1290,7 +1290,8 @@ function mountSyncExternalStore<T>(
nextSnapshot = getSnapshot();
if (__DEV__) {
if (!didWarnUncachedGetSnapshot) {
if (nextSnapshot !== getSnapshot()) {
const cachedSnapshot = getSnapshot();
if (!is(nextSnapshot, cachedSnapshot)) {
console.error(
'The result of getSnapshot should be cached to avoid an infinite loop',
);
@ -1362,7 +1363,8 @@ function updateSyncExternalStore<T>(
const nextSnapshot = getSnapshot();
if (__DEV__) {
if (!didWarnUncachedGetSnapshot) {
if (nextSnapshot !== getSnapshot()) {
const cachedSnapshot = getSnapshot();
if (!is(nextSnapshot, cachedSnapshot)) {
console.error(
'The result of getSnapshot should be cached to avoid an infinite loop',
);

27
packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
View File

@ -587,6 +587,33 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
);
});
test('getSnapshot can return NaN without infinite loop warning', async () => {
const store = createExternalStore('not a number');
function App() {
const value = useSyncExternalStore(store.subscribe, () =>
parseInt(store.getState(), 10),
);
return <Text text={value} />;
}
const container = document.createElement('div');
const root = createRoot(container);
// Initial render that reads a snapshot of NaN. This is OK because we use
// Object.is algorithm to compare values.
await act(() => root.render(<App />));
expect(container.textContent).toEqual('NaN');
// Update to real number
await act(() => store.set(123));
expect(container.textContent).toEqual('123');
// Update back to NaN
await act(() => store.set('not a number'));
expect(container.textContent).toEqual('NaN');
});
describe('extra features implemented in user-space', () => {
// The selector implementation uses the lazy ref initialization pattern
// @gate !(enableUseRefAccessWarning && __DEV__)

3
packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js
View File

@ -57,7 +57,8 @@ export function useSyncExternalStore<T>(
const value = getSnapshot();
if (__DEV__) {
if (!didWarnUncachedGetSnapshot) {
if (value !== getSnapshot()) {
const cachedValue = getSnapshot();
if (!is(value, cachedValue)) {
console.error(
'The result of getSnapshot should be cached to avoid an infinite loop',
);