How to find the trigger that caused the update in React 16?

Question

I've recently upgraded to fiber. In 15, when a component updates, the update stack trace looks like this

component1Update
...react framework stuff
  component2Update
  ...react framework stuff
    component3Update
    setState
    onClick() <-- Aha!

How do you find the origin of update in Fiber (React 16)?

@hackape Ah forgot to mention, from a debugger statement in render method. — user2167582, Nov 22 '19 at 22:51
You should see why with https://github.com/welldone-software/why-did-you-render ? — sanghin, Nov 25 '19 at 17:14
Perhaps a duplicate of https://stackoverflow.com/questions/41004631/trace-why-a-react-component-is-re-rendering — hazardous, Nov 28 '19 at 09:47

score 4 · Answer 1 · answered Nov 28 '19 at 10:58

4

I would recommend looking up the node that is being constantly updated in react-profiler, and then decorate that component with https://github.com/welldone-software/why-did-you-render this should tell you why did it update.

answered Nov 28 '19 at 10:58

Lukáš Gibo Vaic

3,960
1
18
30

How to find the trigger that caused the update in React 16?

1 Answers1