({text})
| 874 | // @gate enableSuspendingDuringWorkLoop |
| 875 | it('when replaying a suspended component, reuses the hooks computed during the previous attempt (Memo)', async () => { |
| 876 | function ExcitingText({text}) { |
| 877 | // This computes the uppercased version of some text. Pretend it's an |
| 878 | // expensive operation that we want to reuse. |
| 879 | const uppercaseText = useMemo(() => { |
| 880 | Scheduler.log('Compute uppercase: ' + text); |
| 881 | return text.toUpperCase(); |
| 882 | }, [text]); |
| 883 | |
| 884 | // This adds an exclamation point to the text. Pretend it's an async |
| 885 | // operation that is sent to a service for processing. |
| 886 | const exclamatoryText = use(getAsyncText(uppercaseText + '!')); |
| 887 | |
| 888 | // This surrounds the text with sparkle emojis. The purpose in this test |
| 889 | // is to show that you can suspend in the middle of a sequence of hooks |
| 890 | // without breaking anything. |
| 891 | const sparklingText = useMemo(() => { |
| 892 | Scheduler.log('Add sparkles: ' + exclamatoryText); |
| 893 | return `✨ ${exclamatoryText} ✨`; |
| 894 | }, [exclamatoryText]); |
| 895 | |
| 896 | return <Text text={sparklingText} />; |
| 897 | } |
| 898 | |
| 899 | const root = ReactNoop.createRoot(); |
| 900 | await act(() => { |
nothing calls this directly
no test coverage detected