Skip to content

Commit af4db1d

Browse files
authored
Remove "highlight updates" from docs
This feature isn't available in New DevTools (yet?)
1 parent e08553d commit af4db1d

File tree

1 file changed

+0
-18
lines changed

1 file changed

+0
-18
lines changed

content/docs/optimizing-performance.md

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -211,24 +211,6 @@ React builds and maintains an internal representation of the rendered UI. It inc
211211

212212
When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM.
213213

214-
You can now visualize these re-renders of the virtual DOM with React DevTools:
215-
216-
- [Chrome Browser Extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
217-
- [Firefox Browser Extension](https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/)
218-
- [Standalone Node Package](https://www.npmjs.com/package/react-devtools)
219-
220-
In the developer console select the **Highlight Updates** option in the **React** tab:
221-
222-
<center><img src="../images/blog/devtools-highlight-updates.png" style="max-width:100%; margin-top:10px;" alt="How to enable highlight updates" /></center>
223-
224-
Interact with your page and you should see colored borders momentarily appear around any components that have re-rendered. This lets you spot re-renders that were not necessary. You can learn more about this React DevTools feature from this [blog post](https://blog.logrocket.com/make-react-fast-again-part-3-highlighting-component-updates-6119e45e6833) from [Ben Edelstein](https://blog.logrocket.com/@edelstein).
225-
226-
Consider this example:
227-
228-
<center><img src="../images/blog/highlight-updates-example.gif" style="max-width:100%; margin-top:20px;" alt="React DevTools Highlight Updates example" /></center>
229-
230-
Note that when we're entering a second todo, the first todo also flashes on the screen on every keystroke. This means it is being re-rendered by React together with the input. This is sometimes called a "wasted" render. We know it is unnecessary because the first todo content has not changed, but React doesn't know this.
231-
232214
Even though React only updates the changed DOM nodes, re-rendering still takes some time. In many cases it's not a problem, but if the slowdown is noticeable, you can speed all of this up by overriding the lifecycle function `shouldComponentUpdate`, which is triggered before the re-rendering process starts. The default implementation of this function returns `true`, leaving React to perform the update:
233215

234216
```javascript

0 commit comments

Comments
 (0)