One of the first questions people ask when considering React for a project is whether their application will be as fast and responsive as an equivalent non-React version. The idea of re-rendering an entire subtree of components in response to every state change makes people wonder whether this process negatively impacts performance. React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. Avoiding reconciling the DOM React makes use of a

getDOMNode DOMElement getDOMNode() If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. When render returns null or false, this.getDOMNode() returns null. getDOMNode is deprecated and has been replaced with ReactDOM.findDOMNode(). This method is not available on ES6 class components that extend React.Component. It may be r

getDefaultProps object getDefaultProps() Invoked once and cached when the class is created. Values in the mapping will be set on this.props if that prop is not specified by the parent component (i.e. using an in check). This method is invoked before any instances are created and thus cannot rely on this.props. In addition, be aware that any complex objects returned by getDefaultProps() will be shared across instances, not copied.

React.Component class Component This is the base class for React Components when they're defined using ES6 classes. See Reusable Components for how to use ES6 classes with React. For what methods are actually provided by the base class, see the Component API.

Form components such as <input>, <textarea>, and <option> differ from other native components because they can be mutated via user interactions. These components provide interfaces that make it easier to manage forms in response to user interactions. For information on events on <form> see Form Events. Interactive Props Form components support a few props that are affected via user interactions: value, supported by <input> and <textarea> components. check

mixins array mixins The mixins array allows you to use mixins to share behavior among multiple components. For more information about mixins, see Reusable Components.

getInitialState object getInitialState() Invoked once before the component is mounted. The return value will be used as the initial value of this.state.

React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast shouldComponentUpdate() method to significantly speed up your app. Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like Clojure. However, we've provided a simple immutability helper, update(), that makes dealing with this type of data much easier, wi

It's a common pattern in React to wrap a component in an abstraction. The outer component exposes a simple property to do something that might have more complex implementation details. You can use JSX spread attributes to merge the old props with additional values: <Component {...this.props} more="values" /> If you don't use JSX, you can use any object helper such as ES6 Object.assign or Underscore _.extend: React.createElement(Component, Object.assign({}, this.props, { more: 'values' })

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