diff --git a/content/blog/2018-02-07-react-v-16-3.md b/content/blog/2018-02-07-react-v-16-3.md index a1439f40f..98d33574d 100644 --- a/content/blog/2018-02-07-react-v-16-3.md +++ b/content/blog/2018-02-07-react-v-16-3.md @@ -3,7 +3,7 @@ title: "React v16.3.0: New lifecycles and context" author: [bvaughn] --- -This release includes a new class component lifecycle (`getDerivedStateFromProps`), a new `StrictMode` component, an official context API, and a better way for managing refs! +This release includes a new class component lifecycle (`getDerivedStateFromProps`), a new `StrictMode` component, an official context API, and a new ergonomic ref API! For the past few months, the React team has been working on support for [asynchronous rendering](#). We are excited about the new features this will enable, and we've learned that some changes will be required to the way we write React components. @@ -24,6 +24,12 @@ Previously, React provided two ways for managing refs: the legacy string ref API Version 16.3 adds a new option for managing refs that offers the convenience of a string ref without any of the downsides: `embed:16-3-release-blog-create-ref.js` +> **Note:** +> +> Callback refs will continue to be supported in addition to the new `createRef` API. +> +> You don't need to replace callback refs in your components. They are slightly more flexible, so they will remain as an advanced feature. + [Learn more about the new `createRef` API here.](#) ## Component Lifecycle Changes @@ -50,7 +56,6 @@ We are also adding a new static lifecycle, `getDerivedStateFromProps`, as a safe `StrictMode` is a tool for highlighting potential problems in an application. Like `Fragment`, `StrictMode` does not render any visible UI. It simply activates additional checks and warnings for its descendants. - > **Note:** > > `StrictMode` checks are run in development mode only; they do not impact the production build. diff --git a/examples/16-3-release-blog-create-ref.js b/examples/16-3-release-blog-create-ref.js index 9f613f221..f189e0d06 100644 --- a/examples/16-3-release-blog-create-ref.js +++ b/examples/16-3-release-blog-create-ref.js @@ -1,19 +1,19 @@ class MyComponent extends React.Component { // highlight-next-line - _divRef = React.createRef(); + divRef = React.createRef(); render() { // highlight-range{4} return ( ); } componentDidMount() { // highlight-next-line - this._divRef.value.focus(); + this.divRef.value.focus(); } }