React Internals: Introduction to React.js diff “algorithm”
React.js is a fast beast, but do you really know why? Let’s watch the video to see how React.js internals really work on the lower level.
There is a huge number of tutorials, cookbooks, and recipes how to structurize and create React.js applications. Still, there are many developers who are proficient in writing applications in it, but without the inner knowledge. In contrast to fe.Angular, which matured to the level when there is no problem with finding people with deeper level of understanding of its inner mechanism, this Facebook’s kid is still considered to be blazing fast black box, with the mechanism that “just works”.
The inner architecture of React.js is simple, similarly to its core behaviour. However its misuse brings the risk of big performance penalty in the places you don’t expect that. So, if you are a React.js developer I think it’s worth to spend some time to gain this knowledge. You can do this by reading React Documentation in the Reconilliation section and some interesting articles can be found online, but if you prefer to have everything visualised, the video from this article is a good direction.
If you are interested in more academic approach to this problem, which creators of React.js need to cope with, A Survey on Tree Edit Distance and Related Problems and Levenshtein Distance wikipedia page are good places to start.