codejump
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"]
← All challenges