I made an app to visualize React Hooks flow

Are you using React hooks in your projects? If you're like me then you probably might had ran into weird or unexpected re-renders.

I made a React app that lets you visualize the flow in which (some) React hooks are executed. Here's the list of hooks/actions that were considered for this app:

• Lazy Initial State
• useState
• useEffect
• Clean up effects
• Rendering of a component
• Unmounting of a component

The app is based on Donavon West's React hooks flow diagram.

Here's the link to the app and also the link to the source code in case you want to check it out 😁

Hopefully you'll find this useful and any feedback will be very much received 🙌

Comments

[Ignacio Aguirrezabal]

This is great! Thanks for sharing