CtrlK
BlogDocsLog inGet started
Tessl Logo

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

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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).

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-addons-pure-render-mixin@15.6.x
Publish Source
CLI
Badge
tessl/npm-react-addons-pure-render-mixin badge