React's key design decision is to make the API seem like it re-renders the whole app on every update. This makes writing applications a lot easier but is also an incredible challenge to make it tractable. This article explains how with powerful heuristics we managed to turn a O(n3) problem into a O(n) one. Motivation Generating the minimum number of operations to transform one tree into another is a complex and well-studied problem. The state of the art algorithms have a complexity in the ord

CDN-hosted React We provide CDN-hosted versions of React on our download page. These pre-built files use the UMD module format. Dropping them in with a simple <script> tag will inject the React and ReactDOM globals into your environment. It should also work out-of-the-box in CommonJS and AMD environments. Using React from npm You can use React with a CommonJS module system like browserify or webpack. Use the react and react-dom npm packages. // main.js var React = require('react'); va

ES2015 with JSX In-browser JSX Transform If you like using JSX, Babel 5 provided an in-browser ES2015 and JSX transformer for development called browser.js that can be included from CDNJS. Include a <script type="text/babel"> tag to engage the JSX transformer. The in-browser JSX transformer is fairly large and results in extraneous computation client-side that can be avoided. Do not use it in production — see the next section. Productionizing: Precompiled JSX If you have npm, you

We've tried to make React as environment-agnostic as possible. People use React in a variety of languages (JavaScript, TypeScript, ClojureScript, etc) and in a variety of environments (web, iOS, Android, NodeJS, Nashorn, etc). There are many tools to help you build great applications. In these sections we introduce some of the tools that are most commonly used together with React. Language Tooling describes how to set up tools like Babel to transpile JSX for a better development experience. P

propTypes object propTypes The propTypes object allows you to validate props being passed to your components. For more information about propTypes, see Reusable Components.

Specifying the value prop on a controlled component prevents the user from changing the input unless you desire so. You might have run into a problem where value is specified, but the input can still be changed without consent. In this case, you might have accidentally set value to undefined or null. The snippet below shows this phenomenon; after a second, the text becomes editable. ReactDOM.render(<input value="hi" />, mountNode); setTimeout(function() { ReactDOM.render(<input valu

This isn't really a React-specific tip, as such anti-patterns often occur in code in general; in this case, React simply points them out more clearly. Using props to generate state in getInitialState often leads to duplication of "source of truth", i.e. where the real data is. This is because getInitialState is only invoked when the component is first created. Whenever possible, compute values on-the-fly to ensure that they don't get out of sync later on and cause maintenance trouble. Bad ex

Here's how false renders in different situations: Renders as id="false": ReactDOM.render(<div id={false} />, mountNode); String "false" as input value: ReactDOM.render(<input value={false} />, mountNode); No child: ReactDOM.render(<div>{false}</div>, mountNode); The reason why this one doesn't render as the string "false" as a div child is to allow the more common use-case: <div>{x > 1 && 'You have more than one item'}</div>.

Updating: shouldComponentUpdate boolean shouldComponentUpdate( object nextProps, object nextState ) Invoked before rendering when new props or state are being received. This method is not called for the initial render or when forceUpdate is used. Use this as an opportunity to return false when you're certain that the transition to the new props and state will not require a component update. shouldComponentUpdate: function(nextProps, nextState) { return nextProps.id !== this.props.id; } I

React.Children React.Children provides utilities for dealing with the this.props.children opaque data structure. React.Children.map array React.Children.map(object children, function fn [, object thisArg]) Invoke fn on every immediate child contained within children with this set to thisArg. If children is a keyed fragment or array it will be traversed: fn will never be passed the container objects. If children is null or undefined returns null or undefined rather than an array. React.Chil