text: webpackJsonp([0xde282840b49a],{817:function(n,a){n.exports={data:{markdownRemark:{html:'<p>A few days ago, we <a href="/blog/2018/03/27/update-on-async-rendering.html">wrote a post about upcoming changes to our legacy lifecycle methods</a>, including gradual migration strategies. In React 16.3.0, we are adding a few new lifecycle methods to assist with that migration. We are also introducing new APIs for long requested features: an official context API, a ref forwarding API, and an ergonomic ref API.</p>\n<p>Read on to learn more about the release.</p>\n<h2 id="official-context-api"><a href="#official-context-api" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Official Context API</h2>\n<p>For many years, React has offered an experimental API for context. Although it was a powerful tool, its use was discouraged because of inherent problems in the API, and because we always intended to replace the experimental API with a better one.</p>\n<p>Version 16.3 introduces a new context API that is more efficient and supports both static type checking and deep updates.</p>\n<blockquote>\n<p><strong>Note</strong></p>\n<p>The old context API will keep working for all React 16.x releases, so you will have time to migrate.</p>\n</blockquote>\n<p>Here is an example illustrating how you might inject a “theme” using the new context API:\n<div class="gatsby-highlight">\n        <pre class="gatsby-code-jsx"><code><span class="gatsby-highlight-code-line"><span class="token keyword">const</span> ThemeContext <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createContext</span><span class="token punctuation">(</span><span class="token string">\'light\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</span>\n<span class="token keyword">class</span> <span class="token class-name">ThemeProvider</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  state <span class="token operator">=</span> <span class="token punctuation">{</span>theme<span class="token punctuation">:</span> <span class="token string">\'light\'</span><span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n<span class="gatsby-highlight-code-line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ThemeContext.Provider</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>theme<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n</span><span class="gatsby-highlight-code-line">        <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span>\n</span><span class="gatsby-highlight-code-line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ThemeContext.Provider</span><span class="token punctuation">></span></span>\n</span>    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">class</span> <span class="token class-name">ThemedButton</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n<span class="gatsby-highlight-code-line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ThemeContext.Consumer</span><span class="token punctuation">></span></span>\n</span><span class="gatsby-highlight-code-line">        <span class="token punctuation">{</span>theme <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>theme<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span>\n</span><span class="gatsby-highlight-code-line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ThemeContext.Consumer</span><span class="token punctuation">></span></span>\n</span>    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre>\n        </div></p>\n<p><a href="/docs/context.html">Learn more about the new context API here.</a></p>\n<h2 id="createref-api"><a href="#createref-api" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="gatsby-code-text">createRef</code> API</h2>\n<p>Previously, React provided two ways of 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 <a href="https://github.com/facebook/react/issues/1373">several downsides</a> and so our official recommendation was to use the callback form instead.</p>\n<p>Version 16.3 adds a new option for managing refs that offers the convenience of a string ref without any of the downsides:\n<div class="gatsby-highlight">\n        <pre class="gatsby-code-jsx"><code><span class="token keyword">class</span> <span class="token class-name">MyComponent</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  <span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="gatsby-highlight-code-line">    <span class="token keyword">this</span><span class="token punctuation">.</span>inputRef <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</span>  <span class="token punctuation">}</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n<span class="gatsby-highlight-code-line">    <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>inputRef<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>\n</span>  <span class="token punctuation">}</span>\n\n  <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n<span class="gatsby-highlight-code-line">    <span class="token keyword">this</span><span class="token punctuation">.</span>inputRef<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</span>  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre>\n        </div></p>\n<blockquote>\n<p><strong>Note:</strong></p>\n<p>Callback refs will continue to be supported in addition to the new <code class="gatsby-code-text">createRef</code> API.</p>\n<p>You don’t need to replace callback refs in your components. They are slightly more flexible, so they will remain as an advanced feature.</p>\n</blockquote>\n<p><a href="/docs/refs-and-the-dom.html">Learn more about the new <code class="gatsby-code-text">createRef</code> API here.</a></p>\n<h2 id="forwardref-api"><a href="#forwardref-api" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="gatsby-code-text">forwardRef</code> API</h2>\n<p>Generally, React components are declarative, but sometimes imperative access to the component instances and the underlying DOM nodes is necessary. This is common for use cases like managing focus, selection, or animations. React provides <a href="/docs/refs-and-the-dom.html">refs</a> as a way to solve this problem. However, component encapsulation poses some challenges with refs.</p>\n<p>For example, if you replace a <code class="gatsby-code-text">&lt;button&gt;</code> with a custom <code class="gatsby-code-text">&lt;FancyButton&gt;</code> component, the <code class="gatsby-code-text">ref</code> attribute on it will start pointing at the wrapper component instead of the DOM node (and would be <code class="gatsby-code-text">null</code> for functional components). While this is desirable for “application-level” components like <code class="gatsby-code-text">FeedStory</code> or <code class="gatsby-code-text">Comment</code> that need to be encapsulated, it can be annoying for “leaf” components such as <code class="gatsby-code-text">FancyButton</code> or <code class="gatsby-code-text">MyTextInput</code> that are typically used like their DOM counterparts, and might need to expose their DOM nodes.</p>\n<p>Ref forwarding is a new opt-in feature that lets some components take a <code class="gatsby-code-text">ref</code> they receive, and pass it further down (in other words, “forward” it) to a child. In the example below, <code class="gatsby-code-text">FancyButton</code> forwards its ref to a DOM <code class="gatsby-code-text">button</code> that it renders:</p>\n<p><div class="gatsby-highlight">\n        <pre class="gatsby-code-jsx"><code><span class="gatsby-highlight-code-line"><span class="token keyword">const</span> FancyButton <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">forwardRef</span><span class="token punctuation">(</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> ref<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>\n</span><span class="gatsby-highlight-code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>FancyButton<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n</span>    <span class="token punctuation">{</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>\n<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// You can now get a ref directly to the DOM button:</span>\n<span class="token keyword">const</span> ref <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FancyButton</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Click me<span class="token operator">!</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FancyButton</span><span class="token punctuation">></span></span><span class="token punctuation">;</span></code></pre>\n        </div></p>\n<p>This way, components using <code class="gatsby-code-text">FancyButton</code> can get a ref to the underlying <code class="gatsby-code-text">button</code> DOM node and access it if necessary—just like if they used a DOM <code class="gatsby-code-text">button</code> directly.</p>\n<p>Ref forwarding is not limited to “leaf” components that render DOM nodes. If you write <a href="/docs/higher-order-components.html">higher order components</a>, we recommend using ref forwarding to automatically pass the ref down to the wrapped class component instances.</p>\n<p><a href="/docs/forwarding-refs.html">Learn more about the forwardRef API here.</a></p>\n<h2 id="component-lifecycle-changes"><a href="#component-lifecycle-changes" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Component Lifecycle Changes</h2>\n<p>React’s class component API has been around for years with little change. However, as we add support for more advanced features (such as <a href="/docs/react-component.html#componentdidcatch">error boundaries</a> and the upcoming <a href="/blog/2018/03/01/sneak-peek-beyond-react-16.html">async rendering mode</a>) we stretch this model in ways that it was not originally intended.</p>\n<p>For example, with the current API, it is too easy to block the initial render with non-essential logic. In part this is because there are too many ways to accomplish a given task, and it can be unclear which is best. We’ve observed that the interrupting behavior of error handling is often not taken into consideration and can result in memory leaks (something that will also impact the upcoming async rendering mode). The current class component API also complicates other efforts, like our work on <a href="https://twitter.com/trueadm/status/944908776896978946">prototyping a React compiler</a>.</p>\n<p>Many of these issues are exacerbated by a subset of the component lifecycles (<code class="gatsby-code-text">componentWillMount</code>, <code class="gatsby-code-text">componentWillReceiveProps</code>, and <code class="gatsby-code-text">componentWillUpdate</code>). These also happen to be the lifecycles that cause the most confusion within the React community. For these reasons, we are going to deprecate those methods in favor of better alternatives.</p>\n<p>We recognize that this change will impact many existing components. Because of this, the migration path will be as gradual as possible, and will provide escape hatches. (At Facebook, we maintain more than 50,000 React components. We depend on a gradual release cycle too!)</p>\n<blockquote>\n<p><strong>Note:</strong></p>\n<p>Deprecation warnings will be enabled with a future 16.x release, <strong>but the legacy lifecycles will continue to work until version 17</strong>.</p>\n<p>Even in version 17, it will still be possible to use them, but they will be aliased with an “UNSAFE_” prefix to indicate that they might cause issues. We have also prepared an <a href="https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles">automated script to rename them</a> in existing code.</p>\n</blockquote>\n<p>In addition to deprecating unsafe lifecycles, we are also adding a couple of new lifecyles:</p>\n<ul>\n<li><a href="/docs/react-component.html#static-getderivedstatefromprops"><code class="gatsby-code-text">getDerivedStateFromProps</code></a> is being added as a safer alternative to the legacy <code class="gatsby-code-text">componentWillReceiveProps</code>. (Note that <a href="/blog/2018/06/07/you-probably-dont-need-derived-state.html">in most cases you don’t need either of them</a>.)</li>\n<li><a href="/docs/react-component.html#getsnapshotbeforeupdate"><code class="gatsby-code-text">getSnapshotBeforeUpdate</code></a> is being added to support safely reading properties from e.g. the DOM before updates are made.</li>\n</ul>\n<p><a href="/blog/2018/03/27/update-on-async-rendering.html">Learn more about these lifecycle changes here.</a></p>\n<h2 id="strictmode-component"><a href="#strictmode-component" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code class="gatsby-code-text">StrictMode</code> Component</h2>\n<p><code class="gatsby-code-text">StrictMode</code> is a tool for highlighting potential problems in an application. Like <code class="gatsby-code-text">Fragment</code>, <code class="gatsby-code-text">StrictMode</code> does not render any visible UI. It activates additional checks and warnings for its descendants.</p>\n<blockquote>\n<p><strong>Note:</strong></p>\n<p><code class="gatsby-code-text">StrictMode</code> checks are run in development mode only; <em>they do not impact the production build</em>.</p>\n</blockquote>\n<p>Although it is not possible for strict mode to catch all problems (e.g. certain types of mutation), it can help with many. If you see warnings in strict mode, those things will likely cause bugs for async rendering.</p>\n<p>In version 16.3, <code class="gatsby-code-text">StrictMode</code> helps with:</p>\n<ul>\n<li>Identifying components with unsafe lifecycles</li>\n<li>Warning about legacy string ref API usage</li>\n<li>Detecting unexpected side effects</li>\n</ul>\n<p>Additional functionality will be added with future releases of React.</p>\n<p><a href="/docs/strict-mode.html">Learn more about the <code class="gatsby-code-text">StrictMode</code> component here.</a></p>',excerpt:"A few days ago, we  wrote a post about upcoming changes to our legacy lifecycle methods , including gradual migration strategies. In React 16.3.0, we are adding a few new lifecycle methods to assist with that migration. We are also introducing new APIs for long requested features: an official context API, a ref forwarding API, and an ergonomic ref API. Read on to learn more about the release. Official Context API For many years, React has offered an experimental API for context. Although it was…",frontmatter:{title:"React v16.3.0: New lifecycles and context API",next:null,prev:null,author:[{frontmatter:{name:"Brian Vaughn",url:"https://github.com/bvaughn"}}]},fields:{date:"March 28, 2018",path:null,slug:"/blog/2018/03/29/react-v-16-3.html"}},allMarkdownRemark:{edges:[{node:{frontmatter:{title:"You Probably Don't Need Derived State"},fields:{slug:"/blog/2018/06/07/you-probably-dont-need-derived-state.html"}}},{node:{frontmatter:{title:"React v16.4.0: Pointer Events"},fields:{slug:"/blog/2018/05/23/react-v-16-4.html"}}},{node:{frontmatter:{title:"React v16.3.0: New lifecycles and context API"},fields:{slug:"/blog/2018/03/29/react-v-16-3.html"}}},{node:{frontmatter:{title:"Update on Async Rendering"},fields:{slug:"/blog/2018/03/27/update-on-async-rendering.html"}}},{node:{frontmatter:{title:"Sneak Peek: Beyond React 16"},fields:{slug:"/blog/2018/03/01/sneak-peek-beyond-react-16.html"}}},{node:{frontmatter:{title:"Behind the Scenes: Improving the Repository Infrastructure"},fields:{slug:"/blog/2017/12/15/improving-the-repository-infrastructure.html"}}},{node:{frontmatter:{title:"Introducing the React RFC Process"},fields:{slug:"/blog/2017/12/07/introducing-the-react-rfc-process.html"}}},{node:{frontmatter:{title:"React v16.2.0: Improved Support for Fragments"},fields:{slug:"/blog/2017/11/28/react-v16.2.0-fragment-support.html"}}},{node:{frontmatter:{title:"React v16.0"},fields:{slug:"/blog/2017/09/26/react-v16.0.html"}}},{node:{frontmatter:{title:"React v15.6.2"},fields:{slug:"/blog/2017/09/25/react-v15.6.2.html"}}}]}},pathContext:{slug:"/blog/2018/03/29/react-v-16-3.html"}}}});
  //# sourceMappingURL=path---blog-2018-03-29-react-v-16-3-html-8ded835331f4ab0f882f.js.map