Sebastian Markbåge sebmarkbage

You're probably getting this warning because you're accessing methods on a component before it gets mounted. This will be soon be an unsupported use case.

The component that gets created by invoking the convenience constructor MyComponent(props, children) or using the JSX syntax <MyComponent /> is not guaranteed to be the instance that actually gets mounted. It's a description of what the actual mounted instance should look like.

Anti-pattern:

The component also doesn't have access to state or other important information such as the final props. As a consequence you shouldn't be calling custom methods on this object.

var MyComponent = React.createClass({

This proposal has moved to https://github.com/sebmarkbage/ecmascript-rest-spread

JSX Spread Attributes

If you know all the properties that you want to place on a component a head of time, it is easy to use JSX:

  var component = <Component foo={x} bar={y} />;

Mutating Props is Bad, mkay

Deprecating `transferPropsTo`

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.

We used to have a helper function called transferPropsTo. We no longer support this method. Instead you're expected to use a generic object helper to merge props.

render() {
 return Component(Object.assign({}, this.props, { more: 'values' }));

New React Element Factories and JSX

In React 0.12, we're making a core change to how React.createClass(...) and JSX works.

If you're using JSX in the typical way for all (and only) React components, then this transition will be seamless. Otherwise there are some minor breaking changes described below.

The Problem

React Element Factories and JSX

You probably came here because your code is calling your component as a plain function call. This is now deprecated:

var MyComponent = require('MyComponent');

function render() {
 return MyComponent({ foo: 'bar' }); // WARNING

Lower Case JSX Convention

All lower case JSX tags will now be treated as HTML/SVG elements. They will no longer be treated as custom components in scope.

The React element produced by JSX can be either a React class that exists in the local scope or a global scope HTML/SVG element depending on a convention.

Previous Behavior

Currently, when you use React JSX to define a HTML element you can use any known HTML tag. E.g:

React (Virtual) DOM Terminology

In React's terminology, there are five core types that are important to distinguish:

ReactElement / ReactElement Factory
ReactNode
ReactComponent / ReactComponent Class

React Elements

	// Mutative

	company.users.push({ name: 'New User' });
	return company;

	// Immutable

	return { ...company, users: [ ...company.users, { name: 'New User' } ] };

	// Implicit identifier

	/** @jsx React.DOM */

	var Graphic = React.createClass({

	componentDidMount: function() {
	var context = this.getDOMNode().getContext('2d');
	this.paint(context);
	},

	componentDidUpdate: function() {