function foo*() {
  yield 1;
  yield 2;
}

let gen = foo()

Currently if you put gen into state or props and then open this component in DevTools, it will consume that generator while trying to format it. So gen.next() will give you { done: true } next time you call it.

This happens here:

https://github.com/facebook/react/blob/60ba723bf78b9a28f60dce854e88e206fab52301/packages/react-devtools-shared/src/utils.js#L616-L623

I think that maybe we should treat iterables differently if they return themselves as an iterator. Since that means they're likely stateful and it's not ok to iterate over them.

We detect iterables here (DevTools terminology is wrong btw, it should be iterable rather than iterator):

https://github.com/facebook/react/blob/60ba723bf78b9a28f60dce854e88e206fab52301/packages/react-devtools-shared/src/utils.js#L438-L439

I think maybe we could split this into iterable and opaque_iterable, and make sure none of the codepaths attempt to traverse opaque_iterable or pass it to something that would consume it (e.g. Array.from).

We could detect it based on data[Symbol.iterator]() === data — that clearly signals the iterable is its own iterator (which is the case for generators), and therefore it's not OK for DevTools to consume it.

Maybe some other heuristic could work. But overall, the goal is that Map and friends is still being iterated over, but an arbitrary generator is not.