Visualizing State with React Dev Tools

If you follow #reactjs on Twitter, you may have noticed a lot of excitement about @jaredforsyth’s new React DevTools. The post New React Devtools Beta has tips and keyboard shortcuts.

I’ve installed and played with it a bit, but it wasn’t until this morning that I realized the biggest value in it – highlighting changes.

The docs say it highlights prop changes. Better yet: it also highlights state changes for the selection. Here you can see that “Show More” increments ProjectGrid’s showHowMany .

Visualizing Debouncing

React.rocks uses a debounced input for searches. Searching on every keystroke would be bad UX. The user types, changing the state of the input. Only after 300 ms of inactivity is the search executed. State becomes props.

Summary

This new React Devtools fixes annoying bugs and adds new features like navigate to source. But its biggest value is visually showing us how our app state changes over time.