0

On this React page we have many hooks and many context providers. One of the hooks I care about:

const { branchDetails, branchLoadError } = useBranchValidator();

Inside of it there's some state along with a couple of useEffects:

  const [branchId, setBranchId] = useState(queryParams.branchId ?? '');

I'd like to see the branchId value with React Dev Tools. I started with the assumption that the state for this hook would be inside the nearest context provider (image below) but it's not in there.

Is it possible to see the state in a React hook with the Dev Tools?

react dev tools context

jcollum
  • 43,623
  • 55
  • 191
  • 321

1 Answers1

2

In the React Devtools sidebar, the hooks in use are displayed in a different section beneath the props, by default.

React DevTools showing the hooks in use on a component

They are not displayed with their assigned variable names in React DevTools, but which state value they are is usually inferable from context. As per React Dev Tools does not show Component Names or State Variable Names, clicking on the magic wand icon in the top right of the hooks section can display this information, but it can be resource-intensive and result in timeouts when used on complex components like context providers, in my personal experience.

toki
  • 936
  • 5
  • 18