Zero Sign Checker Component

Build a React component that displays and monitors zero values with signed distinction, properly detecting when a zero value changes sign between positive and negative zero.

Requirements

Create a React class component called ZeroSignChecker that:

1. Accepts a prop called value which can be any number including +0 and -0
2. Displays the current value along with its sign (positive or negative zero)
3. Uses performance optimization to prevent unnecessary re-renders
4. Must properly distinguish between +0 and -0 and re-render when the zero value changes sign
5. Should NOT re-render when the same zero value (including sign) is passed again

The component should display:

• The numeric value
• Whether it's "positive zero" or "negative zero" (when the value is zero)
• A render counter that increments each time the component renders

Implementation

@generates

API

import React from "react";

/**
 * A React component that displays zero values with sign distinction
 * and optimizes rendering by detecting changes in zero sign.
 *
 * @class ZeroSignChecker
 * @extends {React.Component}
 */
class ZeroSignChecker extends React.Component {
  /**
   * Renders the component displaying the value and its zero sign if applicable
   * @returns {React.Element}
   */
  render() {
    // Returns JSX
  }
}

export default ZeroSignChecker;

Test Cases

• When the component receives +0 as value, it displays "positive zero" @test
• When the component receives -0 as value, it displays "negative zero" @test
• When the value prop changes from +0 to -0, the component re-renders and updates the display @test
• When the same zero value with the same sign is passed again, the component does not re-render @test

Dependencies { .dependencies }

React { .dependency }

Provides the React component framework.

react-addons-shallow-compare { .dependency }

Provides shallow comparison support for performance optimization.