Skip to content

Instantly share code, notes, and snippets.

@the0neWhoKnocks

the0neWhoKnocks/README.md

Created April 6, 2018 23:40
Show Gist options
  • Save the0neWhoKnocks/3fac66597ebc445d26b22346defc9be2 to your computer and use it in GitHub Desktop.
Save the0neWhoKnocks/3fac66597ebc445d26b22346defc9be2 to your computer and use it in GitHub Desktop.
Download ZIP
Debugging React
Raw
README.md

Debugging React

Figure out what component Fiber has an issue with

Issue - After an upgrade to React 16 (from 15), we were seeing an error throw a warning message in regards to Warning: Did not expect server HTML to contain the text node " " in <div>.. Stepping through Fiber calls can be very time consuming and not very informative if you don't know where to look.

Solution - Do a source-search in Chrome DevTools for reconcileChildFibers, place a breakpoint in there, and add a Watch for newChild.type.name. Then you can just step through as it iterates the components and you can easily read which component is processed before the error is thrown.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment