react/feed.xml

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
		<title>React</title>
		<description>A JavaScript library for building user interfaces</description>
		<link>https://facebook.github.io/react</link>
		<atom:link href="https://facebook.github.io/react/feed.xml" rel="self" type="application/rss+xml" />
		
			<item>
				<title>React v16.0</title>
				<description>&lt;p&gt;We&amp;#39;re excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including &lt;a href=&quot;#new-render-return-types-fragments-and-strings&quot;&gt;&lt;strong&gt;fragments&lt;/strong&gt;&lt;/a&gt;, &lt;a href=&quot;#better-error-handling&quot;&gt;&lt;strong&gt;error boundaries&lt;/strong&gt;&lt;/a&gt;, &lt;a href=&quot;#portals&quot;&gt;&lt;strong&gt;portals&lt;/strong&gt;&lt;/a&gt;, support for &lt;a href=&quot;#support-for-custom-dom-attributes&quot;&gt;&lt;strong&gt;custom DOM attributes&lt;/strong&gt;&lt;/a&gt;, improved &lt;a href=&quot;#better-server-side-rendering&quot;&gt;&lt;strong&gt;server-side rendering&lt;/strong&gt;&lt;/a&gt;, and &lt;a href=&quot;#reduced-file-size&quot;&gt;&lt;strong&gt;reduced file size&lt;/strong&gt;&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;New render return types: fragments and strings&lt;/h3&gt;

&lt;p&gt;You can now return an array of elements from a component&amp;#39;s &lt;code&gt;render&lt;/code&gt; method. Like with other arrays, you&amp;#39;ll need to add a key to each element to avoid the key warning:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;c1&quot;&gt;// No need to wrap list items in an extra element!&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;
    &lt;span class=&quot;c1&quot;&gt;// Don&amp;#39;t forget the keys :)&lt;/span&gt;
    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;A&amp;quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;First&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;item&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/li&amp;gt;,&lt;/span&gt;
    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;B&amp;quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Second&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;item&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/li&amp;gt;,&lt;/span&gt;
    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;C&amp;quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Third&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;item&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/li&amp;gt;,&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;];&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;In the future, we&amp;#39;ll likely add a special fragment syntax to JSX that doesn&amp;#39;t require keys.&lt;/p&gt;

&lt;p&gt;We&amp;#39;ve added support for returning strings, too:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;Look ma, no spans!&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;/react/docs/react-component.html#render&quot;&gt;See the full list of supported return types&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;Better error handling&lt;/h3&gt;

&lt;p&gt;Previously, runtime errors during rendering could put React in a broken state, producing cryptic error messages and requiring a page refresh to recover. To address this problem, React 16 uses a more resilient error-handling strategy. By default, if an error is thrown inside a component&amp;#39;s render or lifecycle methods, the whole component tree is unmounted from the root. This prevents the display of corrupted data. However, it&amp;#39;s probably not the ideal user experience.&lt;/p&gt;

&lt;p&gt;Instead of unmounting the whole app every time there&amp;#39;s an error, you can use error boundaries. Error boundaries are special components that capture errors inside their subtree and display a fallback UI in its place. Think of error boundaries like try-catch statements, but for React components.&lt;/p&gt;

&lt;p&gt;For more details, check out our &lt;a href=&quot;/react/blog/2017/07/26/error-handling-in-react-16.html&quot;&gt;previous post on error handling in React 16&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;Portals&lt;/h3&gt;

&lt;p&gt;Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;c1&quot;&gt;// React does *not* create a new div. It renders the children into `domNode`.&lt;/span&gt;
  &lt;span class=&quot;c1&quot;&gt;// `domNode` is any valid DOM node, regardless of its location in the DOM.&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ReactDOM&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createPortal&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;domNode&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;See a full example in the &lt;a href=&quot;/react/docs/portals.html&quot;&gt;documentation for portals&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;Better server-side rendering&lt;/h3&gt;

&lt;p&gt;React 16 includes a completely rewritten server renderer. It&amp;#39;s really fast. It supports &lt;strong&gt;streaming&lt;/strong&gt;, so you can start sending bytes to the client faster. And thanks to a &lt;a href=&quot;#reduced-file-size&quot;&gt;new packaging strategy&lt;/a&gt; that compiles away &lt;code&gt;process.env&lt;/code&gt; checks (Believe it or not, reading &lt;code&gt;process.env&lt;/code&gt; in Node is really slow!), you no longer need to bundle React to get good server-rendering performance.&lt;/p&gt;

&lt;p&gt;Core team member Sasha Aickin wrote a &lt;a href=&quot;https://medium.com/@aickin/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67&quot;&gt;great article describing React 16&amp;#39;s SSR improvements&lt;/a&gt;. According to Sasha&amp;#39;s synthetic benchmarks, server rendering in React 16 is roughly &lt;strong&gt;three times faster&lt;/strong&gt; than React 15. &amp;quot;When comparing against React 15 with &lt;code&gt;process.env&lt;/code&gt; compiled out, there’s about a 2.4x improvement in Node 4, about a 3x performance improvement in Node 6, and a full 3.8x improvement in the new Node 8.4 release. And if you compare against React 15 without compilation, React 16 has a full order of magnitude gain in SSR in the latest version of Node!&amp;quot; (As Sasha points out, please be aware that these numbers are based on synthetic benchmarks and may not reflect real-world performance.)&lt;/p&gt;

&lt;p&gt;In addition, React 16 is better at hydrating server-rendered HTML once it reaches the client. It no longer requires the initial render to exactly match the result from the server. Instead, it will attempt to reuse as much of the existing DOM as possible. No more checksums! In general, we don&amp;#39;t recommend that you render different content on the client versus the server, but it can be useful in some cases (e.g. timestamps).&lt;/p&gt;

&lt;p&gt;See the &lt;a href=&quot;/react/docs/react-dom-server.html&quot;&gt;documentation for &lt;code&gt;ReactDOMServer&lt;/code&gt;&lt;/a&gt; for more details.&lt;/p&gt;

&lt;h3&gt;Support for custom DOM attributes&lt;/h3&gt;

&lt;p&gt;Instead of ignoring unrecognized HTML and SVG attributes, React will now &lt;a href=&quot;https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html&quot;&gt;pass them through to the DOM&lt;/a&gt;. This has the added benefit of allowing us to get rid of most of React&amp;#39;s attribute whitelist, resulting in reduced file sizes.&lt;/p&gt;

&lt;h3&gt;Reduced file size&lt;/h3&gt;

&lt;p&gt;Despite all these additions, React 16 is actually &lt;strong&gt;smaller&lt;/strong&gt; compared to 15.6.1!&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;react&lt;/code&gt; is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped).&lt;/li&gt;
&lt;li&gt;&lt;code&gt;react-dom&lt;/code&gt; is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped).&lt;/li&gt;
&lt;li&gt;&lt;code&gt;react&lt;/code&gt; + &lt;code&gt;react-dom&lt;/code&gt; is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That amounts to a combined &lt;strong&gt;32% size decrease compared to the previous version (30% post-gzip)&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The size difference is partly attributable to a change in packaging. React now uses &lt;a href=&quot;https://rollupjs.org/&quot;&gt;Rollup&lt;/a&gt; to create flat bundles for each of its different target formats, resulting in both size and runtime performance wins. The flat bundle format also means that React&amp;#39;s impact on bundle size is roughly consistent regardless of how your ship your app, whether it&amp;#39;s with Webpack, Browserify, the pre-built UMD bundles, or any other system.&lt;/p&gt;

&lt;h3&gt;MIT licensed&lt;/h3&gt;

&lt;p&gt;&lt;a href=&quot;https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/&quot;&gt;In case you missed it&lt;/a&gt;, React 16 is available under the MIT license. We&amp;#39;ve also published React 15.6.2 under MIT, for those who are unable to upgrade immediately.&lt;/p&gt;

&lt;h3&gt;New core architecture&lt;/h3&gt;

&lt;p&gt;React 16 is the first version of React built on top of a new core architecture, codenamed &amp;quot;Fiber.&amp;quot; You can read all about this project over on &lt;a href=&quot;https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible-rewrite-of-our-frontend-ui-library/&quot;&gt;Facebook&amp;#39;s engineering blog&lt;/a&gt;. (Spoiler: we rewrote React!)&lt;/p&gt;

&lt;p&gt;Fiber is responsible for most of the new features in React 16, like error boundaries and fragments. Over the next few releases, you can expect more new features as we begin to unlock the full potential of React.&lt;/p&gt;

&lt;p&gt;Perhaps the most exciting area we&amp;#39;re working on is &lt;strong&gt;async rendering&lt;/strong&gt;—a strategy for cooperatively scheduling rendering work by periodically yielding execution to the browser. The upshot is that, with async rendering, apps are more responsive because React avoids blocking the main thread.&lt;/p&gt;

&lt;p&gt;This demo provides an early peek at the types of problems async rendering can solve:&lt;/p&gt;

&lt;blockquote class=&quot;twitter-tweet&quot; data-lang=&quot;en&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;Ever wonder what &amp;quot;async rendering&amp;quot; means? Here&amp;#39;s a demo of how to coordinate an async React tree with non-React work &lt;a href=&quot;https://t.co/3snoahB3uV&quot;&gt;https://t.co/3snoahB3uV&lt;/a&gt; &lt;a href=&quot;https://t.co/egQ988gBjR&quot;&gt;pic.twitter.com/egQ988gBjR&lt;/a&gt;&lt;/p&gt;&amp;mdash; Andrew Clark (@acdlite) &lt;a href=&quot;https://twitter.com/acdlite/status/909926793536094209&quot;&gt;September 18, 2017&lt;/a&gt;&lt;/blockquote&gt;

&lt;script async src=&quot;//platform.twitter.com/widgets.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;

&lt;p&gt;&lt;em&gt;Tip: Pay attention to the spinning black square.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;We think async rendering is a big deal, and represents the future of React. To make migration to v16.0 as smooth as possible, we&amp;#39;re not enabling any async features yet, but we&amp;#39;re excited to start rolling them out in the coming months. Stay tuned!&lt;/p&gt;

&lt;h2&gt;Installation&lt;/h2&gt;

&lt;p&gt;React v16.0.0 is available on the npm registry.&lt;/p&gt;

&lt;p&gt;To install React 16 with Yarn, run:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;yarn add react@^16.0.0 react-dom@^16.0.0
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;To install React 16 with npm, run:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;npm install --save react@^16.0.0 react-dom@^16.0.0
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;We also provide UMD builds of React via a CDN:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span class=&quot;na&quot;&gt;crossorigin&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;src=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&amp;quot;https://unpkg.com/react@16/umd/react.production.min.js&amp;quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span class=&quot;na&quot;&gt;crossorigin&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;src=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&amp;quot;https://unpkg.com/react-dom@16/umd/react-dom.production.min.js&amp;quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Refer to the documentation for &lt;a href=&quot;/react/docs/installation.html&quot;&gt;detailed installation instructions&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;Upgrading&lt;/h2&gt;

&lt;p&gt;Although React 16 includes significant internal changes, in terms of upgrading, you can think of this like any other major React release. We&amp;#39;ve been serving React 16 to Facebook and Messenger.com users since earlier this year, and we released several beta and release candidate versions to flush out additional issues. With minor exceptions, &lt;strong&gt;if your app runs in 15.6 without any warnings, it should work in 16.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;New deprecations&lt;/h3&gt;

&lt;p&gt;Hydrating a server-rendered container now has an explicit API. If you&amp;#39;re reviving server-rendered HTML, use &lt;a href=&quot;/react/docs/react-dom.html#hydrate&quot;&gt;&lt;code&gt;ReactDOM.hydrate&lt;/code&gt;&lt;/a&gt; instead of &lt;code&gt;ReactDOM.render&lt;/code&gt;. Keep using &lt;code&gt;ReactDOM.render&lt;/code&gt; if you&amp;#39;re just doing client-side rendering.&lt;/p&gt;

&lt;h3&gt;React Addons&lt;/h3&gt;

&lt;p&gt;As previously announced, we&amp;#39;ve &lt;a href=&quot;/react/blog/2017/04/07/react-v15.5.0.html#discontinuing-support-for-react-addons&quot;&gt;discontinued support for React Addons&lt;/a&gt;. We expect the latest version of each addon (except &lt;code&gt;react-addons-perf&lt;/code&gt;; see below) to work for the foreseeable future, but we won&amp;#39;t publish additional updates.&lt;/p&gt;

&lt;p&gt;Refer to the previous announcement for &lt;a href=&quot;/react/blog/2017/04/07/react-v15.5.0.html#discontinuing-support-for-react-addons&quot;&gt;suggestions on how to migrate&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;react-addons-perf&lt;/code&gt; no longer works at all in React 16. It&amp;#39;s likely that we&amp;#39;ll release a new version of this tool in the future. In the meantime, you can &lt;a href=&quot;/react/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab&quot;&gt;use your browser&amp;#39;s performance tools to profile React components&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;Breaking changes&lt;/h3&gt;

&lt;p&gt;React 16 includes a number of small breaking changes. These only affect uncommon use cases and we don&amp;#39;t expect them to break most apps.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;React 15 had limited, undocumented support for error boundaries using &lt;code&gt;unstable_handleError&lt;/code&gt;. This method has been renamed to &lt;code&gt;componentDidCatch&lt;/code&gt;. You can use a codemod to &lt;a href=&quot;https://github.com/reactjs/react-codemod#error-boundaries&quot;&gt;automatically migrate to the new API&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;ReactDOM.render&lt;/code&gt; and &lt;code&gt;ReactDOM.unstable_renderIntoContainer&lt;/code&gt; now return null if called from inside a lifecycle method. To work around this, you can use &lt;a href=&quot;https://github.com/facebook/react/issues/10309#issuecomment-318433235&quot;&gt;portals&lt;/a&gt; or &lt;a href=&quot;https://github.com/facebook/react/issues/10309#issuecomment-318434635&quot;&gt;refs&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;setState&lt;/code&gt;:

&lt;ul&gt;
&lt;li&gt;Calling &lt;code&gt;setState&lt;/code&gt; with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render.&lt;/li&gt;
&lt;li&gt;Calling &lt;code&gt;setState&lt;/code&gt; directly in render always causes an update. This was not previously the case. Regardless, you should not be calling setState from render.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;setState&lt;/code&gt; callbacks (second argument) now fire immediately after &lt;code&gt;componentDidMount&lt;/code&gt; / &lt;code&gt;componentDidUpdate&lt;/code&gt; instead of after all components have rendered.&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;When replacing &lt;code&gt;&amp;lt;A /&amp;gt;&lt;/code&gt; with &lt;code&gt;&amp;lt;B /&amp;gt;&lt;/code&gt;,  &lt;code&gt;B.componentWillMount&lt;/code&gt; now always happens before  &lt;code&gt;A.componentWillUnmount&lt;/code&gt;. Previously, &lt;code&gt;A.componentWillUnmount&lt;/code&gt; could fire first in some cases.&lt;/li&gt;
&lt;li&gt;Previously, changing the ref to a component would always detach the ref before that component&amp;#39;s render is called. Now, we change the ref later, when applying the changes to the DOM.&lt;/li&gt;
&lt;li&gt;It is not safe to re-render into a container that was modified by something other than React. This worked previously in some cases but was never supported. We now emit a warning in this case. Instead you should clean up your component trees using &lt;code&gt;ReactDOM.unmountComponentAtNode&lt;/code&gt;. &lt;a href=&quot;https://github.com/facebook/react/issues/10294#issuecomment-318820987&quot;&gt;See this example.&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;componentDidUpdate&lt;/code&gt; lifecycle no longer receives &lt;code&gt;prevContext&lt;/code&gt; param. (See &lt;a href=&quot;https://github.com/facebook/react/issues/8631&quot;&gt;#8631&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Shallow renderer no longer calls &lt;code&gt;componentDidUpdate&lt;/code&gt; because DOM refs are not available. This also makes it consistent with &lt;code&gt;componentDidMount&lt;/code&gt; (which does not get called in previous versions either).&lt;/li&gt;
&lt;li&gt;Shallow renderer does not implement &lt;code&gt;unstable_batchedUpdates&lt;/code&gt; anymore.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;Packaging&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;There is no &lt;code&gt;react/lib/*&lt;/code&gt; and &lt;code&gt;react-dom/lib/*&lt;/code&gt; anymore. Even in CommonJS environments, React and ReactDOM are precompiled to single files (“flat bundles”). If you previously relied on undocumented React internals, and they don’t work anymore, let us know about your specific case in a new issue, and we’ll try to figure out a migration strategy for you.&lt;/li&gt;
&lt;li&gt;There is no &lt;code&gt;react-with-addons.js&lt;/code&gt; build anymore. All compatible addons are published separately on npm, and have single-file browser versions if you need them.&lt;/li&gt;
&lt;li&gt;The deprecations introduced in 15.x have been removed from the core package. &lt;code&gt;React.createClass&lt;/code&gt; is now available as &lt;code&gt;create-react-class&lt;/code&gt;, &lt;code&gt;React.PropTypes&lt;/code&gt; as &lt;code&gt;prop-types&lt;/code&gt;, &lt;code&gt;React.DOM&lt;/code&gt; as &lt;code&gt;react-dom-factories&lt;/code&gt;, &lt;code&gt;react-addons-test-utils&lt;/code&gt; as &lt;code&gt;react-dom/test-utils&lt;/code&gt;, and shallow renderer as &lt;code&gt;react-test-renderer/shallow&lt;/code&gt;. See &lt;a href=&quot;https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html&quot;&gt;15.5.0&lt;/a&gt; and &lt;a href=&quot;https://facebook.github.io/react/blog/2017/06/13/react-v15.6.0.html&quot;&gt;15.6.0&lt;/a&gt; blog posts for instructions on migrating code and automated codemods.&lt;/li&gt;
&lt;li&gt;The names and paths to the single-file browser builds have changed to emphasize the difference between development and production builds. For example:

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;react/dist/react.js&lt;/code&gt; → &lt;code&gt;react/umd/react.development.js&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;react/dist/react.min.js&lt;/code&gt; → &lt;code&gt;react/umd/react.production.min.js&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;react-dom/dist/react-dom.js&lt;/code&gt; → &lt;code&gt;react-dom/umd/react-dom.development.js&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;react-dom/dist/react-dom.min&lt;/code&gt;.js → &lt;code&gt;react-dom/umd/react-dom.production.min.js&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;JavaScript Environment Requirements&lt;/h2&gt;

&lt;p&gt;React 16 depends on the collection types &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map&quot;&gt;Map&lt;/a&gt; and &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set&quot;&gt;Set&lt;/a&gt;. If you support older browsers and devices which may not yet provide these natively (e.g. IE &amp;lt; 11), consider including a global polyfill in your bundled application, such as &lt;a href=&quot;https://github.com/zloirock/core-js&quot;&gt;core-js&lt;/a&gt; or &lt;a href=&quot;https://babeljs.io/docs/usage/polyfill/&quot;&gt;babel-polyfill&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;A polyfilled environment for React 16 using core-js to support older browsers might look like:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kr&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;core-js/es6/map&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;core-js/es6/set&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;kr&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;react&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ReactDOM&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;react-dom&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;nx&quot;&gt;ReactDOM&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
  &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;h1&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Hello&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;world&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;!&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/h1&amp;gt;,&lt;/span&gt;
  &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getElementById&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;root&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;React also depends on &lt;code&gt;requestAnimationFrame&lt;/code&gt; (even in test environments). A simple shim for test environments would be:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;nx&quot;&gt;global&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;requestAnimationFrame&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;setTimeout&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2&gt;Acknowledgments&lt;/h2&gt;

&lt;p&gt;As always, this release would not have been possible without our open source contributors. Thanks to everyone who filed bugs, opened PRs, responded to issues, wrote documentation, and more!&lt;/p&gt;

&lt;p&gt;Special thanks to our core contributors, especially for their heroic efforts over the past few weeks during the prerelease cycle: &lt;a href=&quot;https://twitter.com/aweary&quot;&gt;Brandon Dail&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/monasticpanic&quot;&gt;Jason Quense&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/natehunzaker&quot;&gt;Nathan Hunzaker&lt;/a&gt;, and &lt;a href=&quot;https://twitter.com/xander76&quot;&gt;Sasha Aickin&lt;/a&gt;.&lt;/p&gt;
</description>
				<pubDate>2017-09-26T00:00:00-07:00</pubDate>
				<link>https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html</link>
				<guid isPermaLink="true">https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html</guid>
			</item>
		
			<item>
				<title>React v15.6.2</title>
				<description>&lt;p&gt;Today we&amp;#39;re sending out React 15.6.2. In 15.6.1, we shipped a few fixes for change events and inputs that had some unintended consequences. Those regressions have been ironed out, and we&amp;#39;ve also included a few more fixes to improve the stability of React across all browsers.&lt;/p&gt;

&lt;p&gt;Additionally, 15.6.2 adds support for the &lt;a href=&quot;https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist&quot;&gt;&lt;code&gt;controlList&lt;/code&gt;&lt;/a&gt; attribute, and CSS columns are no longer appended with a &lt;code&gt;px&lt;/code&gt; suffix.&lt;/p&gt;

&lt;h2&gt;Installation&lt;/h2&gt;

&lt;p&gt;We recommend using &lt;a href=&quot;https://yarnpkg.com/&quot;&gt;Yarn&lt;/a&gt; or &lt;a href=&quot;https://www.npmjs.com/&quot;&gt;npm&lt;/a&gt; for managing front-end dependencies. If you&amp;#39;re new to package managers, the &lt;a href=&quot;https://yarnpkg.com/en/docs/getting-started&quot;&gt;Yarn documentation&lt;/a&gt; is a good place to get started.&lt;/p&gt;

&lt;p&gt;To install React with Yarn, run:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;yarn add react@^15.6.2 react-dom@^15.6.2
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;To install React with npm, run:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;npm install --save react@^15.6.2 react-dom@^15.6.2
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;We recommend using a bundler like &lt;a href=&quot;https://webpack.js.org/&quot;&gt;webpack&lt;/a&gt; or &lt;a href=&quot;http://browserify.org/&quot;&gt;Browserify&lt;/a&gt; so you can write modular code and bundle it together into small packages to optimize load time.&lt;/p&gt;

&lt;p&gt;Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to &lt;a href=&quot;/react/docs/optimizing-performance.html#use-the-production-build&quot;&gt;use the production build&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;In case you don&amp;#39;t use a bundler, we also provide pre-built bundles in the npm packages which you can &lt;a href=&quot;/react/docs/installation.html#using-a-cdn&quot;&gt;include as script tags&lt;/a&gt; on your page:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;React&lt;/strong&gt;&lt;br/&gt;
Dev build with warnings: &lt;a href=&quot;https://unpkg.com/react@15.6.2/dist/react.js&quot;&gt;react/dist/react.js&lt;/a&gt;&lt;br/&gt;
Minified build for production: &lt;a href=&quot;https://unpkg.com/react@15.6.2/dist/react.min.js&quot;&gt;react/dist/react.min.js&lt;/a&gt;&lt;br/&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React with Add-Ons&lt;/strong&gt;&lt;br/&gt;
Dev build with warnings: &lt;a href=&quot;https://unpkg.com/react@15.6.2/dist/react-with-addons.js&quot;&gt;react/dist/react-with-addons.js&lt;/a&gt;&lt;br/&gt;
Minified build for production: &lt;a href=&quot;https://unpkg.com/react@15.5.0/dist/react-with-addons.min.js&quot;&gt;react/dist/react-with-addons.min.js&lt;/a&gt;&lt;br/&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React DOM&lt;/strong&gt; (include React in the page before React DOM)&lt;br/&gt;
Dev build with warnings: &lt;a href=&quot;https://unpkg.com/react-dom@15.6.2/dist/react-dom.js&quot;&gt;react-dom/dist/react-dom.js&lt;/a&gt;&lt;br/&gt;
Minified build for production: &lt;a href=&quot;https://unpkg.com/react-dom@15.6.2/dist/react-dom.min.js&quot;&gt;react-dom/dist/react-dom.min.js&lt;/a&gt;&lt;br/&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React DOM Server&lt;/strong&gt; (include React in the page before React DOM Server)&lt;br/&gt;
Dev build with warnings: &lt;a href=&quot;https://unpkg.com/react-dom@15.6.2/dist/react-dom-server.js&quot;&gt;react-dom/dist/react-dom-server.js&lt;/a&gt;&lt;br/&gt;
Minified build for production: &lt;a href=&quot;https://unpkg.com/react-dom@15.6.2/dist/react-dom-server.min.js&quot;&gt;react-dom/dist/react-dom-server.min.js&lt;/a&gt;&lt;br/&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We&amp;#39;ve also published version &lt;code&gt;15.6.2&lt;/code&gt; of &lt;code&gt;react&lt;/code&gt; and &lt;code&gt;react-dom&lt;/code&gt; on npm, and the &lt;code&gt;react&lt;/code&gt; package on bower.&lt;/p&gt;

&lt;hr&gt;

&lt;h2&gt;Changelog&lt;/h2&gt;

&lt;h2&gt;15.6.2 (September 25, 2017)&lt;/h2&gt;

&lt;h3&gt;All Packages&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Switch from BSD + Patents to MIT license&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;React DOM&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Fix a bug where modifying &lt;code&gt;document.documentMode&lt;/code&gt; would trigger IE detection in other browsers, breaking change events. (&lt;a href=&quot;https://github.com/aweary&quot;&gt;@aweary&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/10032&quot;&gt;#10032&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;CSS Columns are treated as unitless numbers. (&lt;a href=&quot;https://github.com/aweary&quot;&gt;@aweary&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/10115&quot;&gt;#10115&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Fix bug in QtWebKit when wrapping synthetic events in proxies. (&lt;a href=&quot;https://github.com/walrusfruitcake&quot;&gt;@walrusfruitcake&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/10011&quot;&gt;#10115&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Prevent event handlers from receiving extra argument in development. (&lt;a href=&quot;https://github.com/aweary&quot;&gt;@aweary&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/8363&quot;&gt;#10115&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Fix cases where &lt;code&gt;onChange&lt;/code&gt; would not fire with &lt;code&gt;defaultChecked&lt;/code&gt; on radio inputs. (&lt;a href=&quot;https://github.com/jquense&quot;&gt;@jquense&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/10156&quot;&gt;#10156&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Add support for &lt;code&gt;controlList&lt;/code&gt; attribute to DOM property whitelist (&lt;a href=&quot;https://github.com/nhunzaker&quot;&gt;@nhunzaker&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/9940&quot;&gt;#9940&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Fix a bug where creating an element with a ref in a constructor did not throw an error in development. (&lt;a href=&quot;https://github.com/iansu&quot;&gt;@iansu&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/10025&quot;&gt;#10025&lt;/a&gt;)&lt;/li&gt;
&lt;/ul&gt;
</description>
				<pubDate>2017-09-25T00:00:00-07:00</pubDate>
				<link>https://facebook.github.io/react/blog/2017/09/25/react-v15.6.2.html</link>
				<guid isPermaLink="true">https://facebook.github.io/react/blog/2017/09/25/react-v15.6.2.html</guid>
			</item>
		
			<item>
				<title>DOM Attributes in React 16</title>
				<description>&lt;p&gt;In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn&amp;#39;t recognize, React would just skip it. For example, this:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Your code:&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;mycustomattribute&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;something&amp;quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;would render an empty div to the DOM with React 15:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// React 15 output:&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;In React 16, we are making a change. Now, any unknown attributes will end up in the DOM:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// React 16 output:&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;mycustomattribute&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;something&amp;quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2&gt;Why Are We Changing This?&lt;/h2&gt;

&lt;p&gt;React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, it makes sense for React to use the &lt;code&gt;camelCase&lt;/code&gt; convention just like the DOM APIs:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;tabIndex&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;-1&amp;quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;This has not changed. However, the way we enforced it in the past forced us to maintain a whitelist of all valid React DOM attributes in the bundle:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// ...&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;summary&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;summary&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;tabIndex&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;tabindex&amp;#39;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;target&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;target&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;title&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// ...&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;This had two downsides:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;You could not &lt;a href=&quot;https://github.com/facebook/react/issues/140&quot;&gt;pass a custom attribute&lt;/a&gt;. This is useful for supplying browser-specific non-standard attributes, trying new DOM APIs, and integrating with opinionated third-party libraries.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The attribute list kept growing over time, but most React canonical attribute names are already valid in the DOM. Removing most of the whitelist helped us reduce the bundle size a little bit.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With the new approach, both of these problems are solved. With React 16, you can now pass custom attributes to all HTML and SVG elements, and React doesn&amp;#39;t have to include the whole attribute whitelist in the production version.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note that you should still use the canonical React naming for known attributes:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Yes, please&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;tabIndex&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;-1&amp;quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;// Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;tabindex&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;-1&amp;quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;In other words, the way you use DOM components in React hasn&amp;#39;t changed, but now you have some new capabilities.&lt;/p&gt;

&lt;h2&gt;Should I Keep Data in Custom Attributes?&lt;/h2&gt;

&lt;p&gt;No. We don&amp;#39;t encourage you to keep data in DOM attributes. Even if you have to, &lt;code&gt;data-&lt;/code&gt; attributes are probably a better approach, but in most cases data should be kept in React component state or external stores.&lt;/p&gt;

&lt;p&gt;However, the new feature is handy if you need to use a non-standard or a new DOM attribute, or if you need to integrate with a third-party library that relies on such attributes.&lt;/p&gt;

&lt;h2&gt;Data and ARIA Attributes&lt;/h2&gt;

&lt;p&gt;Just like before, React lets you pass &lt;code&gt;data-&lt;/code&gt; and &lt;code&gt;aria-&lt;/code&gt; attributes freely:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;foo&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;42&amp;quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;button&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;aria&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;Close&amp;quot;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;onClick&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;onClose&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;This has not changed.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;/react/docs/accessibility.html&quot;&gt;Accessibility&lt;/a&gt; is very important, so even though React 16 passes any attributes through, it still validates that &lt;code&gt;aria-&lt;/code&gt; props have correct names in development mode, just like React 15 did.&lt;/p&gt;

&lt;h2&gt;Migration Path&lt;/h2&gt;

&lt;p&gt;We have included &lt;a href=&quot;/react/warnings/unknown-prop.html&quot;&gt;a warning about unknown attributes&lt;/a&gt; since &lt;a href=&quot;https://github.com/facebook/react/releases/tag/v15.2.0&quot;&gt;React 15.2.0&lt;/a&gt; which came out more than a year ago. The vast majority of third-party libraries have already updated their code. If your app doesn&amp;#39;t produce warnings with React 15.2.0 or higher, this change should not require modifications in your application code.&lt;/p&gt;

&lt;p&gt;If you still accidentally forward non-DOM props to DOM components, with React 16 you will start seeing those attributes in the DOM, for example:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;myData&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;[Object object]&amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;This is somewhat safe (the browser will just ignore them) but we recommend to fix these cases when you see them. One potential hazard is if you pass an object that implements a custom &lt;code&gt;toString()&lt;/code&gt; or &lt;code&gt;valueOf()&lt;/code&gt; method that throws. Another possible issue is that legacy HTML attributes like &lt;code&gt;align&lt;/code&gt; and &lt;code&gt;valign&lt;/code&gt; will now be passed to the DOM. They used to be stripped out because React didn&amp;#39;t support them.&lt;/p&gt;

&lt;p&gt;To avoid these problems, we suggest to fix the warnings you see in React 15 before upgrading to React 16.&lt;/p&gt;

&lt;h2&gt;Changes in Detail&lt;/h2&gt;

&lt;p&gt;We&amp;#39;ve made a few other changes to make the behavior more predictable and help ensure you&amp;#39;re not making mistakes. We don&amp;#39;t anticipate that these changes are likely to break real-world applications.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;These changes only affect DOM components like &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt;, not your own components.&lt;/strong&gt;  &lt;/p&gt;

&lt;p&gt;Below is a detailed list of them.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Unknown attributes with string, number, and object values:&lt;/strong&gt;  &lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;mycustomattribute&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;value&amp;quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;mycustomattribute&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;42&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;mycustomattribute&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;myObject&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;React 15: Warns and ignores them.&lt;br&gt;
React 16: Converts values to strings and passes them through.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Note: attributes starting with &lt;code&gt;on&lt;/code&gt; are not passed through as an exception because this could become a potential security hole.&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Known attributes with a different canonical React name:&lt;/strong&gt;  &lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;tabindex&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;-1&amp;quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;hi&amp;quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;React 15: Warns and ignores them.&lt;br&gt;
React 16: Warns but converts values to strings and passes them through.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Note: always use the canonical React naming for all supported attributes.&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Non-boolean attributes with boolean values:&lt;/strong&gt;  &lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;React 15: Converts booleans to strings and passes them through.&lt;br&gt;
React 16: Warns and ignores them.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Non-event attributes with function values:&lt;/strong&gt;  &lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{}}&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;React 15: Converts functions to strings and passes them through.&lt;br&gt;
React 16: Warns and ignores them.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Attributes with Symbol values:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Symbol&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;foo&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)}&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;React 15: Crashes.&lt;br&gt;
React 16: Warns and ignores them.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Attributes with &lt;code&gt;NaN&lt;/code&gt; values:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;tabIndex&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;React 15: Converts &lt;code&gt;NaN&lt;/code&gt;s to strings and passes them through.&lt;br&gt;
React 16: Warns and ignores them.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;While testing this release, we have also &lt;a href=&quot;https://github.com/facebook/react/blob/master/fixtures/attribute-behavior/AttributeTableSnapshot.md&quot;&gt;created an automatically generated table&lt;/a&gt; for all known attributes to track potential regressions.&lt;/p&gt;

&lt;h2&gt;Try It!&lt;/h2&gt;

&lt;p&gt;You can try the change in &lt;a href=&quot;https://codepen.io/gaearon/pen/gxNVdP?editors=0010&quot;&gt;this CodePen&lt;/a&gt;.&lt;br&gt;
It uses React 16 RC, and you can &lt;a href=&quot;https://github.com/facebook/react/issues/10294&quot;&gt;help us by testing the RC in your project!&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;Thanks&lt;/h2&gt;

&lt;p&gt;This effort was largely driven by &lt;a href=&quot;https://github.com/nhunzaker&quot;&gt;Nathan Hunzaker&lt;/a&gt; who has been a &lt;a href=&quot;https://github.com/facebook/react/pulls?q=is%3Apr+author%3Anhunzaker+is%3Aclosed&quot;&gt;prolific outside contributor to React&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;You can find his work on this issue in several PRs over the course of last year: &lt;a href=&quot;https://github.com/facebook/react/pull/6459&quot;&gt;#6459&lt;/a&gt;, &lt;a href=&quot;https://github.com/facebook/react/pull/7311&quot;&gt;#7311&lt;/a&gt;, &lt;a href=&quot;https://github.com/facebook/react/pull/10229&quot;&gt;#10229&lt;/a&gt;, &lt;a href=&quot;https://github.com/facebook/react/pull/10397&quot;&gt;#10397&lt;/a&gt;, &lt;a href=&quot;https://github.com/facebook/react/pull/10385&quot;&gt;#10385&lt;/a&gt;, and &lt;a href=&quot;https://github.com/facebook/react/pull/10470&quot;&gt;#10470&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Major changes in a popular project can take a lot of time and research. Nathan demonstrated perseverance and commitment to getting this change through, and we are very thankful to him for this and other efforts.&lt;/p&gt;

&lt;p&gt;We would also like to thank &lt;a href=&quot;https://github.com/aweary&quot;&gt;Brandon Dail&lt;/a&gt; and &lt;a href=&quot;https://github.com/jquense&quot;&gt;Jason Quense&lt;/a&gt; for their invaluable help maintaining React this year.&lt;/p&gt;

&lt;h2&gt;Future Work&lt;/h2&gt;

&lt;p&gt;We are not changing how &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements&quot;&gt;custom elements&lt;/a&gt; work in React 16, but there are &lt;a href=&quot;https://github.com/facebook/react/issues/7249&quot;&gt;existing discussions&lt;/a&gt; about setting properties instead of attributes, and we might revisit this in React 17. Feel free to chime in if you&amp;#39;d like to help!&lt;/p&gt;
</description>
				<pubDate>2017-09-08T00:00:00-07:00</pubDate>
				<link>https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html</link>
				<guid isPermaLink="true">https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html</guid>
			</item>
		
			<item>
				<title>Error Handling in React 16</title>
				<description>&lt;p&gt;As React 16 release is getting closer, we would like to announce a few changes to how React handles JavaScript errors inside components. These changes are included in React 16 beta versions, and will be a part of React 16.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;By the way, &lt;a href=&quot;https://github.com/facebook/react/issues/10294&quot;&gt;we just released the first beta of React 16 for you to try!&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;Behavior in React 15 and Earlier&lt;/h2&gt;

&lt;p&gt;In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to &lt;a href=&quot;https://github.com/facebook/react/issues/4026&quot;&gt;emit&lt;/a&gt; &lt;a href=&quot;https://github.com/facebook/react/issues/6895&quot;&gt;cryptic&lt;/a&gt; &lt;a href=&quot;https://github.com/facebook/react/issues/8579&quot;&gt;errors&lt;/a&gt; on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them.&lt;/p&gt;

&lt;h2&gt;Introducing Error Boundaries&lt;/h2&gt;

&lt;p&gt;A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”.&lt;/p&gt;

&lt;p&gt;Error boundaries are React components that &lt;strong&gt;catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI&lt;/strong&gt; instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.&lt;/p&gt;

&lt;p&gt;A class component becomes an error boundary if it defines a new lifecycle method called &lt;code&gt;componentDidCatch(error, info)&lt;/code&gt;:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ErrorBoundary&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;constructor&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;kr&quot;&gt;super&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;hasError&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;hll&quot;&gt;  &lt;span class=&quot;nx&quot;&gt;componentDidCatch&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;error&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;info&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hll&quot;&gt;    &lt;span class=&quot;c1&quot;&gt;// Display fallback UI&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hll&quot;&gt;    &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;setState&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;hasError&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hll&quot;&gt;    &lt;span class=&quot;c1&quot;&gt;// You can also log the error to an error reporting service&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hll&quot;&gt;    &lt;span class=&quot;nx&quot;&gt;logErrorToMyService&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;error&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;info&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hll&quot;&gt;  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;hll&quot;&gt;    &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;hasError&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hll&quot;&gt;      &lt;span class=&quot;c1&quot;&gt;// You can render any custom fallback UI&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hll&quot;&gt;      &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;h1&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Something&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;went&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;wrong&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/h1&amp;gt;;&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hll&quot;&gt;    &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/span&gt;    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Then you can use it as a regular component:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;ErrorBoundary&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;MyWidget&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/ErrorBoundary&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;The &lt;code&gt;componentDidCatch()&lt;/code&gt; method works like a JavaScript &lt;code&gt;catch {}&lt;/code&gt; block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once and use it throughout your application.&lt;/p&gt;

&lt;p&gt;Note that &lt;strong&gt;error boundaries only catch errors in the components below them in the tree&lt;/strong&gt;. An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how &lt;code&gt;catch {}&lt;/code&gt; block works in JavaScript.&lt;/p&gt;

&lt;h2&gt;Live Demo&lt;/h2&gt;

&lt;p&gt;Check out &lt;a href=&quot;https://codepen.io/gaearon/pen/wqvxGa?editors=0010&quot;&gt;this example of declaring and using an error boundary&lt;/a&gt; with &lt;a href=&quot;https://github.com/facebook/react/issues/10294&quot;&gt;React 16 beta&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;Where to Place Error Boundaries&lt;/h2&gt;

&lt;p&gt;The granularity of error boundaries is up to you. You may wrap top-level route components to display a “Something went wrong” message to the user, just like server-side frameworks often handle crashes. You may also wrap individual widgets in an error boundary to protect them from crashing the rest of the application.&lt;/p&gt;

&lt;h2&gt;New Behavior for Uncaught Errors&lt;/h2&gt;

&lt;p&gt;This change has an important implication. &lt;strong&gt;As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;We debated this decision, but in our experience it is worse to leave corrupted UI in place than to completely remove it. For example, in a product like Messenger leaving the broken UI visible could lead to somebody sending a message to the wrong person. Similarly, it is worse for a payments app to display a wrong amount than to render nothing.&lt;/p&gt;

&lt;p&gt;This change means that as you migrate to React 16, you will likely uncover existing crashes in your application that have been unnoticed before. Adding error boundaries lets you provide better user experience when something goes wrong.&lt;/p&gt;

&lt;p&gt;For example, Facebook Messenger wraps content of the sidebar, the info panel, the conversation log, and the message input into separate error boundaries. If some component in one of these UI areas crashes, the rest of them remain interactive.&lt;/p&gt;

&lt;p&gt;We also encourage you to use JS error reporting services (or build your own) so that you can learn about unhandled exceptions as they happen in production, and fix them.&lt;/p&gt;

&lt;h2&gt;Component Stack Traces&lt;/h2&gt;

&lt;p&gt;React 16 prints all errors that occurred during rendering to the console in development, even if the application accidentally swallows them. In addition to the error message and the JavaScript stack, it also provides component stack traces. Now you can see where exactly in the component tree the failure has happened:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/react/img/blog/error-boundaries-stack-trace.png&quot; alt=&quot;Component stack traces in error message&quot; style=&quot;width: 100%;&quot;&gt;&lt;/p&gt;

&lt;p&gt;You can also see the filenames and line numbers in the component stack trace. This works by default in &lt;a href=&quot;https://github.com/facebookincubator/create-react-app&quot;&gt;Create React App&lt;/a&gt; projects:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/react/img/blog/error-boundaries-stack-trace-line-numbers.png&quot; alt=&quot;Component stack traces with line numbers in error message&quot; style=&quot;width: 100%;&quot;&gt;&lt;/p&gt;

&lt;p&gt;If you don’t use Create React App, you can add &lt;a href=&quot;https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source&quot;&gt;this plugin&lt;/a&gt; manually to your Babel configuration. Note that it’s intended only for development and &lt;strong&gt;must be disabled in production&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;Why Not Use &lt;code&gt;try&lt;/code&gt; / &lt;code&gt;catch&lt;/code&gt;?&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;try&lt;/code&gt; / &lt;code&gt;catch&lt;/code&gt; is great but it only works for imperative code:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;k&quot;&gt;try&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;showButton&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;();&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;catch&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;error&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;c1&quot;&gt;// ...&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;However, React components are declarative and specify &lt;em&gt;what&lt;/em&gt; should be rendered:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Button&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Error boundaries preserve the declarative nature of React, and behave as you would expect. For example, even if an error occurs in a &lt;code&gt;componentDidUpdate&lt;/code&gt; hook caused by a &lt;code&gt;setState&lt;/code&gt; somewhere deep in the tree, it will still correctly propagate to the closest error boundary.&lt;/p&gt;

&lt;h2&gt;Naming Changes from React 15&lt;/h2&gt;

&lt;p&gt;React 15 included a very limited support for error boundaries under a different method name: &lt;code&gt;unstable_handleError&lt;/code&gt;. This method no longer works, and you will need to change it to &lt;code&gt;componentDidCatch&lt;/code&gt; in your code starting from the first 16 beta release.&lt;/p&gt;

&lt;p&gt;For this change, we’ve provided &lt;a href=&quot;https://github.com/reactjs/react-codemod#error-boundaries&quot;&gt;a codemod&lt;/a&gt; to automatically migrate your code.&lt;/p&gt;
</description>
				<pubDate>2017-07-26T00:00:00-07:00</pubDate>
				<link>https://facebook.github.io/react/blog/2017/07/26/error-handling-in-react-16.html</link>
				<guid isPermaLink="true">https://facebook.github.io/react/blog/2017/07/26/error-handling-in-react-16.html</guid>
			</item>
		
			<item>
				<title>React v15.6.0</title>
				<description>&lt;p&gt;Today we are releasing React 15.6.0. As we prepare for React 16.0, we have been fixing and cleaning up many things. This release continues to pave the way.&lt;/p&gt;

&lt;h2&gt;Improving Inputs&lt;/h2&gt;

&lt;p&gt;In React 15.6.0 the &lt;code&gt;onChange&lt;/code&gt; event for inputs is a little bit more reliable and handles more edge cases, including the following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;not firing when radio button is clicked but not changed (&lt;a href=&quot;https://github.com/facebook/react/issues/1471&quot;&gt;issue 1471&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;changing an input of type &lt;code&gt;range&lt;/code&gt; with the arrow keys (&lt;a href=&quot;https://github.com/facebook/react/issues/554&quot;&gt;issue 554&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;pasting text into a text area in IE11 (&lt;a href=&quot;https://github.com/facebook/react/issues/7211&quot;&gt;issue 7211&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;auto-fill in IE11 (&lt;a href=&quot;https://github.com/facebook/react/issues/6614&quot;&gt;issue 6614&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;clearing input with &amp;#39;x&amp;#39; button or right-click &amp;#39;delete&amp;#39; in IE11 (&lt;a href=&quot;https://github.com/facebook/react/issues/6822&quot;&gt;issue 6822&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;not firing when characters are present in the input on render in IE11 (&lt;a href=&quot;https://github.com/facebook/react/issues/2185&quot;&gt;issue 2185&lt;/a&gt;)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Thanks to &lt;a href=&quot;https://github.com/jquense&quot;&gt;Jason Quense&lt;/a&gt; and everyone who helped out on those issues and PRs.&lt;/p&gt;

&lt;h2&gt;Less Noisy Deprecation Warnings&lt;/h2&gt;

&lt;p&gt;We are also including a couple of new warnings for upcoming deprecations. These should not affect most users, and for more details see the changelog below.&lt;/p&gt;

&lt;p&gt;After the last release, we got valuable community feedback that deprecation warnings were causing noise and failing tests. &lt;strong&gt;In React 15.6, we have downgraded deprecation warnings to use &lt;code&gt;console.warn&lt;/code&gt; instead of &lt;code&gt;console.error&lt;/code&gt;.&lt;/strong&gt; Our other warnings will still use &lt;code&gt;console.error&lt;/code&gt; because they surface urgent issues which could lead to bugs. Unlike our other warnings, deprecation warnings can be fixed over time and won&amp;#39;t cause problems in your app if shipped. We believe that downgrading the urgency of deprecation warnings will make your next update easier. Thanks to everyone who was involved in the discussion of this change.&lt;/p&gt;

&lt;hr&gt;

&lt;h2&gt;Installation&lt;/h2&gt;

&lt;p&gt;We recommend using &lt;a href=&quot;https://yarnpkg.com/&quot;&gt;Yarn&lt;/a&gt; or &lt;a href=&quot;https://www.npmjs.com/&quot;&gt;npm&lt;/a&gt; for managing front-end dependencies. If you&amp;#39;re new to package managers, the &lt;a href=&quot;https://yarnpkg.com/en/docs/getting-started&quot;&gt;Yarn documentation&lt;/a&gt; is a good place to get started.&lt;/p&gt;

&lt;p&gt;To install React with Yarn, run:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;yarn add react@^15.6.0 react-dom@^15.6.0
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;To install React with npm, run:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;npm install --save react@^15.6.0 react-dom@^15.6.0
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;We recommend using a bundler like &lt;a href=&quot;https://webpack.js.org/&quot;&gt;webpack&lt;/a&gt; or &lt;a href=&quot;http://browserify.org/&quot;&gt;Browserify&lt;/a&gt; so you can write modular code and bundle it together into small packages to optimize load time.&lt;/p&gt;

&lt;p&gt;Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to &lt;a href=&quot;/react/docs/optimizing-performance.html#use-the-production-build&quot;&gt;use the production build&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;In case you don&amp;#39;t use a bundler, we also provide pre-built bundles in the npm packages which you can &lt;a href=&quot;/react/docs/installation.html#using-a-cdn&quot;&gt;include as script tags&lt;/a&gt; on your page:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;React&lt;/strong&gt;&lt;br/&gt;
Dev build with warnings: &lt;a href=&quot;https://unpkg.com/react@15.6.0/dist/react.js&quot;&gt;react/dist/react.js&lt;/a&gt;&lt;br/&gt;
Minified build for production: &lt;a href=&quot;https://unpkg.com/react@15.6.0/dist/react.min.js&quot;&gt;react/dist/react.min.js&lt;/a&gt;&lt;br/&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React with Add-Ons&lt;/strong&gt;&lt;br/&gt;
Dev build with warnings: &lt;a href=&quot;https://unpkg.com/react@15.6.0/dist/react-with-addons.js&quot;&gt;react/dist/react-with-addons.js&lt;/a&gt;&lt;br/&gt;
Minified build for production: &lt;a href=&quot;https://unpkg.com/react@15.5.0/dist/react-with-addons.min.js&quot;&gt;react/dist/react-with-addons.min.js&lt;/a&gt;&lt;br/&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React DOM&lt;/strong&gt; (include React in the page before React DOM)&lt;br/&gt;
Dev build with warnings: &lt;a href=&quot;https://unpkg.com/react-dom@15.6.0/dist/react-dom.js&quot;&gt;react-dom/dist/react-dom.js&lt;/a&gt;&lt;br/&gt;
Minified build for production: &lt;a href=&quot;https://unpkg.com/react-dom@15.6.0/dist/react-dom.min.js&quot;&gt;react-dom/dist/react-dom.min.js&lt;/a&gt;&lt;br/&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React DOM Server&lt;/strong&gt; (include React in the page before React DOM Server)&lt;br/&gt;
Dev build with warnings: &lt;a href=&quot;https://unpkg.com/react-dom@15.6.0/dist/react-dom-server.js&quot;&gt;react-dom/dist/react-dom-server.js&lt;/a&gt;&lt;br/&gt;
Minified build for production: &lt;a href=&quot;https://unpkg.com/react-dom@15.6.0/dist/react-dom-server.min.js&quot;&gt;react-dom/dist/react-dom-server.min.js&lt;/a&gt;&lt;br/&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We&amp;#39;ve also published version &lt;code&gt;15.6.0&lt;/code&gt; of &lt;code&gt;react&lt;/code&gt; and &lt;code&gt;react-dom&lt;/code&gt; on npm, and the &lt;code&gt;react&lt;/code&gt; package on bower.&lt;/p&gt;

&lt;hr&gt;

&lt;h2&gt;Changelog&lt;/h2&gt;

&lt;h2&gt;15.6.0 (June 13, 2017)&lt;/h2&gt;

&lt;h3&gt;React&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Downgrade deprecation warnings to use &lt;code&gt;console.warn&lt;/code&gt; instead of &lt;code&gt;console.error&lt;/code&gt;. (&lt;a href=&quot;https://github.com/flarnie&quot;&gt;@flarnie&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/9753&quot;&gt;#9753&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Add a deprecation warning for &lt;code&gt;React.createClass&lt;/code&gt;. Points users to &lt;code&gt;create-react-class&lt;/code&gt; instead. (&lt;a href=&quot;https://github.com/flarnie&quot;&gt;@flarnie&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/9771&quot;&gt;#9771&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Add deprecation warnings and separate module for &lt;code&gt;React.DOM&lt;/code&gt; factory helpers. (&lt;a href=&quot;https://github.com/nhunzaker&quot;&gt;@nhunzaker&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/8356&quot;&gt;#8356&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Warn for deprecation of &lt;code&gt;React.createMixin&lt;/code&gt; helper, which was never used. (&lt;a href=&quot;https://github.com/aweary&quot;&gt;@aweary&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/8853&quot;&gt;#8853&lt;/a&gt;)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;React DOM&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Add support for CSS variables in &lt;code&gt;style&lt;/code&gt; attribute. (&lt;a href=&quot;https://github.com/aweary&quot;&gt;@aweary&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/9302&quot;&gt;#9302&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Add support for CSS Grid style properties. (&lt;a href=&quot;https://github.com/ericsakmar&quot;&gt;@ericsakmar&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/9185&quot;&gt;#9185&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Fix bug where inputs mutated value on type conversion. (&lt;a href=&quot;https://github.com/mhunzaker&quot;&gt;@nhunzaker&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/9806&quot;&gt;#9806&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Fix issues with &lt;code&gt;onChange&lt;/code&gt; not firing properly for some inputs. (&lt;a href=&quot;https://github.com/jquense&quot;&gt;@jquense&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/8575&quot;&gt;#8575&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Fix bug where controlled number input mistakenly allowed period. (&lt;a href=&quot;https://github.com/nhunzaker&quot;&gt;@nhunzaker&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/9584&quot;&gt;#9584&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Fix bug where performance entries were being cleared. (&lt;a href=&quot;https://github.com/chrisui&quot;&gt;@chrisui&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/9451&quot;&gt;#9451&lt;/a&gt;)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;React Addons&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Fix AMD support for addons depending on &lt;code&gt;react&lt;/code&gt;. (&lt;a href=&quot;https://github.com/flarnie&quot;&gt;@flarnie&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/issues/9919&quot;&gt;#9919&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Fix &lt;code&gt;isMounted()&lt;/code&gt; to return &lt;code&gt;true&lt;/code&gt; in &lt;code&gt;componentWillUnmount&lt;/code&gt;. (&lt;a href=&quot;https://github.com/mridgway&quot;&gt;@mridgway&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/issues/9638&quot;&gt;#9638&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Fix &lt;code&gt;react-addons-update&lt;/code&gt; to not depend on native &lt;code&gt;Object.assign&lt;/code&gt;. (&lt;a href=&quot;https://github.com/gaearon&quot;&gt;@gaearon&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/9937&quot;&gt;#9937&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Remove broken Google Closure Compiler annotation from &lt;code&gt;create-react-class&lt;/code&gt;. (&lt;a href=&quot;https://github.com/gaearon&quot;&gt;@gaearon&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/9933&quot;&gt;#9933&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Remove unnecessary dependency from &lt;code&gt;react-linked-input&lt;/code&gt;. (&lt;a href=&quot;https://github.com/gaearon&quot;&gt;@gaearon&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/9766&quot;&gt;#9766&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Point &lt;code&gt;react-addons-(css-)transition-group&lt;/code&gt; to the new package. (&lt;a href=&quot;https://github.com/gaearon&quot;&gt;@gaearon&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/9937&quot;&gt;#9937&lt;/a&gt;)&lt;/li&gt;
&lt;/ul&gt;
</description>
				<pubDate>2017-06-13T00:00:00-07:00</pubDate>
				<link>https://facebook.github.io/react/blog/2017/06/13/react-v15.6.0.html</link>
				<guid isPermaLink="true">https://facebook.github.io/react/blog/2017/06/13/react-v15.6.0.html</guid>
			</item>
		
			<item>
				<title>What&#39;s New in Create React App</title>
				<description>&lt;p&gt;Less than a year ago, we introduced &lt;a href=&quot;/react/blog/2016/07/22/create-apps-with-no-configuration.html&quot;&gt;Create React App&lt;/a&gt; as an officially supported way to create apps with zero configuration. The project has since enjoyed tremendous growth, with over 950 commits by more than 250 contributors.&lt;/p&gt;

&lt;p&gt;Today, we are excited to announce that many features that have been in the pipeline for the last few months are finally released.&lt;/p&gt;

&lt;p&gt;As usual with Create React App, &lt;strong&gt;you can enjoy these improvements in your existing non-ejected apps by updating a single dependency&lt;/strong&gt; and following our &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0&quot;&gt;migration instructions&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Newly created apps will get these improvements automatically.&lt;/p&gt;

&lt;h3&gt;webpack 2&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;This change was contributed by &lt;a href=&quot;https://github.com/Timer&quot;&gt;@Timer&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/pull/1291&quot;&gt;#1291&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;We have upgraded to webpack 2 which has been &lt;a href=&quot;https://medium.com/webpack/webpack-2-and-beyond-40520af9067f&quot;&gt;officially released&lt;/a&gt; a few months ago. It is a big upgrade with many bugfixes and general improvements. We have been testing it for a while, and now consider it stable enough to recommend it to everyone.&lt;/p&gt;

&lt;p&gt;While the Webpack configuration format has changed, Create React App users who didn&amp;#39;t eject don&amp;#39;t need to worry about it as we have updated the configuration on our side.&lt;/p&gt;

&lt;p&gt;If you had to eject your app for one reason or another, Webpack provides a &lt;a href=&quot;https://webpack.js.org/guides/migrating/&quot;&gt;configuration migration guide&lt;/a&gt; that you can follow to update your apps. Note that with each release of Create React App, we are working to support more use cases out of the box so that you don&amp;#39;t have to eject in the future.&lt;/p&gt;

&lt;p&gt;The biggest notable webpack 2 feature is the ability to write and import &lt;a href=&quot;http://2ality.com/2014/09/es6-modules-final.html&quot;&gt;ES6 modules&lt;/a&gt; directly without compiling them to CommonJS. This shouldn’t affect how you write code since you likely already use &lt;code&gt;import&lt;/code&gt; and &lt;code&gt;export&lt;/code&gt; statements, but it will help catch more mistakes like missing named exports at compile time:&lt;/p&gt;

&lt;p&gt;&lt;img src=&#39;/react/img/blog/cra-update-exports.gif&#39; alt=&#39;Export validation&#39; style=&quot;max-width:100%&quot;&gt; &lt;/p&gt;

&lt;p&gt;In the future, as the ecosystem around ES6 modules matures, you can expect more improvements to your app&amp;#39;s bundle size thanks to &lt;a href=&quot;https://webpack.js.org/guides/tree-shaking/&quot;&gt;tree shaking&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt; Runtime Error Overlay&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;This change was contributed by &lt;a href=&quot;https://github.com/Timer&quot;&gt;@Timer&lt;/a&gt; and &lt;a href=&quot;https://github.com/nicinabox&quot;&gt;@nicinabox&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/pull/1101&quot;&gt;#1101&lt;/a&gt;, &lt;a href=&quot;https://github.com/bvaughn&quot;&gt;@bvaughn&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/pull/2201&quot;&gt;#2201&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Have you ever made a mistake in code and only realized it after the console is flooded with cryptic errors? Or worse, have you ever shipped an app with crashes in production because you accidentally missed an error in development?&lt;/p&gt;

&lt;p&gt;To address these issues, we are introducing an overlay that pops up whenever there is an uncaught error in your application. It only appears in development, and you can dismiss it by pressing Escape. &lt;/p&gt;

&lt;p&gt;A GIF is worth a thousand words:&lt;/p&gt;

&lt;p&gt;&lt;img src=&#39;/react/img/blog/cra-runtime-error.gif&#39; alt=&#39;Runtime error overlay&#39; style=&quot;max-width:100%&quot;&gt; &lt;/p&gt;

&lt;p&gt;(Yes, it integrates with your editor!)&lt;/p&gt;

&lt;p&gt;In the future, we plan to teach the runtime error overlay to understand more about your React app. For example, after React 16 we plan to show React component stacks in addition to the JavaScript stacks when an error is thrown.&lt;/p&gt;

&lt;h3&gt;Progressive Web Apps by Default&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;This change was contributed by &lt;a href=&quot;https://github.com/jeffposnick&quot;&gt;@jeffposnick&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/pull/1728&quot;&gt;#1728&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Newly created projects are built as &lt;a href=&quot;https://developers.google.com/web/progressive-web-apps/&quot;&gt;Progressive Web Apps&lt;/a&gt; by default. This means that they employ &lt;a href=&quot;https://developers.google.com/web/fundamentals/getting-started/primers/service-workers&quot;&gt;service workers&lt;/a&gt; with an &lt;a href=&quot;https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network&quot;&gt;offline-first caching strategy&lt;/a&gt; to minimize the time it takes to serve the app to the users who visit it again. You can opt out of this behavior, but we recommend it both for new and existing apps, especially if you target mobile devices.&lt;/p&gt;

&lt;p&gt;&lt;img src=&#39;/react/img/blog/cra-pwa.png&#39; alt=&#39;Loading assets from service worker&#39; style=&quot;max-width:100%&quot;&gt; &lt;/p&gt;

&lt;p&gt;New apps automatically have these features, but you can easily convert an existing project to a Progressive Web App  by following &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0&quot;&gt;our migration guide&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;We will be adding &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app&quot;&gt;more documentation&lt;/a&gt; on this topic in the coming weeks. Please feel free to &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/issues/new&quot;&gt;ask any questions&lt;/a&gt; on the issue tracker!&lt;/p&gt;

&lt;h3&gt;Jest 20&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;This change was contributed by &lt;a href=&quot;https://github.com/rogeliog&quot;&gt;@rogeliog&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/pull/1614&quot;&gt;#1614&lt;/a&gt; and &lt;a href=&quot;https://github.com/gaearon&quot;&gt;@gaearon&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/pull/2171&quot;&gt;#2171&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;We are now using the latest version of Jest that includes numerous bugfixes and improvements. You can read more about the changes in &lt;a href=&quot;https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html&quot;&gt;Jest 19&lt;/a&gt; and &lt;a href=&quot;http://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html&quot;&gt;Jest 20&lt;/a&gt; blog posts.&lt;/p&gt;

&lt;p&gt;Highlights include a new &lt;a href=&quot;https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#immersive-watch-mode&quot;&gt;immersive watch mode&lt;/a&gt;, &lt;a href=&quot;https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#snapshot-updates&quot;&gt;a better snapshot format&lt;/a&gt;, &lt;a href=&quot;https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#improved-printing-of-skipped-tests&quot;&gt;improvements to printing skipped tests&lt;/a&gt;, and &lt;a href=&quot;https://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html#new-improved-testing-apis&quot;&gt;new testing APIs&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;img src=&#39;/react/img/blog/cra-jest-search.gif&#39; alt=&#39;Immersive test watcher&#39; style=&quot;max-width:100%&quot;&gt; &lt;/p&gt;

&lt;p&gt;Additionally, Create React App now support configuring a few Jest options related to coverage reporting.&lt;/p&gt;

&lt;h3&gt;Code Splitting with Dynamic import()&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;This change was contributed by &lt;a href=&quot;https://github.com/Timer&quot;&gt;@Timer&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/pull/1538&quot;&gt;#1538&lt;/a&gt; and &lt;a href=&quot;https://github.com/tharakawj&quot;&gt;@tharakawj&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/pull/1801&quot;&gt;#1801&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It is important to keep the initial JavaScript payload of web apps down to the minimum, and &lt;a href=&quot;https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2&quot;&gt;load the rest of the code on demand&lt;/a&gt;. Although Create React App supported &lt;a href=&quot;https://webpack.js.org/guides/code-splitting-async/&quot;&gt;code splitting&lt;/a&gt; using &lt;code&gt;require.ensure()&lt;/code&gt; since the first release, it used a webpack-specific syntax that did not work in Jest or other environments.&lt;/p&gt;

&lt;p&gt;In this release, we are adding support for the &lt;a href=&quot;http://2ality.com/2017/01/import-operator.html#loading-code-on-demand&quot;&gt;dynamic &lt;code&gt;import()&lt;/code&gt; proposal&lt;/a&gt; which aligns with the future web standards. Unlike &lt;code&gt;require.ensure()&lt;/code&gt;, it doesn&amp;#39;t break Jest tests, and should eventually become a part of JavaScript. We encourage you to use &lt;code&gt;import()&lt;/code&gt; to delay loading the code for non-critical component subtrees until you need to render them.&lt;/p&gt;

&lt;p&gt;&lt;img src=&#39;/react/img/blog/cra-dynamic-import.gif&#39; alt=&#39;Creating chunks with dynamic import&#39; style=&quot;max-width:100%&quot;&gt;&lt;/p&gt;

&lt;h3&gt;Better Console Output&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;This change was contributed by &lt;a href=&quot;https://github.com/gaearon&quot;&gt;@gaearon&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/pull/2120&quot;&gt;#2120&lt;/a&gt;, &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/pull/2125&quot;&gt;#2125&lt;/a&gt;, and &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/pull/2161&quot;&gt;#2161&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;We have improved the console output across the board.&lt;/p&gt;

&lt;p&gt;For example, when you start the development server, we now display the LAN address in additional to the localhost address so that you can quickly access the app from a mobile device on the same network:&lt;/p&gt;

&lt;p&gt;&lt;img src=&#39;/react/img/blog/cra-better-output.png&#39; alt=&#39;Better console output&#39; style=&quot;max-width:100%&quot;&gt; &lt;/p&gt;

&lt;p&gt;When lint errors are reported, we no longer show the warnings so that you can concentrate on more critical issues. Errors and warnings in the production build output are better formatted, and the build error overlay font size now matches the browser font size more closely.&lt;/p&gt;

&lt;h3&gt;But Wait... There&amp;#39;s More!&lt;/h3&gt;

&lt;p&gt;You can only fit so much in a blog post, but there are other long-requested features in this release, such as &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/pull/1344&quot;&gt;environment-specific and local &lt;code&gt;.env&lt;/code&gt; files&lt;/a&gt;, &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/pull/2130&quot;&gt;a lint rule against confusingly named globals&lt;/a&gt;, &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/pull/1790&quot;&gt;support for multiple proxies in development&lt;/a&gt;, &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/pull/1590&quot;&gt;a customizable browser launch script&lt;/a&gt;, and many bugfixes.&lt;/p&gt;

&lt;p&gt;You can read the full changelog and the migration guide in the &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0&quot;&gt;v1.0.0 release notes&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;Acknowledgements&lt;/h3&gt;

&lt;p&gt;This release is a result of months of work from many people in the React community. It is focused on improving both developer and end user experience, as we believe they are complementary and go hand in hand.&lt;/p&gt;

&lt;p&gt;We are grateful to &lt;a href=&quot;https://github.com/facebookincubator/create-react-app/graphs/contributors&quot;&gt;everyone who has offered their contributions&lt;/a&gt;, whether in code, documentation, or by helping other people. We would like to specifically thank &lt;a href=&quot;https://github.com/timer&quot;&gt;Joe Haddad&lt;/a&gt; for his invaluable help maintaining the project.&lt;/p&gt;

&lt;p&gt;We are excited to bring these improvements to everybody using Create React App, and we are looking forward to more of your feedback and contributions.&lt;/p&gt;
</description>
				<pubDate>2017-05-18T00:00:00-07:00</pubDate>
				<link>https://facebook.github.io/react/blog/2017/05/18/whats-new-in-create-react-app.html</link>
				<guid isPermaLink="true">https://facebook.github.io/react/blog/2017/05/18/whats-new-in-create-react-app.html</guid>
			</item>
		
			<item>
				<title>React v15.5.0</title>
				<description>&lt;p&gt;It&amp;#39;s been exactly one year since the last breaking change to React. Our next major release, React 16, will include some exciting improvements, including a &lt;a href=&quot;https://www.youtube.com/watch?v=ZCuYPiUIONs&quot;&gt;complete rewrite&lt;/a&gt; of React&amp;#39;s internals. &lt;a href=&quot;/react/contributing/design-principles.html#stability&quot;&gt;We take stability seriously&lt;/a&gt;, and are committed to bringing those improvements to all of our users with minimal effort.&lt;/p&gt;

&lt;p&gt;To that end, today we&amp;#39;re releasing React 15.5.0.&lt;/p&gt;

&lt;h3&gt;New Deprecation Warnings&lt;/h3&gt;

&lt;p&gt;The biggest change is that we&amp;#39;ve extracted &lt;code&gt;React.PropTypes&lt;/code&gt; and &lt;code&gt;React.createClass&lt;/code&gt; into their own packages. Both are still accessible via the main &lt;code&gt;React&lt;/code&gt; object, but using either will log a one-time deprecation warning to the console when in development mode. This will enable future code size optimizations.&lt;/p&gt;

&lt;p&gt;These warnings will not affect the behavior of your application. However, we realize they may cause some frustration, particularly if you use a testing framework that treats &lt;code&gt;console.error&lt;/code&gt; as a failure.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Adding new warnings is not something we do lightly.&lt;/strong&gt; Warnings in React are not mere suggestions — they are integral to our strategy of keeping as many people as possible on the latest version of React. We never add warnings without providing an incremental path forward.&lt;/p&gt;

&lt;p&gt;So while the warnings may cause frustration in the short-term, we believe &lt;strong&gt;prodding developers to migrate their codebases now prevents greater frustration in the future&lt;/strong&gt;. Proactively fixing warnings ensures you are prepared for the next major release. If your app produces zero warnings in 15.5, it should continue to work in 16 without any changes.&lt;/p&gt;

&lt;p&gt;For each of these new deprecations, we&amp;#39;ve provided a codemod to automatically migrate your code. They are available as part of the &lt;a href=&quot;https://github.com/reactjs/react-codemod&quot;&gt;react-codemod&lt;/a&gt; project.&lt;/p&gt;

&lt;h3&gt;Migrating from React.PropTypes&lt;/h3&gt;

&lt;p&gt;Prop types are a feature for runtime validation of props during development. We&amp;#39;ve extracted the built-in prop types to a separate package to reflect the fact that not everybody uses them.&lt;/p&gt;

&lt;p&gt;In 15.5, instead of accessing &lt;code&gt;PropTypes&lt;/code&gt; from the main &lt;code&gt;React&lt;/code&gt; object, install the &lt;code&gt;prop-types&lt;/code&gt; package and import them from there:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Before (15.4 and below)&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;react&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/div&amp;gt;;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;propTypes&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;hll&quot;&gt;  &lt;span class=&quot;nx&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;PropTypes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;string&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;isRequired&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;// After (15.5)&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;react&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;hll&quot;&gt;&lt;span class=&quot;kr&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;PropTypes&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;prop-types&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/div&amp;gt;;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;propTypes&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;hll&quot;&gt;  &lt;span class=&quot;nx&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;PropTypes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;string&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;isRequired&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;The &lt;a href=&quot;https://github.com/reactjs/react-codemod#react-proptypes-to-prop-types&quot;&gt;codemod&lt;/a&gt; for this change performs this conversion automatically. Basic usage:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js &amp;lt;path&amp;gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;The &lt;code&gt;propTypes&lt;/code&gt;, &lt;code&gt;contextTypes&lt;/code&gt;, and &lt;code&gt;childContextTypes&lt;/code&gt; APIs will work exactly as before. The only change is that the built-in validators now live in a separate package.&lt;/p&gt;

&lt;p&gt;You may also consider using &lt;a href=&quot;https://flow.org/&quot;&gt;Flow&lt;/a&gt; to statically type check your JavaScript code, including &lt;a href=&quot;https://flow.org/en/docs/frameworks/react/#setup-flow-with-react-a-classtoc-idtoc-setup-flow-with-react-hreftoc-setup-flow-with-reacta&quot;&gt;React components&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;Migrating from React.createClass&lt;/h3&gt;

&lt;p&gt;When React was initially released, there was no idiomatic way to create classes in JavaScript, so we provided our own: &lt;code&gt;React.createClass&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Later, classes were added to the language as part of ES2015, so we added the ability to create React components using JavaScript classes. &lt;strong&gt;Along with functional components, JavaScript classes are now the &lt;a href=&quot;/react/docs/components-and-props.html#functional-and-class-components&quot;&gt;preferred way to create components in React&lt;/a&gt;.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For your existing &lt;code&gt;createClass&lt;/code&gt; components, we recommend that you migrate them to JavaScript classes. However, if you have components that rely on mixins, converting to classes may not be immediately feasible. If so, &lt;code&gt;create-react-class&lt;/code&gt; is available on npm as a drop-in replacement:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Before (15.4 and below)&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;react&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;

&lt;span class=&quot;hll&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;/span&gt;  &lt;span class=&quot;nx&quot;&gt;mixins&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;MixinA&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Child&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;// After (15.5)&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;react&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;hll&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;createReactClass&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;create-react-class&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;hll&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;createReactClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;/span&gt;  &lt;span class=&quot;nx&quot;&gt;mixins&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;MixinA&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Child&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Your components will continue to work the same as they did before.&lt;/p&gt;

&lt;p&gt;The &lt;a href=&quot;https://github.com/reactjs/react-codemod#explanation-of-the-new-es2015-class-transform-with-property-initializers&quot;&gt;codemod&lt;/a&gt; for this change attempts to convert a &lt;code&gt;createClass&lt;/code&gt; component to a JavaScript class, with a fallback to &lt;code&gt;create-react-class&lt;/code&gt; if necessary. It has converted thousands of components internally at Facebook.&lt;/p&gt;

&lt;p&gt;Basic usage:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;jscodeshift -t react-codemod/transforms/class.js path/to/components
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h3&gt;Discontinuing support for React Addons&lt;/h3&gt;

&lt;p&gt;We&amp;#39;re discontinuing active maintenance of React Addons packages. In truth, most of these packages haven&amp;#39;t been actively maintained in a long time. They will continue to work indefinitely, but we recommend migrating away as soon as you can to prevent future breakages.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;react-addons-create-fragment&lt;/strong&gt; – React 16 will have first-class support for fragments, at which point this package won&amp;#39;t be necessary. We recommend using arrays of keyed elements instead.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;react-addons-css-transition-group&lt;/strong&gt; - Use &lt;a href=&quot;https://github.com/reactjs/react-transition-group&quot;&gt;react-transition-group/CSSTransitionGroup&lt;/a&gt; instead. Version 1.1.1 provides a drop-in replacement.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;react-addons-linked-state-mixin&lt;/strong&gt; - Explicitly set the &lt;code&gt;value&lt;/code&gt; and &lt;code&gt;onChange&lt;/code&gt; handler instead.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;react-addons-pure-render-mixin&lt;/strong&gt; - Use &lt;a href=&quot;/react/docs/react-api.html#react.purecomponent&quot;&gt;&lt;code&gt;React.PureComponent&lt;/code&gt;&lt;/a&gt; instead.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;react-addons-shallow-compare&lt;/strong&gt; - Use &lt;a href=&quot;/react/docs/react-api.html#react.purecomponent&quot;&gt;&lt;code&gt;React.PureComponent&lt;/code&gt;&lt;/a&gt; instead.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;react-addons-transition-group&lt;/strong&gt; - Use &lt;a href=&quot;https://github.com/reactjs/react-transition-group&quot;&gt;react-transition-group/TransitionGroup&lt;/a&gt; instead. Version 1.1.1 provides a drop-in replacement.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;react-addons-update&lt;/strong&gt; - Use &lt;a href=&quot;https://github.com/kolodny/immutability-helper&quot;&gt;immutability-helper&lt;/a&gt; instead, a drop-in replacement.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;react-linked-input&lt;/strong&gt; - Explicitly set the &lt;code&gt;value&lt;/code&gt; and &lt;code&gt;onChange&lt;/code&gt; handler instead.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We&amp;#39;re also discontinuing support for the &lt;code&gt;react-with-addons&lt;/code&gt; UMD build. It will be removed in React 16.&lt;/p&gt;

&lt;h3&gt;React Test Utils&lt;/h3&gt;

&lt;p&gt;Currently, the React Test Utils live inside &lt;code&gt;react-addons-test-utils&lt;/code&gt;. As of 15.5, we&amp;#39;re deprecating that package and moving them to &lt;code&gt;react-dom/test-utils&lt;/code&gt; instead:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Before (15.4 and below)&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;TestUtils&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;react-addons-test-utils&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;// After (15.5)&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;TestUtils&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;react-dom/test-utils&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;This reflects the fact that what we call the Test Utils are really a set of APIs that wrap the DOM renderer.&lt;/p&gt;

&lt;p&gt;The exception is shallow rendering, which is not DOM-specific. The shallow renderer has been moved to &lt;code&gt;react-test-renderer/shallow&lt;/code&gt;.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Before (15.4 and below)&lt;/span&gt;
&lt;span class=&quot;hll&quot;&gt;&lt;span class=&quot;kr&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;createRenderer&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;react-addons-test-utils&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// After (15.5)&lt;/span&gt;
&lt;span class=&quot;hll&quot;&gt;&lt;span class=&quot;kr&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;createRenderer&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;react-test-renderer/shallow&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;hr&gt;

&lt;h2&gt;Acknowledgements&lt;/h2&gt;

&lt;p&gt;A special thank you to these folks for transferring ownership of npm package names:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/developit&quot;&gt;Jason Miller&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/aackerman&quot;&gt;Aaron Ackerman&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/viniciusmarson&quot;&gt;Vinicius Marson&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;hr&gt;

&lt;h2&gt;Installation&lt;/h2&gt;

&lt;p&gt;We recommend using &lt;a href=&quot;https://yarnpkg.com/&quot;&gt;Yarn&lt;/a&gt; or &lt;a href=&quot;https://www.npmjs.com/&quot;&gt;npm&lt;/a&gt; for managing front-end dependencies. If you&amp;#39;re new to package managers, the &lt;a href=&quot;https://yarnpkg.com/en/docs/getting-started&quot;&gt;Yarn documentation&lt;/a&gt; is a good place to get started.&lt;/p&gt;

&lt;p&gt;To install React with Yarn, run:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;yarn add react@^15.5.0 react-dom@^15.5.0
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;To install React with npm, run:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;npm install --save react@^15.5.0 react-dom@^15.5.0
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;We recommend using a bundler like &lt;a href=&quot;https://webpack.js.org/&quot;&gt;webpack&lt;/a&gt; or &lt;a href=&quot;http://browserify.org/&quot;&gt;Browserify&lt;/a&gt; so you can write modular code and bundle it together into small packages to optimize load time.&lt;/p&gt;

&lt;p&gt;Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to &lt;a href=&quot;/react/docs/installation.html#development-and-production-versions&quot;&gt;compile it in production mode&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;In case you don&amp;#39;t use a bundler, we also provide pre-built bundles in the npm packages which you can &lt;a href=&quot;/react/docs/installation.html#using-a-cdn&quot;&gt;include as script tags&lt;/a&gt; on your page:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;React&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;https://unpkg.com/react@15.5.0/dist/react.js&quot;&gt;react/dist/react.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;https://unpkg.com/react@15.5.0/dist/react.min.js&quot;&gt;react/dist/react.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React with Add-Ons&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;https://unpkg.com/react@15.5.0/dist/react-with-addons.js&quot;&gt;react/dist/react-with-addons.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;https://unpkg.com/react@15.5.0/dist/react-with-addons.min.js&quot;&gt;react/dist/react-with-addons.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React DOM&lt;/strong&gt; (include React in the page before React DOM)&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;https://unpkg.com/react-dom@15.5.0/dist/react-dom.js&quot;&gt;react-dom/dist/react-dom.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;https://unpkg.com/react-dom@15.5.0/dist/react-dom.min.js&quot;&gt;react-dom/dist/react-dom.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React DOM Server&lt;/strong&gt; (include React in the page before React DOM Server)&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;https://unpkg.com/react-dom@15.5.0/dist/react-dom-server.js&quot;&gt;react-dom/dist/react-dom-server.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;https://unpkg.com/react-dom@15.5.0/dist/react-dom-server.min.js&quot;&gt;react-dom/dist/react-dom-server.min.js&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We&amp;#39;ve also published version &lt;code&gt;15.5.0&lt;/code&gt; of the &lt;code&gt;react&lt;/code&gt;, &lt;code&gt;react-dom&lt;/code&gt;, and addons packages on npm and the &lt;code&gt;react&lt;/code&gt; package on bower.&lt;/p&gt;

&lt;hr&gt;

&lt;h2&gt;Changelog&lt;/h2&gt;

&lt;h2&gt;15.5.0 (April 7, 2017)&lt;/h2&gt;

&lt;h3&gt;React&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Added a deprecation warning for &lt;code&gt;React.createClass&lt;/code&gt;. Points users to create-react-class instead. (&lt;a href=&quot;https://github.com/acdlite&quot;&gt;@acdlite&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/commit/d9a4fa4f51c6da895e1655f32255cf72c0fe620e&quot;&gt;d9a4fa4&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Added a deprecation warning for &lt;code&gt;React.PropTypes&lt;/code&gt;. Points users to prop-types instead. (&lt;a href=&quot;https://github.com/acdlite&quot;&gt;@acdlite&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/commit/043845ce75ea0812286bbbd9d34994bb7e01eb28&quot;&gt;043845c&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Fixed an issue when using &lt;code&gt;ReactDOM&lt;/code&gt; together with &lt;code&gt;ReactDOMServer&lt;/code&gt;. (&lt;a href=&quot;https://github.com/wacii&quot;&gt;@wacii&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/9005&quot;&gt;#9005&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Fixed issue with Closure Compiler. (&lt;a href=&quot;https://github.com/anmonteiro&quot;&gt;@anmonteiro&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/8895&quot;&gt;#8895&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Another fix for Closure Compiler. (&lt;a href=&quot;https://github.com/Shastel&quot;&gt;@Shastel&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/8882&quot;&gt;#8882&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Added component stack info to invalid element type warning. (&lt;a href=&quot;https://github.com/n3tr&quot;&gt;@n3tr&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/8495&quot;&gt;#8495&lt;/a&gt;)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;React DOM&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Fixed Chrome bug when backspacing in number inputs. (&lt;a href=&quot;https://github.com/nhunzaker&quot;&gt;@nhunzaker&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/7359&quot;&gt;#7359&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Added &lt;code&gt;react-dom/test-utils&lt;/code&gt;, which exports the React Test Utils. (&lt;a href=&quot;https://github.com/bvaughn&quot;&gt;@bvaughn&lt;/a&gt;)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;React Test Renderer&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Fixed bug where &lt;code&gt;componentWillUnmount&lt;/code&gt; was not called for children. (&lt;a href=&quot;https://github.com/gre&quot;&gt;@gre&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/8512&quot;&gt;#8512&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Added &lt;code&gt;react-test-renderer/shallow&lt;/code&gt;, which exports the shallow renderer. (&lt;a href=&quot;https://github.com/bvaughn&quot;&gt;@bvaughn&lt;/a&gt;)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;React Addons&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Last release for addons; they will no longer be actively maintained.&lt;/li&gt;
&lt;li&gt;Removed &lt;code&gt;peerDependencies&lt;/code&gt; so that addons continue to work indefinitely. (&lt;a href=&quot;https://github.com/acdlite&quot;&gt;@acdlite&lt;/a&gt; and &lt;a href=&quot;https://github.com/bvaughn&quot;&gt;@bvaughn&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/commit/8a06cd7a786822fce229197cac8125a551e8abfa&quot;&gt;8a06cd7&lt;/a&gt; and &lt;a href=&quot;https://github.com/facebook/react/commit/67a8db3650d724a51e70be130e9008806402678a&quot;&gt;67a8db3&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Updated to remove references to &lt;code&gt;React.createClass&lt;/code&gt; and &lt;code&gt;React.PropTypes&lt;/code&gt; (&lt;a href=&quot;https://github.com/acdlite&quot;&gt;@acdlite&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/commit/12a96b94823d6b6de6b1ac13bd576864abd50175&quot;&gt;12a96b9&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;react-addons-test-utils&lt;/code&gt; is deprecated. Use &lt;code&gt;react-dom/test-utils&lt;/code&gt; and &lt;code&gt;react-test-renderer/shallow&lt;/code&gt; instead. (&lt;a href=&quot;https://github.com/bvaughn&quot;&gt;@bvaughn&lt;/a&gt;)&lt;/li&gt;
&lt;/ul&gt;
</description>
				<pubDate>2017-04-07T00:00:00-07:00</pubDate>
				<link>https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html</link>
				<guid isPermaLink="true">https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html</guid>
			</item>
		
			<item>
				<title>React v15.4.0</title>
				<description>&lt;p&gt;Today we are releasing React 15.4.0.&lt;/p&gt;

&lt;p&gt;We didn&amp;#39;t announce the &lt;a href=&quot;https://github.com/facebook/react/blob/master/CHANGELOG.md#1510-may-20-2016&quot;&gt;previous&lt;/a&gt; &lt;a href=&quot;https://github.com/facebook/react/blob/master/CHANGELOG.md#1520-july-1-2016&quot;&gt;minor&lt;/a&gt; &lt;a href=&quot;https://github.com/facebook/react/blob/master/CHANGELOG.md#1530-july-29-2016&quot;&gt;releases&lt;/a&gt; on the blog because most of the changes were bug fixes. However, 15.4.0 is a special release, and we would like to highlight a few notable changes in it.&lt;/p&gt;

&lt;h3&gt;Separating React and React DOM&lt;/h3&gt;

&lt;p&gt;&lt;a href=&quot;/react/blog/2015/09/10/react-v0.14-rc1.html#two-packages-react-and-react-dom&quot;&gt;More than a year ago&lt;/a&gt;, we started separating React and React DOM into separate packages. We deprecated &lt;code&gt;React.render()&lt;/code&gt; in favor of &lt;code&gt;ReactDOM.render()&lt;/code&gt; in React 0.14, and removed DOM-specific APIs from &lt;code&gt;React&lt;/code&gt; completely in React 15. However, the React DOM implementation still &lt;a href=&quot;https://www.reddit.com/r/javascript/comments/3m6wyu/found_this_line_in_the_react_codebase_made_me/cvcyo4a/&quot;&gt;secretly lived inside the React package&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;In React 15.4.0, we are finally moving React DOM implementation to the React DOM package. The React package will now contain only the renderer-agnostic code such as &lt;code&gt;React.Component&lt;/code&gt; and &lt;code&gt;React.createElement()&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;This solves a few long-standing issues, such as &lt;a href=&quot;https://github.com/facebook/react/issues/7386&quot;&gt;errors&lt;/a&gt; when you import React DOM in the same file as the &lt;a href=&quot;https://facebook.github.io/jest/blog/2016/07/27/jest-14.html&quot;&gt;snapshot testing&lt;/a&gt; renderer.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;If you only use the official and documented React APIs you won&amp;#39;t need to change anything in your application.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;However, there is a possibility that you imported private APIs from &lt;code&gt;react/lib/*&lt;/code&gt;, or that a package you rely on might use them. We would like to remind you that this was never supported, and that your apps should not rely on internal APIs. The React internals will keep changing as we work to make React better.&lt;/p&gt;

&lt;p&gt;Another thing to watch out for is that React DOM Server is now about the same size as React DOM since it contains its own copy of the React reconciler. We don&amp;#39;t recommend using React DOM Server on the client in most cases.&lt;/p&gt;

&lt;h3&gt;Profiling Components with Chrome Timeline&lt;/h3&gt;

&lt;p&gt;You can now visualize React components in the Chrome Timeline. This lets you see which components exactly get mounted, updated, and unmounted, how much time they take relative to each other.&lt;/p&gt;

&lt;p&gt;&lt;center&gt;&lt;img src=&quot;/react/img/blog/react-perf-chrome-timeline.png&quot; width=&quot;651&quot; height=&quot;228&quot; alt=&quot;React components in Chrome timeline&quot; /&gt;&lt;/center&gt;&lt;/p&gt;

&lt;p&gt;To use it:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Load your app with &lt;code&gt;?react_perf&lt;/code&gt; in the query string (for example, &lt;code&gt;http://localhost:3000/?react_perf&lt;/code&gt;).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Open the Chrome DevTools &lt;strong&gt;Timeline&lt;/strong&gt; tab and press &lt;strong&gt;Record&lt;/strong&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Perform the actions you want to profile. Don&amp;#39;t record more than 20 seconds or Chrome might hang.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Stop recording.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;React events will be grouped under the &lt;strong&gt;User Timing&lt;/strong&gt; label.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Note that the numbers are relative so components will render faster in production. Still, this should help you realize when unrelated UI gets updated by mistake, and how deep and how often your UI updates occur.&lt;/p&gt;

&lt;p&gt;Currently Chrome, Edge, and IE are the only browsers supporting this feature, but we use the standard &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API&quot;&gt;User Timing API&lt;/a&gt; so we expect more browsers to add support for it.&lt;/p&gt;

&lt;h3&gt;Mocking Refs for Snapshot Testing&lt;/h3&gt;

&lt;p&gt;If you&amp;#39;re using Jest &lt;a href=&quot;https://facebook.github.io/jest/blog/2016/07/27/jest-14.html&quot;&gt;snapshot testing&lt;/a&gt;, you might have had &lt;a href=&quot;https://github.com/facebook/react/issues/7371&quot;&gt;issues&lt;/a&gt; with components that rely on refs. With React 15.4.0, we introduce a way to provide mock refs to the test renderer. For example, consider this component using a ref in &lt;code&gt;componentDidMount&lt;/code&gt;:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kr&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;react&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;kr&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyInput&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;componentDidMount&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;hll&quot;&gt;    &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;input&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;focus&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;();&lt;/span&gt;
&lt;/span&gt;  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

  &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
      &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;input&lt;/span&gt;
&lt;span class=&quot;hll&quot;&gt;        &lt;span class=&quot;nx&quot;&gt;ref&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;node&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;node&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/span&gt;      &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;With snapshot renderer, &lt;code&gt;this.input&lt;/code&gt; will be &lt;code&gt;null&lt;/code&gt; because there is no DOM. React 15.4.0 lets us avoid such crashes by passing a custom &lt;code&gt;createNodeMock&lt;/code&gt; function to the snapshot renderer in an &lt;code&gt;options&lt;/code&gt; argument:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kr&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;react&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyInput&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;./MyInput&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;renderer&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;react-test-renderer&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;hll&quot;&gt;&lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;createNodeMock&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;element&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hll&quot;&gt;  &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;element&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;type&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;input&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hll&quot;&gt;    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hll&quot;&gt;      &lt;span class=&quot;nx&quot;&gt;focus&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{},&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hll&quot;&gt;    &lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hll&quot;&gt;  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hll&quot;&gt;  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;null&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hll&quot;&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;renders correctly&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;kr&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;options&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createNodeMock&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;span class=&quot;hll&quot;&gt;  &lt;span class=&quot;kr&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;tree&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;renderer&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;create&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;MyInput&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;options&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/span&gt;  &lt;span class=&quot;nx&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;tree&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;toMatchSnapshot&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;();&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;We would like to thank &lt;a href=&quot;https://github.com/Aweary&quot;&gt;Brandon Dail&lt;/a&gt; for implementing this feature.&lt;/p&gt;

&lt;p&gt;You can learn more about snapshot testing in &lt;a href=&quot;https://facebook.github.io/jest/blog/2016/07/27/jest-14.html&quot;&gt;this Jest blog post&lt;/a&gt;.&lt;/p&gt;

&lt;hr&gt;

&lt;h2&gt;Installation&lt;/h2&gt;

&lt;p&gt;We recommend using &lt;a href=&quot;https://yarnpkg.com/&quot;&gt;Yarn&lt;/a&gt; or &lt;a href=&quot;https://www.npmjs.com/&quot;&gt;npm&lt;/a&gt; for managing front-end dependencies. If you&amp;#39;re new to package managers, the &lt;a href=&quot;https://yarnpkg.com/en/docs/getting-started&quot;&gt;Yarn documentation&lt;/a&gt; is a good place to get started.&lt;/p&gt;

&lt;p&gt;To install React with Yarn, run:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;yarn add react@15.4.0 react-dom@15.4.0
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;To install React with npm, run:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;npm install --save react@15.4.0 react-dom@15.4.0
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;We recommend using a bundler like &lt;a href=&quot;https://webpack.js.org/&quot;&gt;webpack&lt;/a&gt; or &lt;a href=&quot;http://browserify.org/&quot;&gt;Browserify&lt;/a&gt; so you can write modular code and bundle it together into small packages to optimize load time.&lt;/p&gt;

&lt;p&gt;Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to &lt;a href=&quot;/react/docs/installation.html#development-and-production-versions&quot;&gt;compile it in production mode&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;In case you don&amp;#39;t use a bundler, we also provide pre-built bundles in the npm packages which you can &lt;a href=&quot;/react/docs/installation.html#using-a-cdn&quot;&gt;include as script tags&lt;/a&gt; on your page:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;React&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;https://unpkg.com/react@15.4.0/dist/react.js&quot;&gt;react/dist/react.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;https://unpkg.com/react@15.4.0/dist/react.min.js&quot;&gt;react/dist/react.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React with Add-Ons&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;https://unpkg.com/react@15.4.0/dist/react-with-addons.js&quot;&gt;react/dist/react-with-addons.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;https://unpkg.com/react@15.4.0/dist/react-with-addons.min.js&quot;&gt;react/dist/react-with-addons.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React DOM&lt;/strong&gt; (include React in the page before React DOM)&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;https://unpkg.com/react-dom@15.4.0/dist/react-dom.js&quot;&gt;react-dom/dist/react-dom.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;https://unpkg.com/react-dom@15.4.0/dist/react-dom.min.js&quot;&gt;react-dom/dist/react-dom.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React DOM Server&lt;/strong&gt; (include React in the page before React DOM Server)&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;https://unpkg.com/react-dom@15.4.0/dist/react-dom-server.js&quot;&gt;react-dom/dist/react-dom-server.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;https://unpkg.com/react-dom@15.4.0/dist/react-dom-server.min.js&quot;&gt;react-dom/dist/react-dom-server.min.js&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We&amp;#39;ve also published version &lt;code&gt;15.4.0&lt;/code&gt; of the &lt;code&gt;react&lt;/code&gt;, &lt;code&gt;react-dom&lt;/code&gt;, and addons packages on npm and the &lt;code&gt;react&lt;/code&gt; package on bower.&lt;/p&gt;

&lt;hr&gt;

&lt;h2&gt;Changelog&lt;/h2&gt;

&lt;h3&gt;React&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;React package and browser build no longer &amp;quot;secretly&amp;quot; includes React DOM.&lt;br&gt;
&lt;small&gt;(&lt;a href=&quot;https://github.com/sebmarkbage&quot;&gt;@sebmarkbage&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/7164&quot;&gt;#7164&lt;/a&gt; and &lt;a href=&quot;https://github.com/facebook/react/pull/7168&quot;&gt;#7168&lt;/a&gt;)&lt;/small&gt;&lt;/li&gt;
&lt;li&gt;Required PropTypes now fail with specific messages for null and undefined.&lt;br&gt;
&lt;small&gt;(&lt;a href=&quot;https://github.com/chenglou&quot;&gt;@chenglou&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/7291&quot;&gt;#7291&lt;/a&gt;)&lt;/small&gt;&lt;/li&gt;
&lt;li&gt;Improved development performance by freezing children instead of copying.&lt;br&gt;
&lt;small&gt;(&lt;a href=&quot;https://github.com/keyanzhang&quot;&gt;@keyanzhang&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/7455&quot;&gt;#7455&lt;/a&gt;)&lt;/small&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;React DOM&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Fixed occasional test failures when React DOM is used together with shallow renderer.&lt;br&gt;
&lt;small&gt;(&lt;a href=&quot;https://github.com/goatslacker&quot;&gt;@goatslacker&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/8097&quot;&gt;#8097&lt;/a&gt;)&lt;/small&gt;&lt;/li&gt;
&lt;li&gt;Added a warning for invalid &lt;code&gt;aria-&lt;/code&gt; attributes.&lt;br&gt;
&lt;small&gt;(&lt;a href=&quot;https://github.com/jessebeach&quot;&gt;@jessebeach&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/7744&quot;&gt;#7744&lt;/a&gt;)&lt;/small&gt;&lt;/li&gt;
&lt;li&gt;Added a warning for using &lt;code&gt;autofocus&lt;/code&gt; rather than &lt;code&gt;autoFocus&lt;/code&gt;.&lt;br&gt;
&lt;small&gt;(&lt;a href=&quot;https://github.com/hkal&quot;&gt;@hkal&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/7694&quot;&gt;#7694&lt;/a&gt;)&lt;/small&gt;&lt;/li&gt;
&lt;li&gt;Removed an unnecessary warning about polyfilling &lt;code&gt;String.prototype.split&lt;/code&gt;.&lt;br&gt;
&lt;small&gt;(&lt;a href=&quot;https://github.com/nhunzaker&quot;&gt;@nhunzaker&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/7629&quot;&gt;#7629&lt;/a&gt;)&lt;/small&gt;&lt;/li&gt;
&lt;li&gt;Clarified the warning about not calling PropTypes manually.&lt;br&gt;
&lt;small&gt;(&lt;a href=&quot;https://github.com/jedwards1211&quot;&gt;@jedwards1211&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/7777&quot;&gt;#7777&lt;/a&gt;)&lt;/small&gt;&lt;/li&gt;
&lt;li&gt;The unstable &lt;code&gt;batchedUpdates&lt;/code&gt; API now passes the wrapped function&amp;#39;s return value through.&lt;br&gt;
&lt;small&gt;(&lt;a href=&quot;https://github.com/bgnorlov&quot;&gt;@bgnorlov&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/7444&quot;&gt;#7444&lt;/a&gt;)&lt;/small&gt;&lt;/li&gt;
&lt;li&gt;Fixed a bug with updating text in IE 8.&lt;br&gt;
&lt;small&gt;(&lt;a href=&quot;https://github.com/mnpenner&quot;&gt;@mnpenner&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/7832&quot;&gt;#7832&lt;/a&gt;)&lt;/small&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;React Perf&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;When ReactPerf is started, you can now view the relative time spent in components as a chart in Chrome Timeline.&lt;br&gt;
&lt;small&gt;(&lt;a href=&quot;https://github.com/gaearon&quot;&gt;@gaearon&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/7549&quot;&gt;#7549&lt;/a&gt;)&lt;/small&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;React Test Utils&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;If you call &lt;code&gt;Simulate.click()&lt;/code&gt; on a &lt;code&gt;&amp;lt;input disabled onClick={foo} /&amp;gt;&lt;/code&gt; then &lt;code&gt;foo&lt;/code&gt; will get called whereas it didn&amp;#39;t before.&lt;br&gt;
&lt;small&gt;(&lt;a href=&quot;https://github.com/nhunzaker&quot;&gt;@nhunzaker&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/7642&quot;&gt;#7642&lt;/a&gt;)&lt;/small&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;React Test Renderer&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Due to packaging changes, it no longer crashes when imported together with React DOM in the same file.&lt;br&gt;
&lt;small&gt;(&lt;a href=&quot;https://github.com/sebmarkbage&quot;&gt;@sebmarkbage&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/7164&quot;&gt;#7164&lt;/a&gt; and &lt;a href=&quot;https://github.com/facebook/react/pull/7168&quot;&gt;#7168&lt;/a&gt;)&lt;/small&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;ReactTestRenderer.create()&lt;/code&gt; now accepts &lt;code&gt;{createNodeMock: element =&amp;gt; mock}&lt;/code&gt; as an optional argument so you can mock refs with snapshot testing.&lt;br&gt;
&lt;small&gt;(&lt;a href=&quot;https://github.com/Aweary&quot;&gt;@Aweary&lt;/a&gt; in &lt;a href=&quot;https://github.com/facebook/react/pull/7649&quot;&gt;#7649&lt;/a&gt; and &lt;a href=&quot;https://github.com/facebook/react/pull/8261&quot;&gt;#8261&lt;/a&gt;)&lt;/small&gt;&lt;/li&gt;
&lt;/ul&gt;
</description>
				<pubDate>2016-11-16T00:00:00-08:00</pubDate>
				<link>https://facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html</link>
				<guid isPermaLink="true">https://facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html</guid>
			</item>
		
			<item>
				<title>Our First 50,000 Stars</title>
				<description>&lt;p&gt;Just three and a half years ago we open sourced a little JavaScript library called React. The journey since that day has been incredibly exciting.&lt;/p&gt;

&lt;h2&gt;Commemorative T-Shirt&lt;/h2&gt;

&lt;p&gt;In order to celebrate 50,000 GitHub stars, &lt;a href=&quot;http://www.maggieappleton.com/&quot;&gt;Maggie Appleton&lt;/a&gt; from &lt;a href=&quot;http://egghead.io/&quot;&gt;egghead.io&lt;/a&gt; has designed us a special T-shirt, which will be available for purchase from Teespring &lt;strong&gt;only for a week&lt;/strong&gt; through Thursday, October 6. Maggie also wrote &lt;a href=&quot;https://www.behance.net/gallery/43269677/Reacts-50000-Stars-Shirt&quot;&gt;a blog post&lt;/a&gt; showing all the different concepts she came up with before settling on the final design.&lt;/p&gt;

&lt;p&gt;&lt;a target=&quot;_blank&quot; href=&quot;https://teespring.com/react-50000-stars&quot;&gt;&lt;img src=&quot;/react/img/blog/react-50k-tshirt.jpg&quot; width=&quot;650&quot; height=&quot;340&quot; alt=&quot;React 50k Tshirt&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The T-shirts are super soft using American Apparel&amp;#39;s tri-blend fabric; we also have kids and toddler T-shirts and baby onesies available.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://teespring.com/react-50000-stars&quot;&gt;Adult T-shirts (straight-cut and fitted)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://teespring.com/react-50000-stars-kids&quot;&gt;Kids T-shirts&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://teespring.com/react-50000-stars-toddler&quot;&gt;Toddler T-Shirts&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://teespring.com/react-50000-stars-baby&quot;&gt;Baby Onesies&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Proceeds from the shirts will be donated to &lt;a href=&quot;http://www.code2040.org/&quot;&gt;CODE2040&lt;/a&gt;, a nonprofit that creates access, awareness, and opportunities in technology for underrepresented minorities with a specific focus on Black and Latinx talent.&lt;/p&gt;

&lt;h2&gt;Archeology&lt;/h2&gt;

&lt;p&gt;We&amp;#39;ve spent a lot of time trying to explain the concepts behind React and the problems it attempts to solve, but we haven&amp;#39;t talked much about how React evolved before being open sourced. This milestone seemed like as good a time as any to dig through the earliest commits and share some of the more important moments and fun facts.&lt;/p&gt;

&lt;p&gt;The story begins in our ads org, where we were building incredibly sophisticated client side web apps using an internal MVC framework called &lt;a href=&quot;http://web.archive.org/web/20130608154901/http://shaneosullivan.github.io/boltjs/intro.html&quot;&gt;BoltJS&lt;/a&gt;. Here&amp;#39;s a sample of what some Bolt code looked like:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;CarView&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;javelin/core&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;CarView&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;extend&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;container&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Container&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;properties&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;wheels&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;declare&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;nx&quot;&gt;childViews&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;I have &amp;#39;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ref&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;wheelView&amp;#39;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
        &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39; wheels&amp;#39;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
      &lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;setWheels&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;wheels&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;findRef&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;wheelView&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;setContent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;wheels&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;getWheels&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;findRef&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;wheelView&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getContent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;();&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;

&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;car&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;CarView&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;();&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;car&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;setWheels&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;car&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;placeIn&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;body&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;//&amp;lt;div&amp;gt;&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;//  &amp;lt;div&amp;gt;I have &amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;//  &amp;lt;div&amp;gt;3&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;//  &amp;lt;div&amp;gt; wheels&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;//&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Bolt introduced a number of APIs and features that would eventually make their way into React including &lt;code&gt;render&lt;/code&gt;, &lt;code&gt;createClass&lt;/code&gt;, and &lt;code&gt;refs&lt;/code&gt;. Bolt introduced the concept of &lt;code&gt;refs&lt;/code&gt; as a way to create references to nodes that can be used imperatively. This was relevant for legacy interoperability and incremental adoption, and while React would eventually strive to be a lot more functional, &lt;code&gt;refs&lt;/code&gt; proved to be a very useful way to break out of the functional paradigm when the need arose.&lt;/p&gt;

&lt;p&gt;But as our applications grew more and more sophisticated, our Bolt codebases got pretty complicated. Recognizing some of the framework&amp;#39;s shortcomings, &lt;a href=&quot;https://twitter.com/jordwalke&quot;&gt;Jordan Walke&lt;/a&gt; started experimenting with a side-project called &lt;a href=&quot;https://github.com/jordwalke/FaxJs&quot;&gt;FaxJS&lt;/a&gt;. His goal was to solve many of the same problems as Bolt, but in a very different way. This is actually where most of React&amp;#39;s fundamentals were born, including props, state, re-evaluating large portions of the tree to “diff” the UI, server-side rendering, and a basic concept of components.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;nx&quot;&gt;TestProject&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;PersonDisplayer&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;structure&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
      &lt;span class=&quot;nx&quot;&gt;classSet&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;personDisplayerContainer&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
      &lt;span class=&quot;nx&quot;&gt;titleDiv&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
        &lt;span class=&quot;nx&quot;&gt;classSet&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;personNameTitle&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
        &lt;span class=&quot;nx&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;
      &lt;span class=&quot;p&quot;&gt;}),&lt;/span&gt;
      &lt;span class=&quot;nx&quot;&gt;nestedAgeDiv&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
        &lt;span class=&quot;nx&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;Interests: &amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;interests&lt;/span&gt;
      &lt;span class=&quot;p&quot;&gt;})&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2&gt;FBolt is Born&lt;/h2&gt;

&lt;p&gt;Through his FaxJS experiment, Jordan became convinced that functional APIs  — which discouraged mutation —  offered a better, more scalable way to build user interfaces. He imported his library into Facebook&amp;#39;s codebase in March of 2012 and renamed it “FBolt”, signifying an extension of Bolt where components are written in a functional programming style. Or maybe “FBolt” was a nod to FaxJS – he didn&amp;#39;t tell us! ;)&lt;/p&gt;

&lt;p&gt;The interoperability between FBolt and Bolt allowed us to experiment with replacing just one component at a time with more functional component APIs. We could test the waters of this new functional paradigm, without having to go all in. We started with the components that were clearly best expressed functionally and then we would later continue to push the boundaries of what we could express as functions.&lt;/p&gt;

&lt;p&gt;Realizing that FBolt wouldn&amp;#39;t be a great name for the library when used on its own, Jordan Walke and &lt;a href=&quot;https://twitter.com/tomocchino&quot;&gt;Tom Occhino&lt;/a&gt; decided on a new name: “React.” After Tom sent out the diff to rename everything to React, Jordan commented:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Jordan Walke:
I might add for the sake of discussion, that many systems advertise some kind of reactivity, but they usually require that you set up some kind of point-to-point listeners and won&amp;#39;t work on structured data. This API reacts to any state or property changes, and works with data of any form (as deeply structured as the graph itself) so I think the name is fitting.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Most of Tom&amp;#39;s other commits at the time were on the first version of &lt;a href=&quot;https://github.com/graphql/graphiql&quot;&gt;GraphiQL&lt;/a&gt;, a project which was recently open sourced.&lt;/p&gt;

&lt;h2&gt;Adding JSX&lt;/h2&gt;

&lt;p&gt;Since about 2010 Facebook has been using an extension of PHP called &lt;a href=&quot;https://www.facebook.com/notes/facebook-engineering/xhp-a-new-way-to-write-php/294003943919/&quot;&gt;XHP&lt;/a&gt;, which enables engineers to create UIs using XML literals right inside their PHP code. It was first introduced to help prevent XSS holes but ended up being an excellent way to structure applications with custom components.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kr&quot;&gt;final&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;post&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;element&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nx&quot;&gt;attribute&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;kr&quot;&gt;protected&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;XHPRoot&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;$anchor&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;$this&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getChildren&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/a&amp;gt;;&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;$form&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
      &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;form&lt;/span&gt;
        &lt;span class=&quot;nx&quot;&gt;method&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;post&amp;quot;&lt;/span&gt;
        &lt;span class=&quot;nx&quot;&gt;action&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;$this&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&amp;gt;:&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;nx&quot;&gt;target&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;$this&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&amp;gt;:&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;target&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;postLink&amp;quot;&lt;/span&gt;
      &lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;$anchor&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/form&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;$this&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;transferAllAttributes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;$anchor&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;$form&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Before Jordan&amp;#39;s work had even made its way into the Facebook codebase, Adam Hupp implemented an XHP-like concept for JavaScript, written in Haskell. This system enabled you to write the following inside a JavaScript file:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;example&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;hello&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;attrib&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;special&amp;quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;h1&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Hello&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;World&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;!&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/h1&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/div&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;It would compile the above into the following normal ES3-compatible JavaScript:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;jsx_example_hello&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;attrib&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
    &lt;span class=&quot;nx&quot;&gt;S&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;create&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;div&amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;class&amp;quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;special&amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;
      &lt;span class=&quot;nx&quot;&gt;S&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;create&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;h1&amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{},&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;Hello, World!&amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]),&lt;/span&gt;
      &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;
    &lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
  &lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;In this prototype, &lt;code&gt;S.create&lt;/code&gt; would immediately create and return a DOM node. Most of the conversations on this prototype revolved around the performance characteristics of &lt;code&gt;innerHTML&lt;/code&gt; versus creating DOM nodes directly. At the time, it would have been less than ideal to push developers universally in the direction of creating DOM nodes directly since it did not perform as well, especially in Firefox and IE. Facebook&amp;#39;s then-CTO &lt;a href=&quot;https://twitter.com/btaylor&quot;&gt;Bret Taylor&lt;/a&gt; chimed in on the discussion at the time in favor of &lt;code&gt;innerHTML&lt;/code&gt; over &lt;code&gt;document.createElement&lt;/code&gt;:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Bret Taylor:
If you are not convinced about innerHTML, here is a small microbenchmark. It is about the same in Chrome. innerHTML is about 30% faster in the latest version of Firefox (much more in previous versions), and about 90% faster in IE8.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This work was eventually abandoned but was revived after React made its way into the codebase. Jordan sidelined the previous performance discussions by introducing the concept of a “Virtual DOM,” though its eventual name didn&amp;#39;t exist yet.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Jordan Walke:
For the first step, I propose that we do the easiest, yet most general transformation possible. My suggestion is to simply map xml expressions to function call expressions.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;x&amp;gt;&amp;lt;/x&amp;gt;&lt;/code&gt; becomes &lt;code&gt;x( )&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;x height=12&amp;gt;&amp;lt;/x&amp;gt;&lt;/code&gt; becomes &lt;code&gt;x( {height:12} )&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;x&amp;gt; &amp;lt;y&amp;gt; &amp;lt;/y&amp;gt; &amp;lt;/x&amp;gt;&lt;/code&gt; becomes &lt;code&gt;x({ childList: [y( )] })&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;At this point, JSX doesn&amp;#39;t need to know about React - it&amp;#39;s just a convenient way to write function calls. Coincidentally, React&amp;#39;s primary abstraction is the function. Okay maybe it&amp;#39;s not so coincidental ;)&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Adam made a very insightful comment, which is now the default way we write lists in React with JSX.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Adam Hupp:
I think we should just treat arrays of elements as a frag. This is useful for constructs like:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;ul&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;foo&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;li&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;i&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/li&amp;gt;; })}&amp;lt;/ul&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;In this case the ul(..) will get a childList with a single child, which is itself a list.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;React didn&amp;#39;t end up using Adam&amp;#39;s implementation directly. Instead, we created JSX by forking &lt;a href=&quot;https://github.com/laverdet/js-xml-literal&quot;&gt;js-xml-literal&lt;/a&gt;, a side project by XHP creator Marcel Laverdet. JSX took its name from js-xml-literal, which Jordan modified to just be syntactic sugar for deeply nested function calls.&lt;/p&gt;

&lt;h2&gt;API Churn&lt;/h2&gt;

&lt;p&gt;During the first year of React, internal adoption was growing quickly but there was quite a lot of churn in the component APIs and naming conventions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;project&lt;/code&gt; was renamed to &lt;code&gt;declare&lt;/code&gt; then to &lt;code&gt;structure&lt;/code&gt; and finally to &lt;code&gt;render&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;Componentize&lt;/code&gt; was renamed to &lt;code&gt;createComponent&lt;/code&gt; and finally to &lt;code&gt;createClass&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;As the project was about to be open sourced, &lt;a href=&quot;https://twitter.com/leeb&quot;&gt;Lee Byron&lt;/a&gt; sat down with Jordan Walke, Tom Occhino and Sebastian Markbåge in order to refactor, reimplement, and rename one of React&amp;#39;s most beloved features – the lifecycle API. Lee &lt;a href=&quot;https://gist.github.com/vjeux/f2b015d230cc1ab18ed1df30550495ed&quot;&gt;came up with a well-designed API&lt;/a&gt; that is still in place today.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Concepts

&lt;ul&gt;
&lt;li&gt;component - a ReactComponent instance&lt;/li&gt;
&lt;li&gt;state - internal state to a component&lt;/li&gt;
&lt;li&gt;props - external state to a component&lt;/li&gt;
&lt;li&gt;markup - the stringy HTML-ish stuff components generate&lt;/li&gt;
&lt;li&gt;DOM - the document and elements within the document&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;Actions

&lt;ul&gt;
&lt;li&gt;mount - to put a component into a DOM&lt;/li&gt;
&lt;li&gt;initialize - to prepare a component for rendering&lt;/li&gt;
&lt;li&gt;update - a transition of state (and props) resulting a render.&lt;/li&gt;
&lt;li&gt;render - a side-effect-free process to get the representation (markup) of a component.&lt;/li&gt;
&lt;li&gt;validate - make assertions about something created and provided&lt;/li&gt;
&lt;li&gt;destroy - opposite of initialize&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;Operands

&lt;ul&gt;
&lt;li&gt;create - make a new thing&lt;/li&gt;
&lt;li&gt;get - get an existing thing&lt;/li&gt;
&lt;li&gt;set - merge into existing&lt;/li&gt;
&lt;li&gt;replace - replace existing&lt;/li&gt;
&lt;li&gt;receive - respond to new data&lt;/li&gt;
&lt;li&gt;force - skip checks to do action&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;Notifications

&lt;ul&gt;
&lt;li&gt;shouldObjectAction&lt;/li&gt;
&lt;li&gt;objectWillAction&lt;/li&gt;
&lt;li&gt;objectDidAction&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;Instagram&lt;/h2&gt;

&lt;p&gt;In 2012, Instagram got acquired by Facebook. &lt;a href=&quot;https://twitter.com/floydophone&quot;&gt;Pete Hunt&lt;/a&gt;, who was working on Facebook photos and videos at the time, joined their newly formed web team. He wanted to build their website completely in React, which was in stark contrast with the incremental adoption model that had been used at Facebook.&lt;/p&gt;

&lt;p&gt;To make this happen, React had to be decoupled from Facebook&amp;#39;s infrastructure, since Instagram didn&amp;#39;t use any of it. This project acted as a forcing function to do the work needed to open source React. In the process, Pete also discovered and promoted a little project called webpack. He also implemented the &lt;code&gt;renderToString&lt;/code&gt; primitive which was needed to do server-side rendering.&lt;/p&gt;

&lt;p&gt;As we started to prepare for the open source launch, &lt;a href=&quot;https://twitter.com/miekd&quot;&gt;Maykel Loomans&lt;/a&gt;, a designer on Instagram, made a mock of what the website could look like. The header ended up defining the visual identity of React: its logo and the electric blue color!&lt;/p&gt;

&lt;p&gt;&lt;center&gt;&lt;a target=&quot;_blank&quot; href=&quot;/react/img/blog/react-50k-mock-full.jpg&quot;&gt;&lt;img src=&quot;/react/img/blog/react-50k-mock.jpg&quot; width=&quot;400&quot; height=&quot;410&quot; alt=&quot;React website mock&quot; /&gt;&lt;/a&gt;&lt;/center&gt;&lt;/p&gt;

&lt;p&gt;In its earliest days, React benefited tremendously from feedback, ideas, and technical contributions of early adopters and collaborators all over the company. While it might look like an overnight success in hindsight, the story of React is actually a great example of how new ideas often need to go through several rounds of refinement, iteration, and course correction over a long period of time before reaching their full potential.&lt;/p&gt;

&lt;p&gt;React&amp;#39;s approach to building user interfaces with functional programming principles has changed the way we do things in just a few short years. It goes without saying, but React would be nothing without the amazing open source community that&amp;#39;s built up around it!&lt;/p&gt;
</description>
				<pubDate>2016-09-28T00:00:00-07:00</pubDate>
				<link>https://facebook.github.io/react/blog/2016/09/28/our-first-50000-stars.html</link>
				<guid isPermaLink="true">https://facebook.github.io/react/blog/2016/09/28/our-first-50000-stars.html</guid>
			</item>
		
			<item>
				<title>Relay: State of the State</title>
				<description>&lt;p&gt;This month marks a year since we released Relay and we&amp;#39;d like to share an update on the project and what&amp;#39;s next.&lt;/p&gt;

&lt;h2&gt;A Year In Review&lt;/h2&gt;

&lt;p&gt;A year after launch, we&amp;#39;re incredibly excited to see an active community forming around Relay and that companies such as Twitter are &lt;a href=&quot;https://fabric.io/blog/building-fabric-mission-control-with-graphql-and-relay&quot;&gt;using Relay in production&lt;/a&gt;:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;For a project like mission control, GraphQL and Relay were a near-perfect solution, and the cost of building it any other way justified the investment.&lt;/p&gt;

&lt;p&gt;-- &lt;cite&gt;Fin Hopkins&lt;/cite&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This kind of positive feedback is really encouraging (I&amp;#39;ll admit to re-reading that post far too many times), and great motivation for us to keep going and make Relay even better.&lt;/p&gt;

&lt;p&gt;With the community&amp;#39;s help we&amp;#39;ve already come a long way since the technical preview. Here are some highlights:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;In March we added support for server-side rendering and for creating multiple instances of Relay on a single page. This was a coordinated effort over the course of several months by community members &lt;a href=&quot;https://github.com/denvned&quot;&gt;Denis Nedelyaev&lt;/a&gt; and &lt;a href=&quot;https://github.com/devknoll&quot;&gt;Gerald Monaco&lt;/a&gt; (now at Facebook).&lt;/li&gt;
&lt;li&gt;Also in March we added support for React Native. While we use Relay and React Native together internally, they didn&amp;#39;t quite work together in open-source out of the box. We owe a big thanks to &lt;a href=&quot;https://github.com/skevy&quot;&gt;Adam Miskiewicz&lt;/a&gt;, &lt;a href=&quot;https://github.com/boourns&quot;&gt;Tom Burns&lt;/a&gt;, &lt;a href=&quot;https://github.com/gre&quot;&gt;Gaëtan Renaudeau&lt;/a&gt;, &lt;a href=&quot;https://github.com/davidaurelio&quot;&gt;David Aurelio&lt;/a&gt;, &lt;a href=&quot;https://github.com/martinbigio&quot;&gt;Martín Bigio&lt;/a&gt;, &lt;a href=&quot;https://github.com/zpao&quot;&gt;Paul O’Shannessy&lt;/a&gt;, &lt;a href=&quot;https://github.com/sophiebits&quot;&gt;Sophie Alpert&lt;/a&gt;, and many others who helped track down and resolve issues. Finally, thanks to &lt;a href=&quot;https://github.com/steveluscher&quot;&gt;Steven Luscher&lt;/a&gt; for coordinating this effort and building the first Relay/ReactNative example app.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We&amp;#39;ve also seen some great open-source projects spring up around Relay:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/denvned&quot;&gt;Denis Nedelyaev&lt;/a&gt; created &lt;a href=&quot;https://github.com/denvned/isomorphic-relay/&quot;&gt;isomorphic-relay&lt;/a&gt;, a package that helps developers build server-rendered Relay apps where data is prepared on the server and then used to bootstrap the app on the client.&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/taion&quot;&gt;Jimmy Jia&lt;/a&gt; created &lt;a href=&quot;https://github.com/relay-tools/react-router-relay&quot;&gt;react-router-relay&lt;/a&gt; to integrate Relay data-fetching into React Router.&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/nodkz&quot;&gt;Pavel Chertorogov&lt;/a&gt; released &lt;a href=&quot;https://github.com/nodkz/react-relay-network-layer&quot;&gt;relay-network-layer&lt;/a&gt;, which adds features such as batching query requests, middleware, authentication, logging, and more.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is just a small sampling of the community&amp;#39;s contributions. So far we&amp;#39;ve merged over 300 PRs - about 25% of our commits - from over 80 of you. These PRs have improved everything from the website and docs down the very core of the framework. We&amp;#39;re humbled by these outstanding contributions and excited to keep working with each of you!&lt;/p&gt;

&lt;h1&gt;Retrospective &amp;amp; Roadmap&lt;/h1&gt;

&lt;p&gt;Earlier this year we paused to reflect on the state of the project. What was working well? What could be improved? What features should we add, and what could we remove? A few themes emerged: performance on mobile, developer experience, and empowering the community.&lt;/p&gt;

&lt;h2&gt;Mobile Perf&lt;/h2&gt;

&lt;p&gt;First, Relay was built to serve the needs of product developers at Facebook. In 2016, that means helping developers to build apps that work well on &lt;a href=&quot;https://newsroom.fb.com/news/2015/10/news-feed-fyi-building-for-all-connectivity/&quot;&gt;mobile devices connecting on slower networks&lt;/a&gt;. For example, people in developing markets commonly use &lt;a href=&quot;https://code.facebook.com/posts/307478339448736/year-class-a-classification-system-for-android/&quot;&gt;2011 year-class phones&lt;/a&gt; and connect via &lt;a href=&quot;https://code.facebook.com/posts/952628711437136/classes-performance-and-network-segmentation-on-android/&quot;&gt;2G class networks&lt;/a&gt;. These scenarios present their own challenges.&lt;/p&gt;

&lt;p&gt;Therefore, one of our primary goals this year is to optimize Relay for performance on low-end mobile devices &lt;em&gt;first&lt;/em&gt;, knowing that this can translate to improved performance on high-end devices as well. In addition to standard approaches such as benchmarking, profiling, and optimizations, we&amp;#39;re also working on big-picture changes.&lt;/p&gt;

&lt;p&gt;For example, in today&amp;#39;s Relay, here&amp;#39;s what happens when an app is opened. First, React Native starts initializing the JavaScript context (loading and parsing your code and then running it). When this finishes, the app executes and Relay sees that you need data. It constructs and prints the query, uploads the query text to the server, processes the response, and renders your app. (Note that this process applies on the web, except that the code has to be &lt;em&gt;downloaded&lt;/em&gt; instead of loaded from the device.)&lt;/p&gt;

&lt;p&gt;Ideally, though, we could begin fetching data as soon as the native code had loaded - in parallel with the JS context initialization. By the time your JS code was ready to run, the data-fetching would already be under way. To do this we would need a way to determine &lt;em&gt;statically&lt;/em&gt; - at build time - what query an application would send.&lt;/p&gt;

&lt;p&gt;The key is that GraphQL is already static - we just need to fully embrace this fact. More on this later.&lt;/p&gt;

&lt;h2&gt;Developer Experience&lt;/h2&gt;

&lt;p&gt;Next, we&amp;#39;ve paid attention to the community&amp;#39;s feedback and know that, to put it simply, Relay could be &amp;quot;easier&amp;quot; to use (and &amp;quot;simpler&amp;quot; too). This isn&amp;#39;t entirely surprising to us - Relay was originally designed as a routing library and gradually morphed into a data-fetching library. Concepts like Relay &amp;quot;routes&amp;quot;, for example, no longer serve as critical a role and are just one more concept that developers have to learn about. Another example is mutations: while writes &lt;em&gt;are&lt;/em&gt; inherently more complex than reads, our API doesn&amp;#39;t make the simple things simple enough.&lt;/p&gt;

&lt;p&gt;Alongside our focus on mobile performance, we&amp;#39;ve also kept the developer experience in mind as we evolve Relay core.&lt;/p&gt;

&lt;h2&gt;Empowering the Community&lt;/h2&gt;

&lt;p&gt;Finally, we want to make it easier for people in the community to develop useful libraries that work with Relay. By comparison, React&amp;#39;s small surface area - components - allows developers to build cool things like routing, higher-order components, or reusable text editors. For Relay, this would mean having the framework provide core primitives that users can build upon. We want it to be possible for the community to integrate Relay with view libraries other than React, or to build real-time subscriptions as a complementary library.&lt;/p&gt;

&lt;h1&gt;What&amp;#39;s Next&lt;/h1&gt;

&lt;p&gt;These were big goals, and also a bit scary; we knew that incremental improvements would only allow us to move so fast. So in April we started a project to build a new implementation of Relay core targeting low-end mobile devices from the start.&lt;/p&gt;

&lt;p&gt;As you can guess since we&amp;#39;re writing this, the experiment was a success. The result is a new core that retains the best parts of Relay today - colocated components &amp;amp; data-dependencies, automatic data/view consistency, declarative data-fetching - while improving performance on mobile devices and addressing several common areas of confusion.&lt;/p&gt;

&lt;p&gt;We&amp;#39;re currently focused on shipping the first applications using the new core: ironing out bugs, refining the API changes and developer experience, and adding any missing features. We&amp;#39;re excited to bring these changes to open source, and will do so once we&amp;#39;ve proven them in production. We&amp;#39;ll go into more detail in some upcoming talks - links below - but for now here&amp;#39;s an overview:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Static Queries&lt;/strong&gt;: By adding a couple of Relay-specific directives, we&amp;#39;ve been able to retain the expressivity of current Relay queries using static syntax (concretely: you know what query an app will execute just by looking at the source text, without having to run that code). For starters this will allow Relay apps to start fetching data in parallel with JavaScript initialization. But it also unlocks other possibilities: knowing the query ahead of time means that we can generate optimized code for handling query responses, for example, or for reading query data from an offline cache.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Expressive Mutations&lt;/strong&gt;: We&amp;#39;ll continue to support a higher-level mutation API for common cases, but will also provide a lower-level API that allows &amp;quot;raw&amp;quot; data access where necessary. If you need to order a list of cached elements, for example, there will be a way to &lt;code&gt;sort()&lt;/code&gt; it.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Route-less Relay&lt;/strong&gt;: Routes will be gone in open source. Instead of a route with multiple query definitions, you&amp;#39;ll just provide a single query with as many root fields as you want.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Cache Eviction/Garbage Collection&lt;/strong&gt;: The API and architecture is designed from the start to allow removing cached data that is no longer referenced by a mounted view.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Stepping back, we recognize that any API changes will require an investment on your part. To make the transition easier, though, &lt;em&gt;we will continue to support the current API for the foreseeable future&lt;/em&gt; (we&amp;#39;re still using it too). And as much as possible we will open-source the tools that we use to migrate our own code. Ideas that we&amp;#39;re exploring include codemods, an interoperability layer for the old/new APIs, and tutorials &amp;amp; guides to ease migration.&lt;/p&gt;

&lt;p&gt;Ultimately, we&amp;#39;re making these changes because we believe they make Relay better all around: simpler for developers building apps and faster for the people using them.&lt;/p&gt;

&lt;h1&gt;Conclusion&lt;/h1&gt;

&lt;p&gt;If you made it this far, congrats and thanks for reading! We&amp;#39;ll be sharing more information about these changes in some upcoming talks:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/wincent&quot;&gt;Greg Hurrell&lt;/a&gt; will presenting a Relay &amp;quot;Deep Dive&amp;quot; at the &lt;a href=&quot;http://www.meetup.com/Silicon-Valley-ReactJS-Meetup/events/232236845/&quot;&gt;Silicon Valley ReactJS Meetup&lt;/a&gt; on August 17th.&lt;/li&gt;
&lt;li&gt;I (&lt;a href=&quot;https://github.com/josephsavona&quot;&gt;@josephsavona&lt;/a&gt;) will be speaking about Relay at &lt;a href=&quot;http://www.reactrally.com&quot;&gt;React Rally&lt;/a&gt; on August 25th.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We can&amp;#39;t wait to share the new code with you and are working as fast as we can to do so!&lt;/p&gt;
</description>
				<pubDate>2016-08-05T00:00:00-07:00</pubDate>
				<link>https://facebook.github.io/react/blog/2016/08/05/relay-state-of-the-state.html</link>
				<guid isPermaLink="true">https://facebook.github.io/react/blog/2016/08/05/relay-state-of-the-state.html</guid>
			</item>
		
	</channel>
</rss>