{"library":"react-fast-compare","title":"React Fast Compare","description":"React Fast Compare is a highly optimized library for deep equality comparison, primarily designed for performance enhancements in React applications, specifically with `React.memo` and `shouldComponentUpdate`. Based on `fast-deep-equal`, it extends functionality to handle React-specific circular references, such as those found in React elements, while generally avoiding non-React circular references. The current stable version is 3.2.2, with recent patch releases indicating active maintenance. It boasts a minimal bundle size (under 660 bytes minified+gzipped) and broad compatibility, working in Node.js (0.10+) and browsers (IE9+) due to its ES5 compatibility. This library differentiates itself by offering equivalent speed to `fast-deep-equal` for generic data types, coupled with crucial guardrails for React-specific data structures, making it a robust choice when deep equality checks are truly necessary after performance profiling.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-fast-compare"],"cli":null},"imports":["import isEqual from 'react-fast-compare';","const isEqual = require('react-fast-compare');","import isEqual from 'react-fast-compare/index.js';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport isEqual from 'react-fast-compare';\n\nconst ExpensiveComponent = ({ data }) => {\n  console.log('ExpensiveComponent rendered!');\n  return <div>{JSON.stringify(data)}</div>;\n};\n\n// Using isEqual with React.memo for deep comparison of props\nconst DeepMemoComponent = React.memo(ExpensiveComponent, isEqual);\n\n// Example usage with a regular functional component\nconst MyComponent = () => {\n  const obj1 = { a: 1, b: { c: 2 } };\n  const obj2 = { a: 1, b: { c: 2 } };\n  const obj3 = { a: 1, b: { c: 3 } };\n\n  console.log('General deep comparison:', isEqual(obj1, obj2)); // true\n  console.log('General deep comparison:', isEqual(obj1, obj3)); // false\n\n  return (\n    <div>\n      <p>Is obj1 equal to obj2? {String(isEqual(obj1, obj2))}</p>\n      <p>Is obj1 equal to obj3? {String(isEqual(obj1, obj3))}</p>\n      <DeepMemoComponent data={obj1} />\n      <DeepMemoComponent data={obj2} /> {/* Will not re-render DeepMemoComponent if obj1 and obj2 are deeply equal */}\n    </div>\n  );\n};\n\nexport default MyComponent;","lang":"typescript","description":"This quickstart demonstrates both general-purpose deep equality checking and its primary use case with `React.memo` to prevent unnecessary component re-renders due to deeply equal props.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}