Skip to content

Commit 17ca4b1

Browse files
authored
Fix useResourceEffect in Fizz (facebook#31758)
We're seeing errors when testing useResourceEffect in SSR and it turns out we're missing the noop dispatcher function on Fizz. I tested a local build with this change and it resolved the late mutation errors in the e2e tests.
1 parent 4dff0e6 commit 17ca4b1

File tree

2 files changed

+54
-0
lines changed

2 files changed

+54
-0
lines changed

packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ let useRef;
2727
let useImperativeHandle;
2828
let useInsertionEffect;
2929
let useLayoutEffect;
30+
let useResourceEffect;
3031
let useDebugValue;
3132
let forwardRef;
3233
let yieldedValues;
@@ -51,6 +52,7 @@ function initModules() {
5152
useImperativeHandle = React.useImperativeHandle;
5253
useInsertionEffect = React.useInsertionEffect;
5354
useLayoutEffect = React.useLayoutEffect;
55+
useResourceEffect = React.experimental_useResourceEffect;
5456
forwardRef = React.forwardRef;
5557

5658
yieldedValues = [];
@@ -653,6 +655,52 @@ describe('ReactDOMServerHooks', () => {
653655
});
654656
});
655657

658+
describe('useResourceEffect', () => {
659+
gate(flags => {
660+
if (flags.enableUseResourceEffectHook) {
661+
const yields = [];
662+
itRenders(
663+
'should ignore resource effects on the server',
664+
async render => {
665+
function Counter(props) {
666+
useResourceEffect(
667+
() => {
668+
yieldValue('created on client');
669+
return {resource_counter: props.count};
670+
},
671+
[props.count],
672+
resource => {
673+
resource.resource_counter = props.count;
674+
yieldValue('updated on client');
675+
},
676+
[props.count],
677+
() => {
678+
yieldValue('cleanup on client');
679+
},
680+
);
681+
return <Text text={'Count: ' + props.count} />;
682+
}
683+
684+
const domNode = await render(<Counter count={0} />);
685+
yields.push(clearLog());
686+
expect(domNode.tagName).toEqual('SPAN');
687+
expect(domNode.textContent).toEqual('Count: 0');
688+
},
689+
);
690+
691+
it('verifies yields in order', () => {
692+
expect(yields).toEqual([
693+
['Count: 0'], // server render
694+
['Count: 0'], // server stream
695+
['Count: 0', 'created on client'], // clean render
696+
['Count: 0', 'created on client'], // hydrated render
697+
// nothing yielded for bad markup
698+
]);
699+
});
700+
}
701+
});
702+
});
703+
656704
describe('useContext', () => {
657705
itThrowsWhenRendering(
658706
'if used inside a class component',

packages/react-server/src/ReactFizzHooks.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import {
4343
enableUseEffectEventHook,
4444
enableUseMemoCacheHook,
4545
enableAsyncActions,
46+
enableUseResourceEffectHook,
4647
} from 'shared/ReactFeatureFlags';
4748
import is from 'shared/objectIs';
4849
import {
@@ -870,6 +871,11 @@ if (enableAsyncActions) {
870871
HooksDispatcher.useFormState = useActionState;
871872
HooksDispatcher.useActionState = useActionState;
872873
}
874+
if (enableUseResourceEffectHook) {
875+
HooksDispatcher.useResourceEffect = supportsClientAPIs
876+
? noop
877+
: clientHookNotSupported;
878+
}
873879

874880
export let currentResumableState: null | ResumableState = (null: any);
875881
export function setCurrentResumableState(

0 commit comments

Comments
 (0)