Added CHANGELOG entries for HOC badges and no in-line props
Brian Vaughn committed
Aug 1, 2019 at 07:56 UTC
51a15e0e4d71ef8c979c47eb5f8568448c467643
1 file changed
+20
CHANGELOG.md
+20
@@ -41,6 +41,14 @@ Host nodes (e.g. HTML `<div>`, React Native `View`) are now hidden by default, b
41
42
Filter preferences are remembered between sessions.
43
44
+#### No more in-line props
45
+
46
+Components in the tree no longer show in-line props. This was done to [make DevTools faster](https://github.com/bvaughn/react-devtools-experimental/blob/master/OVERVIEW.md) and to make it easier to browse larger component trees.
47
+
48
+You can view a component's props, state, and hooks by selecting it:
49
+
50
+
51
+
52
#### "Rendered by" list
53
54
In React, an element's "owner" refers the thing that rendered it. Sometimes an element's parent is also its owner, but usually they're different. This distinction is important because props come from owners.
@@ -81,6 +89,18 @@ Search results are now shown inline similar to the browser's find-in-page search
89
90
91
92
+#### Higher order components
93
+
94
+[Higher order components](https://reactjs.org/docs/higher-order-components.html) (or HOCs) often provide a [custom `displayName`](https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging) following a convention of `withHOC(InnerComponentName)` in order to make it easier to identify components in React warnings and in DevTools.
95
+
96
+The new Components tree formats these HOC names (along with several built-in utilities like `React.memo` and `React.forwardRef`) as a special badge to the right of the decorated component name.
97
+
98
+
99
+
100
+Components decorated with multiple HOCs show the topmost badge and a count. Selecting the component shows all of the HOCs badges in the properties panel.
101
+
102
+
103
+
104
#### Suspense toggle
105
106
React's experimental [Suspense API](https://reactjs.org/docs/react-api.html#suspense) lets components "wait" for something before rendering. `<Suspense>` components can be used to specify loading states when components deeper in the tree are waiting to render.