useDebugValue: inconsistency in format

[vasilii-kovalev]

Marty the Money Bag 💰 says:

Should be in the end (according to the after image):

It seems it should be
useMedia(\`${query}\`) => ${state}

[vasilii-kovalev]

\`${query}\` => ${state} is in the video as well, so maybe it is easier to change the after image only.

[kentcdodds]

Thanks for letting me know @vasilii-kovalev!

Unfortunately, there's a bug in the current version of devtools. It nests the hooks even when they're not actually nested:

I saw @bvaughn on twitter the other day announce that there's a new release of the DevTools coming out soon, so hopefully that fixes the nesting and I'll update the screenshots.

[bvaughn]

Which version of DevTools are you both using?

Can you point me at a Code Sandbox repro of this?

[kentcdodds]

Ah, I think it may have something to do with https://github.com/kentcdodds/stop-runaway-react-effects

If I disable that, then this issue goes away. Interestingly, I can't reproduce this in a codesandbox: https://codesandbox.io/s/little-forest-f57g4 But if I download that codesandbox and run it locally then I do have the issue.

So it appears that this only happens when:

1. You're using stop-runaway-react-effects
2. You're running locally (not in codesandbox).

I understand if this is as far as your involvement goes @bvaughn. stop-runaway-react-effects is hacky and I'm not entirely surprised that this is happening.

[bvaughn]

Yeah it doesn't look broken to me when I view the sandbox:

Haven't downloaded or dug into that other hook though. I guess ping me again if you think it's a problem on my side.

[kentcdodds]

I've decided to remove stop-runaway-react-effects completely, so this should be correct now.