Component Props Comparison Tool

Build a utility function that compares React component props to determine if a component should re-render. The function should handle various types of property configurations and provide accurate comparison results.

Requirements

Your implementation should:

1. Accept a component instance and next props as parameters
2. Compare current props against next props to determine if they differ
3. Only consider enumerable own properties during comparison (ignore inherited and non-enumerable properties)
4. Return true if the component should update (props differ), false otherwise
5. Handle edge cases like NaN, +0 vs -0, null, and undefined correctly

Implementation

@generates

API

/**
 * Compares current props with next props to determine if update is needed.
 *
 * @param {Object} instance - Component instance with current props
 * @param {Object} nextProps - New props to compare against
 * @returns {boolean} - true if component should update, false otherwise
 */
function shouldUpdate(instance, nextProps) {
  // IMPLEMENTATION HERE
}

module.exports = { shouldUpdate };

Test Cases

Basic comparison

• Given an instance with props {a: 1, b: 2} and nextProps {a: 1, b: 2}, shouldUpdate returns false @test
• Given an instance with props {a: 1, b: 2} and nextProps {a: 1, b: 3}, shouldUpdate returns true @test

Property enumeration

• Given an instance with enumerable props {visible: true} and a non-enumerable property, and nextProps with only {visible: true}, shouldUpdate returns false (non-enumerable properties are ignored) @test
• Given an instance with props {x: 1} that has inherited properties from its prototype, and nextProps {x: 1}, shouldUpdate returns false (inherited properties are ignored) @test

Dependencies { .dependencies }

react-addons-shallow-compare { .dependency }

Provides shallow comparison functionality for React component optimization.

@satisfied-by