Numeric Data Validator Component

Build a React class component that validates numeric data and prevents unnecessary re-renders, especially when dealing with NaN values.

Requirements

Create a class component named NumericValidator that:

1. Accepts props:

   • value: any JavaScript value to validate
   • threshold: a number representing the minimum valid value

2. Maintains state:

   • renderCount: number tracking how many times the component has rendered

3. Implements validation logic:

   • NaN values are considered invalid
   • Non-numeric values are considered invalid
   • Numeric values are valid if greater than or equal to the threshold

4. Optimizes rendering performance:

   • Must use shallow comparison to prevent unnecessary re-renders
   • When props contain NaN values that haven't changed, the component should NOT re-render

5. Renders output showing:

   • Current value (converted to string)
   • Validation status ("valid" or "invalid")
   • Total render count

Test Cases

• When value prop changes from 5 to NaN, component re-renders and shows "invalid" @test
• When value prop is NaN in both renders, component does NOT re-render (render count stays same) @test
• When value prop changes from NaN to 10, component re-renders and shows "valid" or "invalid" based on threshold @test
• When threshold prop is NaN in both renders, component does NOT re-render (render count stays same) @test

Implementation

@generates

API

/**
 * A React class component that validates numeric values and optimizes re-renders
 * using shallow comparison of props and state.
 *
 * @class NumericValidator
 * @extends React.Component
 */
class NumericValidator extends React.Component {
  // Implementation here
}

module.exports = NumericValidator;

Dependencies { .dependencies }

React { .dependency }

Provides the base React library for building components.

react-addons-shallow-compare { .dependency }

Provides shallow comparison functionality for optimizing component rendering performance.