HardPro challengeJavaScriptTypeScript
useEffect Cleanup Order
ReactHooksEffects
Simulate React's effect cleanup ordering. Multiple effects on a component:
- On mount: effects run in declaration order.
- On unmount: cleanups run in reverse declaration order.
- On re-render: cleanups run (reverse order), then new effects (forward order).
solve(effects, renders) returns the log of all effect/cleanup calls.
Each render: { shouldRun: boolean[] } indicates which effects re-run.
Sample tests
Test #1Re-run all
Input: [2,[{"shouldRun":[true,true]}]]
Output: ["effect:0","effect:1","cleanup:1","cleanup:0","effect:0","effect:1"]
Test #2Re-run only first
Input: [2,[{"shouldRun":[true,false]}]]
Output: ["effect:0","effect:1","cleanup:0","effect:0"]
Test #3Three effects, reverse cleanup
Input: [3,[{"shouldRun":[true,true,true]}]]
Output: ["effect:0","effect:1","effect:2","cleanup:2","cleanup:1","cleanup:0","effect:0","effect:1","effect:2"]
Test #4No re-run
Input: [1,[{"shouldRun":[false]}]]
Output: ["effect:0"]
Test #5Mount only
Input: [2,[]]
Output: ["effect:0","effect:1"]