← Back to Home

React Hooks Execution Order (With React Compiler)

Check the browser console to see the order of hook execution with React Compiler enabled.

Parent (Compiler)

Count: 0

Memoized: 0

Reducer State: 0

Context Value: 0

ParentWrapper (Compiler)

Count: 0

Memoized: 0

Reducer State: 0

Kid (Compiler)

Count: 0

Memoized: 0

Reducer State: 0

Grandkid (Compiler)

Count: 0

Memoized: 0

Reducer State: 0

Context Value: 0

AsyncChild Component (Compiler)

Async data loaded after 2s (key: async-child-compiler)

Count: 0

Memoized: 0

Reducer State: 0

Context Value: 0

AsyncChild Dynamic Component (Compiler) (SSR: false)

Async data loaded after 2s (key: async-child-dynamic-compiler)

Count: 0

Memoized: 0

Reducer State: 0

Context Value: 0

Kid2 (Compiler)

Count: 0

Optimistic Count: 0

Memoized: 0

Reducer State: 0

Optimistic Value: 0

Context Value: 0

Transition Pending: No