| 1177 | return <div>Hi</div>; |
| 1178 | } |
| 1179 | function Parent() { |
| 1180 | useEffect(() => { |
| 1181 | Scheduler.log('Mount Parent'); |
| 1182 | return () => { |
| 1183 | Scheduler.log('Unmount Parent'); |
| 1184 | }; |
| 1185 | }, []); |
| 1186 | return <Child />; |
| 1187 | } |
| 1188 | |
| 1189 | function App({show}) { |
| 1190 | return ( |
| 1191 | <Activity mode={show ? 'visible' : 'hidden'}> |
| 1192 | <Parent /> |
| 1193 | </Activity> |
| 1194 | ); |
| 1195 | } |
| 1196 | |
| 1197 | const root = ReactNoop.createRoot(); |
| 1198 | await act(() => { |
| 1199 | root.render(<App show={true} />); |
| 1200 | }); |
| 1201 | assertLog(['Mount Child', 'Mount Parent']); |
| 1202 | |
| 1203 | // First demonstrate what happens during a normal deletion |
| 1204 | await act(() => { |
| 1205 | root.render(null); |
| 1206 | }); |
| 1207 | assertLog(['Unmount Parent', 'Unmount Child']); |
| 1208 | |
| 1209 | // Now redo the same thing but hide instead of deleting |
| 1210 | await act(() => { |
| 1211 | root.render(<App show={true} />); |
| 1212 | }); |
| 1213 | assertLog(['Mount Child', 'Mount Parent']); |
| 1214 | await act(() => { |
| 1215 | root.render(<App show={false} />); |
| 1216 | }); |
| 1217 | // The order is the same as during a deletion: parent before child |
| 1218 | assertLog(['Unmount Parent', 'Unmount Child']); |
| 1219 | }); |
| 1220 | |
| 1221 | // TODO: As of now, there's no way to hide a tree without also unmounting its |
| 1222 | // effects. (Except for Suspense, which has its own tests associated with it.) |