Skip to content

Formateed react-v16.9.0 post #2294

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 9 additions & 10 deletions content/blog/2019-08-08-react-v16.9.0.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const userProfile = {
};
// This will now warn:
<a href={userProfile.website}>Profile</a>
````
```

**In React 16.9,** this pattern continues to work, but it will log a warning. If you use `javascript:` URLs for logic, try to use React event handlers instead. (As a last resort, you can circumvent the protection with [`dangerouslySetInnerHTML`](/docs/dom-elements.html#dangerouslysetinnerhtml), but it is highly discouraged and often leads to security holes.)

Expand All @@ -70,7 +70,6 @@ This pattern was almost never used in the wild, and supporting it causes React t

We don't expect most codebases to be affected by this.


## New Features {#new-features}

### Async [`act()`](/docs/test-utils.html#act) for Testing {#async-act-for-testing}
Expand All @@ -89,7 +88,7 @@ An update to SomeComponent inside a test was not wrapped in act(...).
await act(async () => {
// ...
});
````
```

This solves the remaining cases where you couldn't use `act()` before, such as when the state update was inside an asynchronous function. As a result, **you should be able to fix all the remaining `act()` warnings in your tests now.**

Expand Down Expand Up @@ -209,12 +208,12 @@ Refer to the documentation for [detailed installation instructions](/docs/instal

### React {#react}

* Add `<React.Profiler>` API for gathering performance measurements programmatically. ([@bvaughn](https://github.com/bvaughn) in [#15172](https://github.com/facebook/react/pull/15172))
* Add `<React.Profiler>` API for gathering performance measurements programmatically. ([@bvaughn](https://github.com/bvaughn) in [#15172](https://github.com/facebook/react/pull/15172))
* Remove `unstable_ConcurrentMode` in favor of `unstable_createRoot`. ([@acdlite](https://github.com/acdlite) in [#15532](https://github.com/facebook/react/pull/15532))

### React DOM
### React DOM {#react-dom}

* Deprecate old names for the `UNSAFE_*` lifecycle methods. ([@bvaughn](https://github.com/bvaughn) in [#15186](https://github.com/facebook/react/pull/15186) and [@threepointone](https://github.com/threepointone) in [#16103](https://github.com/facebook/react/pull/16103))
* Deprecate old names for the `UNSAFE_*` lifecycle methods. ([@bvaughn](https://github.com/bvaughn) in [#15186](https://github.com/facebook/react/pull/15186) and [@threepointone](https://github.com/threepointone) in [#16103](https://github.com/facebook/react/pull/16103))
* Deprecate `javascript:` URLs as a common attack surface. ([@sebmarkbage](https://github.com/sebmarkbage) in [#15047](https://github.com/facebook/react/pull/15047))
* Deprecate uncommon "module pattern" (factory) components. ([@sebmarkbage](https://github.com/sebmarkbage) in [#15145](https://github.com/facebook/react/pull/15145))
* Add support for the `disablePictureInPicture` attribute on `<video>`. ([@eek](https://github.com/eek) in [#15334](https://github.com/facebook/react/pull/15334))
Expand All @@ -229,13 +228,13 @@ Refer to the documentation for [detailed installation instructions](/docs/instal
* Fix hiding Suspense fallback nodes when there is an `!important` style. ([@acdlite](https://github.com/acdlite) in [#15861](https://github.com/facebook/react/pull/15861) and [#15882](https://github.com/facebook/react/pull/15882))
* Slightly improve hydration performance. ([@bmeurer](https://github.com/bmeurer) in [#15998](https://github.com/facebook/react/pull/15998))

### React DOM Server
### React DOM Server {#react-dom-server}

* Fix incorrect output for camelCase custom CSS property names. ([@bedakb](https://github.com/bedakb) in [#16167](https://github.com/facebook/react/pull/16167))
* Fix incorrect output for camelCase custom CSS property names. ([@bedakb](https://github.com/bedakb) in [#16167](https://github.com/facebook/react/pull/16167))

### React Test Utilities and Test Renderer
### React Test Utilities and Test Renderer {#react-test-utilities-and-test-renderer}

* Add `act(async () => ...)` for testing asynchronous state updates. ([@threepointone](https://github.com/threepointone) in [#14853](https://github.com/facebook/react/pull/14853))
* Add `act(async () => ...)` for testing asynchronous state updates. ([@threepointone](https://github.com/threepointone) in [#14853](https://github.com/facebook/react/pull/14853))
* Add support for nesting `act` from different renderers. ([@threepointone](https://github.com/threepointone) in [#16039](https://github.com/facebook/react/pull/16039) and [#16042](https://github.com/facebook/react/pull/16042))
* Warn in Strict Mode if effects are scheduled outside an `act()` call. ([@threepointone](https://github.com/threepointone) in [#15763](https://github.com/facebook/react/pull/15763) and [#16041](https://github.com/facebook/react/pull/16041))
* Warn when using `act` from the wrong renderer. ([@threepointone](https://github.com/threepointone) in [#15756](https://github.com/facebook/react/pull/15756))
12 changes: 6 additions & 6 deletions content/blog/2019-08-15-new-react-devtools.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ author: [bvaughn]
---
We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!

## What's changed?
## What's changed? {#whats-changed}

A lot has changed in version 4!
At a high level, this new version should offer significant performance gains and an improved navigation experience.
Expand All @@ -14,7 +14,7 @@ It also offers full support for React Hooks, including inspecting nested objects

[Visit the interactive tutorial](https://react-devtools-tutorial.now.sh/) to try out the new version or [see the changelog](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019) for demo videos and more details.

## Which versions of React are supported?
## Which versions of React are supported? {#which-versions-of-react-are-supported}

**`react-dom`**

Expand All @@ -26,7 +26,7 @@ It also offers full support for React Hooks, including inspecting nested objects
* `0`-`0.61`: Not supported
* `0.62`: Will be supported (when 0.62 is released)

## How do I get the new DevTools?
## How do I get the new DevTools? {#how-do-i-get-the-new-devtools}

React DevTools is available as an extension for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/).
If you have already installed the extension, it should update automatically within the next couple of hours.
Expand All @@ -37,14 +37,14 @@ If you use the standalone shell (e.g. in React Native or Safari), you can instal
npm install -g react-devtools@^4
```

## Where did all of the DOM elements go?
## Where did all of the DOM elements go? {#where-did-all-of-the-dom-elements-go}

The new DevTools provides a way to filter components from the tree to make it easier to navigate deeply nested hierarchies.
Host nodes (e.g. HTML `<div>`, React Native `<View>`) are *hidden by default*, but this filter can be disabled:

![DevTools component filters](../images/blog/devtools-component-filters.gif)

## How do I get the old version back?
## How do I get the old version back? {#how-do-i-get-the-old-version-back}

If you are working with React Native version 60 (or older) you can install the previous release of DevTools from NPM:

Expand All @@ -70,7 +70,7 @@ yarn build:extension
# Follow the on-screen instructions to complete installation
```

## Thank you!
## Thank you! {#thank-you}

We'd like to thank everyone who tested the early release of DevTools version 4.
Your feedback helped improve this initial release significantly.
Expand Down
4 changes: 2 additions & 2 deletions content/docs/reference-profiler.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Its purpose is to help identify parts of an application that are slow and may be
> To opt into production profiling, React provides a special production build with profiling enabled.
> Read more about how to use this build at [fb.me/react-profiling](https://fb.me/react-profiling)

## Usage
## Usage {#usage}

A `Profiler` can be added anywhere in a React tree to measure the cost of rendering that part of the tree.
It requires two props: an `id` (string) and an `onRender` callback (function) which React calls any time a component within the tree "commits" an update.
Expand Down Expand Up @@ -70,7 +70,7 @@ render(
>
> Although `Profiler` is a light-weight component, it should be used only when necessary; each use adds some CPU and memory overhead to an application.

## `onRender` Callback
## `onRender` Callback {#onrender-callback}

The `Profiler` requires an `onRender` function as a prop.
React calls this function any time a component within the profiled tree "commits" an update.
Expand Down