or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-react-addons-pure-render-mixin

A React mixin that provides shallow comparison optimization for shouldComponentUpdate to prevent unnecessary re-renders

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/react-addons-pure-render-mixin@15.6.x

To install, run

npx @tessl/cli install tessl/npm-react-addons-pure-render-mixin@15.6.0

React Pure Render Mixin

React Pure Render Mixin provides a performance optimization mixin for React components that implements shouldComponentUpdate with shallow comparison. It prevents unnecessary re-renders when props and state haven't changed, improving component performance through optimized render lifecycle management.

Package Information

Package Name: react-addons-pure-render-mixin
Package Type: npm
Language: JavaScript
Installation: npm install react-addons-pure-render-mixin

Core Imports

var PureRenderMixin = require('react-addons-pure-render-mixin');

ES6 import:

import PureRenderMixin from 'react-addons-pure-render-mixin';

Script tag (after React):

<!-- development version -->
<script src="https://unpkg.com/react-addons-pure-render-mixin/react-addons-pure-render-mixin.js"></script>

<!-- Access via React.addons.PureRenderMixin -->

Basic Usage

const createReactClass = require('create-react-class');

const MyComponent = createReactClass({
  mixins: [PureRenderMixin],

  render: function() {
    return <div className={this.props.className}>
      {this.props.children}
    </div>;
  }
});

// The mixin automatically provides shouldComponentUpdate optimization
// Component will only re-render when props or state actually change

Capabilities

Pure Render Optimization

Provides automatic shouldComponentUpdate implementation with shallow comparison optimization.

/**
 * Mixin object containing shouldComponentUpdate method
 * Exported as the default export of the package
 * @type {Object}
 */
const PureRenderMixin = {
  /**
   * shouldComponentUpdate lifecycle method with shallow comparison
   * Compares current props/state with next props/state using shallow equality
   * @param {Object} nextProps - The next props that will be passed to component
   * @param {Object} nextState - The next state that will be set on component  
   * @returns {boolean} - true if component should update (props or state changed), false to skip re-render
   */
  shouldComponentUpdate: function(nextProps, nextState) {
    return (
      !shallowEqual(this.props, nextProps) ||
      !shallowEqual(this.state, nextState)
    );
  }
};

Usage Example:

const React = require('react');
const createReactClass = require('create-react-class');
const PureRenderMixin = require('react-addons-pure-render-mixin');

const OptimizedComponent = createReactClass({
  mixins: [PureRenderMixin],

  getInitialState: function() {
    return {
      count: 0,
      message: 'Hello'
    };
  },

  increment: function() {
    this.setState({ count: this.state.count + 1 });
  },

  render: function() {
    return (
      <div>
        <p>{this.state.message}: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
});

// Component automatically skips re-render when:
// - Same props object reference is passed
// - setState is called with identical state values
// - Parent re-renders but passes same props

Shallow Comparison Behavior

The mixin performs shallow (first-level) comparison only:

Primitive values: Compares by value (=== equality)
Object/Array references: Compares by reference, not deep content
Nested changes: Will NOT detect changes in nested objects or arrays

// These changes WILL trigger re-render:
this.setState({ count: 1 });           // primitive change
this.setState({ items: newArray });    // array reference change

// These changes will NOT trigger re-render:
this.state.items.push(newItem);        // mutating existing array
this.state.user.name = 'New Name';     // mutating nested object

// To trigger re-render with nested changes, create new references:
this.setState({ 
  items: [...this.state.items, newItem],
  user: { ...this.state.user, name: 'New Name' }
});

Important Notes

Compatibility and Migration

Legacy Status: This package is deprecated and no longer maintained
Replacement: Use React.PureComponent (available since React 15.3.0) for ES6 classes
React Version: Compatible with React versions that support mixins (createClass pattern)
Modern Alternative: React.memo() for functional components

// Modern equivalent using React.PureComponent:
class ModernComponent extends React.PureComponent {
  render() {
    return <div>{this.props.content}</div>;
  }
}

// Or with React.memo for functional components:
const FunctionalComponent = React.memo(function(props) {
  return <div>{props.content}</div>;
});

Performance Considerations

Effective for: Components with simple, flat props and state
Best with: Immutable data patterns and primitive values
Avoid with: Deeply nested objects or frequent object mutations
Use forceUpdate(): When you know deep data structures have changed but mixin doesn't detect it

Limitations

Mixin pattern only: Cannot be used with ES6 class components
Shallow comparison: May miss deep changes in complex data structures
Subtree skipping: When returning false, entire component subtree skips updates
False negatives: May not re-render when deep data actually changed

Dependencies

fbjs: Provides shallowEqual utility function for comparison logic
object-assign: Object assignment utility for polyfilling Object.assign functionality

Error Handling

The mixin does not throw exceptions under normal usage. It safely handles:

null or undefined props/state values
Missing props or state properties
Type mismatches in comparison

If comparison fails, it defaults to allowing the update (returns true).