Finding faults in component code.
WHAT TO ESTABLISH FIRST
Whether the data is wrong, or the rendering is.
HOW
Inspect the data at the point it enters the component.
WHAT THAT SEPARATES
A fetching or state problem from a rendering problem.
WHAT TOOLS TO USE
The framework's own developer tools, showing the component tree, props and state The browser's debugger The network panel
WHAT THE FRAMEWORK TOOLS REVEAL
Which components re-rendered, and why What props each received The current state at any point
WHAT TO CHECK FOR RE-RENDER PROBLEMS
Whether new objects or functions are created during render.
WHAT TO CHECK FOR STALE VALUES
Effect dependencies, and closures capturing old values.
WHAT TO CHECK WHEN SOMETHING WORKS LOCALLY AND FAILS DEPLOYED
Environment values Build differences between development and production Filename case Caching
WHAT TO DO WITH AN ERROR IN MINIFIED OUTPUT
Use source maps.
WHAT TO CHANGE
One thing at a time.
