setProps void setProps( object nextProps, [function callback] ) When you're integrating with an external JavaScript application you may want to signal a change to a React component rendered with ReactDOM.render(). Calling setProps() on a root-level component will change its properties and trigger a re-render. In addition, you can supply an optional callback function that is executed once setProps is completed and the component is re-rendered. This method is deprecated and will be remove

render ReactElement render() The render() method is required. When called, it should examine this.props and this.state and return a single child element. This child element can be either a virtual representation of a native DOM component (such as <div /> or React.DOM.div()) or another composite component that you've defined yourself. You can also return null or false to indicate that you don't want anything rendered. Behind the scenes, React renders a <noscript> tag to work with o

React is usually quite fast out of the box. However, in situations where you need to squeeze every ounce of performance out of your app, it provides a shouldComponentUpdate hook where you can add optimization hints to React's diff algorithm. In addition to giving you an overview of your app's overall performance, ReactPerf is a profiling tool that tells you exactly where you need to put these hooks. See these two articles by the Benchling Engineering Team for a in-depth introduction to performa

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

Improper use of the innerHTML can open you up to a cross-site scripting (XSS) attack. Sanitizing user input for display is notoriously error-prone, and failure to properly sanitize is one of the leading causes of web vulnerabilities on the internet. Our design philosophy is that it should be “easy” to make things safe, and developers should explicitly state their intent when performing “unsafe” operations. The prop name dangerouslySetInnerHTML is intentionally chosen to be frightening, and the

When specifying a pixel value for your inline style prop, React automatically appends the string "px" for you after your number value, so this works: var divStyle = {height: 10}; // rendered as "height:10px" ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode); See Inline Styles for more info. Sometimes you do want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix: animationIterationCount boxFlex boxFlexGroup b

isMounted boolean isMounted() isMounted() returns true if the component is rendered into the DOM, false otherwise. You can use this method to guard asynchronous calls to setState() or forceUpdate(). This method is not available on ES6 class components that extend React.Component. It will likely be removed entirely in a future version of React, so you might as well start migrating away from isMounted() now.

React React is the entry point to the React library. If you're using one of the prebuilt packages it's available as a global; if you're using CommonJS modules you can require() it. 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. React.createClass ReactClass createClass(object spe

Updating: componentDidUpdate void componentDidUpdate( object prevProps, object prevState ) Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render. Use this as an opportunity to operate on the DOM when the component has been updated.

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