1

When using the profiler from the React Dev Tools extension, in the tab that says "Why did this render?" and it shows the number of the hooks that changed, is this the same as the order in which they are defined/called in the component?

For example:

Hook Changed

Then in my component:

const [foo, setFoo] = useState(0);
const [bar, setBar] = useState(0);
const [baz, setBaz] = useState(0);

Does it correspond to the second hook and third hook, bar and baz?

LoyalPotato
  • 401
  • 4
  • 15

1 Answers1

4

There is a good answer here: https://stackoverflow.com/a/69263985/17099285

If that link stops working the gist of it is: "that if you want to find the hook you must go to the components tab in dev tools and inspect said component; in the hooks section, you'll have a tree of the called hooks, and for each hook, a small number at the left which is the index. You'll probably need to unfold the tree of hooks to find them."

Ember Borja
  • 56
  • 1