React Performance: Object Literals Example

object-literals.js

/*
Object literals or Array literals are functionally equivalent to calling
Object.create() or new Array(). This means that if object literals or
array literals are passed as prop values, React will consider these to be new
values for each render.

This is problematic mostly when dealing with Radium or inline styles.
*/

/* Bad */
// New object literal for style each render
render() {
  return <div style={ { backgroundColor: 'red' } }/>
}

/* Good */
// Declare outside of component
const style = { backgroundColor: 'red' };

render() {
  return <div style={ style }/>
}