CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-addons-shallow-compare

Legacy React addon for performing shallow comparison of props and state to optimize component rendering performance

Overall
score

99%

Overview
Eval results
Files

task.mdevals/scenario-8/

Props Equality Checker

Build a utility that performs shallow equality comparison of two property objects using Object.is() semantics for value comparison.

Requirements

Your task is to implement a function arePropsEqual(prevProps, nextProps) that compares two property objects and returns true if they are equal, false otherwise.

The function must use Object.is() semantics when comparing property values, which means:

  1. NaN equality: NaN should be considered equal to NaN (unlike === operator)
  2. Zero distinction: +0 and -0 should be considered different values
  3. Shallow comparison: Compare only top-level properties, not nested objects
  4. Property count: Both objects must have the same number of properties

Implementation

@generates

API

/**
 * Compares two property objects for equality.
 * Returns true if properties are equal (using Object.is() semantics for values),
 * false otherwise.
 *
 * @param {Object} prevProps - The previous properties object
 * @param {Object} nextProps - The next properties object
 * @returns {boolean} True if properties are equal, false otherwise
 */
function arePropsEqual(prevProps, nextProps) {
  // IMPLEMENTATION HERE
}

module.exports = { arePropsEqual };

Test Cases

Equal props with primitives

  • Given prevProps = {a: 1, b: "hello"} and nextProps = {a: 1, b: "hello"}, the function returns true @test

Unequal props with different values

  • Given prevProps = {a: 1, b: "hello"} and nextProps = {a: 2, b: "hello"}, the function returns false @test

NaN equality handling

  • Given prevProps = {value: NaN} and nextProps = {value: NaN}, the function returns true @test

Positive and negative zero distinction

  • Given prevProps = {value: +0} and nextProps = {value: -0}, the function returns false @test

Object reference comparison

  • Given prevProps = {obj: {x: 1}} and nextProps = {obj: {x: 1}} (different object instances), the function returns false @test

Same object reference

  • Given obj = {x: 1}, prevProps = {obj: obj} and nextProps = {obj: obj} (same reference), the function returns true @test

Different number of properties

  • Given prevProps = {a: 1, b: 2} and nextProps = {a: 1}, the function returns false @test

Null and undefined handling

  • Given prevProps = {value: null} and nextProps = {value: undefined}, the function returns false @test

Dependencies { .dependencies }

react-addons-shallow-compare { .dependency }

Provides Object.is()-based shallow equality comparison functionality for React components.

@satisfied-by

Install with Tessl CLI

npx tessl i tessl/npm-react-addons-shallow-compare

tile.json