Bug: Devtools does not correctly identify context change for functional component

[KamranAsif]

React version: 17.0.2
Devtools version: 4.21.0.1 (FB build)

Steps To Reproduce

1. Open sandbox (source)
2. Start profiling with 'Record why each component rendered while profiling' enabled.
3. Click the page a few times to force renders.
4. Stop profiling and view 'Why did this render?' panel

Link to code example:

https://codesandbox.io/s/react-playground-forked-lke58

The current behavior

The profiler says the component rendered because the parent component rendered. This is incorrect, as the parent component is a MemoComponent that did in fact not render.

The expected behavior

The component actually rendered because its context was changed. When digging into the devtools code, we are checking the memoizedValue value on the context, which doesn't seem to exist.

while (prevContext && nextContext) {
  if (!is(prevContext.memoizedValue, nextContext.memoizedValue)) {
    return true;
  }

  prevContext = prevContext.next;
  nextContext = nextContext.next;
}

I couldn't find the actual value on the context property; or in the memoizedState.

[KamranAsif]

Fixed codesandbox link

[bvaughn]

PR #22746 fixes this issue for newer versions of React (e.g. 18 alpha) but older versions will remain broken because there's not a good way to read the most recent context value for a Fiber after render has completed. This is because React maintains a stack of context values during render, but by the time DevTools is called– render has finished and the stack is empty.