如何使用 React Dev Tools 在状态树中找到钩子的状态？

Question

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 useEffect s:

  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?

Answer 1

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

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.