![]() Keys are a great first step on this journey. But, eventually, an understanding of how internal reconciliation works is critical to developing truly fast and stable components. This speaks to React’s ease of use and the number of high quality examples and tutorials available. They didn’t have to read all about the reconciliation process, and instead picked up React organically through learning-while-doing. Many also “fell into” React as a result of projects here and there. ![]() A lot of developers didn’t start out methodically learning React, but rather started off as general front-end developers in a larger institution who had dabbled in it while moving from jQuery or Angular. One of the great things about React is that you can just pick it up and start using it to build an app, while the virtual DOM implementation is abstracted away and not worried about. This can be simply accomplished via a key. but there’s a potentially cleaner solution: just throw the old component away and create a new one. When a central prop in the component changes that requires it to re-initialize, complex logic can be used to reset components to their original state, undo animations, etc. Consider a hypothetical complex stateful component which derives much of its initial state from props. This one is not really a key mistake per se, but rather a situation that proper use of keys can solve. I’ve made nifty new component to render up a list, fire up our browser to test it out, and suddenly get hit with this error: If the child key exists in the old set of keys but DOES NOT EXIST in the new set of keys, it is removed from the tree.Ī first introduction to keys often goes something like this….If the child key is EXISTING in both the old and new sets of keys, React will UPDATE the existing child component at that position in the tree.If the child key exists in the NEW set of keys and does not exist on the old set of keys, React creates a NEW child (going through the whole mount + render cycle) at that position in the tree.When a component node is updated (re-rendered), React compares the children’s keys against the old set of keys.Īs a baseline, lets try to summarize the documentation on keys in React (or check out the react-reconciler package if you prefer reading code over documentation). ![]() Having done my fair share of code reviews, I often see misunderstandings from some developers about how reconciliation works in React, and one of the main ways this misunderstanding manifests itself is through odd use of React keys. ![]() However, React’s own internals FAQ points out in the first paragraph that virtual DOM isn’t so much a specific technology as it is a pattern built on the back of a fundamental process called reconciliation. Now, a virtualized DOM implementation is all but expected in all the major frontend suites, be it React, Angular, VueJS, or a half dozen other libraries. Indeed, when React came onto the scene, one of their most brilliant contributions was bringing this idea into the mainstream. Li He is a senior engineer and technical architect in the Aladdin Wealth group within BlackRock SolutionsĪ few years ago, when I asked any frontend developer about React (if they even knew about it), their eyes would light up talking about the Virtual DOM and how it would fundamentally make everything in the web much faster.
0 Comments
Leave a Reply. |