From 0674c34f0ae88bafe4e873f653eee67a6885da4f Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 6 Feb 2018 14:05:57 -0800 Subject: [PATCH] Added string ref section to strict mode page --- content/blog/2018-02-07-strict-mode.md | 17 ++++++++++++++++- examples/16-3-release-blog-create-ref.js | 19 +++++++++++++++++++ 2 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 examples/16-3-release-blog-create-ref.js diff --git a/content/blog/2018-02-07-strict-mode.md b/content/blog/2018-02-07-strict-mode.md index 0e672a07a..e46b5ab3c 100644 --- a/content/blog/2018-02-07-strict-mode.md +++ b/content/blog/2018-02-07-strict-mode.md @@ -15,7 +15,7 @@ You can enable strict mode for any part of your application. For example: In the above example, strict mode checks will *not* be run against the `Header` and `Footer` components. However, `RouteOne` and `RouteTwo`, as well as all of their descendants, will have the checks. In version 16.3, `StrictMode` helps with: -* Identifying components with unsafe lifecycles +* [Identifying components with unsafe lifecycles](#identifying-unsafe-lifecycles) * Warning about legacy string ref API usage * Detecting unexpected side effects @@ -31,6 +31,21 @@ When strict mode is enabled, React compiles a list of all class components using Addressing the issues identified by strict mode _now_ will make it easier for you to take advantage of async rendering in future releases of React. +### Warning about legacy string ref API usage + +Previously, React provided two ways for managing refs: the legacy string ref API and the callback API. Although the string ref API was the more convenient of the two, it had [several downsides](https://github.com/facebook/react/issues/1373) and so our official recomendation was to [use the callback form instead](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs). + +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.](#) + ### Detecting unexpected side effects As a general rule, side-effects should be avoided in certain class component methods (e.g. the `constructor`, `render`, etc). This is because React may invoke these methods more than once before committing, or it may invoke them without committing at all (because of an error or a higher priority interruption). Ignoring this rule can lead to a variety of problems, including memory leaks and invalid state. Unfortunately, it can be difficult to detect these problems as they are often non-deterministic. diff --git a/examples/16-3-release-blog-create-ref.js b/examples/16-3-release-blog-create-ref.js new file mode 100644 index 000000000..410833028 --- /dev/null +++ b/examples/16-3-release-blog-create-ref.js @@ -0,0 +1,19 @@ +class MyComponent extends React.Component { + // highlight-next-line + divRef = React.createRef(); + + render() { + // highlight-range{4} + return ( + + ); + } + + componentDidMount() { + // highlight-next-line + this.divRef.value.focus(); + } +} \ No newline at end of file