{"library":"react-shallow-equal","title":"React Shallow Equal Utilities","description":"The `react-shallow-equal` package provides specific utility functions for performing efficient shallow equality checks within React and React Native environments. It exposes `propsEqual`, `elementsEqual`, and `stylesEqual` functions, designed primarily to optimize component re-renders through `shouldComponentUpdate` by comparing component properties, React elements, and style objects. The current stable version is 0.1.1. However, the package has not seen updates in approximately 8 years, making its release cadence non-existent. It is a fork of `lelandrichardson/shallow-element-equals` and utilizes concepts from `lelandrichardson/style-equal`. Its key differentiator was its specialized focus on React-specific shallow comparisons, but modern React development largely utilizes `React.PureComponent` and `React.memo` for similar optimizations.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install react-shallow-equal"],"cli":null},"imports":["import { propsEqual } from 'react-shallow-equal';","import { elementsEqual } from 'react-shallow-equal';","import { stylesEqual } from 'react-shallow-equal';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { PureComponent } from 'react';\nimport { propsEqual } from 'react-shallow-equal';\n\nclass MyOptimizedComponent extends PureComponent {\n  // In a traditional React component (not PureComponent), you would implement this:\n  // shouldComponentUpdate(nextProps, nextState) {\n  //   // Only re-render if props are NOT shallowly equal or state has changed\n  //   return !propsEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);\n  // }\n\n  render() {\n    // Simulate rendering based on props, e.g., from an API call or parent component\n    const { data, isActive, onAction } = this.props;\n    return (\n      <div>\n        <h2>Item: {data.name}</h2>\n        <p>Status: {isActive ? 'Active' : 'Inactive'}</p>\n        <button onClick={onAction}>Perform Action</button>\n        <p>Last updated: {new Date().toLocaleTimeString()}</p>\n      </div>\n    );\n  }\n}\n\n// Example of usage in a parent component\nfunction App() {\n  const [count, setCount] = React.useState(0);\n  const [itemData, setItemData] = React.useState({ id: 1, name: 'Example Item' });\n\n  const handleAction = React.useCallback(() => {\n    console.log('Action performed!');\n    setCount(prev => prev + 1);\n  }, []);\n\n  // This prop object will be new on every render, but MyOptimizedComponent\n  // would only re-render if data.name or isActive actually changed values\n  // if using propsEqual inside shouldComponentUpdate.\n  // With PureComponent, it handles this automatically with its own shallow comparison.\n  const componentProps = {\n    data: itemData,\n    isActive: count % 2 === 0,\n    onAction: handleAction,\n    extraProp: count // This will cause PureComponent to re-render every time it changes\n  };\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      // This update will cause App to re-render, creating new componentProps\n      // PureComponent will then shallow compare these new props.\n      setCount(c => c + 1);\n    }, 2000);\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div>\n      <h1>Parent App Render Count: {count}</h1>\n      <MyOptimizedComponent {...componentProps} />\n    </div>\n  );\n}","lang":"javascript","description":"Demonstrates `propsEqual` usage within a React component's `shouldComponentUpdate` to prevent unnecessary re-renders based on shallow property comparison, similar to `PureComponent`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}