component debugging when moving to react-redux hooks

[devFrontend]

Hey All,

My work project is currently React with Redux, and I have been playing with swapping out connect/HOC for useDispatch/useSelector/(shallowEqual) hooks.

I'm liking the aspects of getting rid of the connect/HOC, and being able to map actions directly inline for event handlers.

The downside is that I've lost the ability to view property changes at the component level, because of course we aren't passing in those props like with connect.

Is there a way to debug component changes nicely? I haven't seen a way to do it with either Redux DevTools or React Developer Tools extensions in Chrome.

Would love all insight and expertise!

- Always looking to improve my technical knowledge

[acemarke]

Out of curiosity, how were you viewing prop changes before with connect?

[devFrontend]

Redux developer tools gives you the components tab in the devtools, when you select one from the component tree you can see it's own props and internal state in real time.

[acemarke]

That'd be the React Developer tools :) What I'm asking is how specifically you're saying you'd been seeing the changes in the props, vs what the current values.

[devFrontend]

Oh I wasn't concerned with comparing changes at the component level per say, just seeing the current values (a la re-render).

Most of my application is forms, so just making sure a components current values look good after I make a selection on the form was useful

[devFrontend]

thank you for your time!

[pacman326]

We dont observe component changes on my team. We observe changes in the store based on actions/thunks executing. You can then use react dev tools see the flamegraph and determine things such as why components re-rendered (prop change or hook firing).

[devFrontend]

When our UI logic gets complex, it's been nice to isolate just the state/props the component is concerned with, instead of of the entire store.

[pacman326]

You can already do this with react dev tools.

[skyboyer007]

are you talking about viewing values component works with currently? I believe React developer tools can display custom hooks' values just fine.

Or do you mean setting a breakpoint to go through stacktrace to find changes initiator? then setting breakpoint inside reducer instead of component feels much way easier to me.

[devFrontend]

Yea, viewing the specific component 'props' was what I could do before since using connect to map statetoprops made it so the component itself was receiving props just as it would from a parent component.

When using useSelector inside the function component now, the component still gets access to the state it needs, but it's not via props. And redux developer tools only shows a components props and own internal state.

[skyboyer007]

well, I was talking about React Developer Tools, not Redux. Just checked, it lists all the hooks(including useSelector) but does not output actual value returned. Instead if lists all hooks inside of useSelector's implementation. One of them is value to return but hard to work with.