Tutorial by Examples

HTML DOM is Expensive Each web page is represented internally as a tree of objects. This representation is called Document Object Model. Moreover, it is a language-neutral interface that allows programming languages (such as JavaScript) to access the HTML elements. In other words The HTML DOM...

Generating the minimum number of operations to transform one tree into another have a complexity in the order of O(n^3) where n is the number of nodes in the tree. React relies on two assumptions to solve this problem in a linear time - O(n) Two components of the same class will generate sim...

When two nodes are not of the same type, React doesn't try to match them - it just removes the first node from the DOM and inserts the second one. This is why the first tip says If you see yourself alternating between two components classes with very similar output, you may want to make it the sa...

You can't improve something you can't measure. To improve the performance of React components, you should be able to measure it. ReactJS provides with addon tools to measure performance. Import the react-addons-perf module to measure the performance import Perf from 'react-addons-perf' // ES6 var ...