{"library":"react-immutable-pure-component","title":"React Immutable Pure Component","description":"This library provides `ImmutablePureComponent`, an enhanced React PureComponent specifically designed to work efficiently with Immutable.js data structures. It addresses the limitation of React's built-in `PureComponent` which doesn't fully leverage Immutable.js's structural sharing for shallow comparisons. The core mechanism involves `updateOnProps` and `updateOnStates` properties, allowing developers to explicitly define which specific props or state paths should trigger re-renders, using `Immutable.is` for deep equality checks on specified paths. The current stable version is 2.2.2. Releases have been somewhat sporadic, but updates address typings, dependency changes, and new features like `immutableMemo`. Its key differentiator is providing granular control over `Immutable.js`-aware re-rendering logic within a class component context, offering an alternative to `React.memo` with Immutable.js. It supports both class and functional components (via `immutableMemo`) and ships with TypeScript types.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-immutable-pure-component"],"cli":null},"imports":["import { ImmutablePureComponent } from 'react-immutable-pure-component';","import { immutableMemo } from 'react-immutable-pure-component';","import ImmutablePureComponent from 'react-immutable-pure-component';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState, useCallback } from 'react';\nimport { ImmutablePureComponent, immutableMemo } from 'react-immutable-pure-component';\nimport { Map, List } from 'immutable';\n\n// A class component using ImmutablePureComponent\nclass MyClassComponent extends ImmutablePureComponent<{ data: Map<string, any>, label: string }, { count: number }> {\n  // Specify props to check for updates using Immutable.is\n  updateOnProps = ['data'];\n  // Specify state keys to check for updates\n  updateOnStates = ['count'];\n\n  constructor(props: any) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  componentDidMount() {\n    // Example: Update internal state after some time\n    setTimeout(() => {\n      this.setState({ count: 1 });\n    }, 1000);\n  }\n\n  render() {\n    console.log(`MyClassComponent (${this.props.label}) rendered`);\n    return (\n      <div>\n        <h3>Class Component: {this.props.label}</h3>\n        <p>Data Version: {this.props.data.get('version')}</p>\n        <p>Internal Count: {this.state.count}</p>\n      </div>\n    );\n  }\n}\n\n// A functional component using immutableMemo\ninterface MyFuncProps {\n  items: List<string>;\n  onClick: (item: string) => void;\n}\n\nconst MyFunctionalComponent = immutableMemo<MyFuncProps>(({ items, onClick }) => {\n  console.log('MyFunctionalComponent rendered');\n  return (\n    <div>\n      <h3>Functional Component</h3>\n      <ul>\n        {items.map((item, index) => (\n          <li key={index} onClick={() => onClick(item)}>{item}</li>\n        ))}\n      </ul>\n    </div>\n  );\n}, ['items']); // 'items' array specifies props to compare with Immutable.is\n\nconst App = () => {\n  const [data, setData] = useState(Map({ version: 1 }));\n  const [items, setItems] = useState(List(['Apple', 'Banana']));\n\n  const updateData = () => {\n    // Only updates if the new Map is structurally different on specified keys\n    setData(data => data.set('version', data.get('version') + 1));\n  };\n\n  const handleItemClick = useCallback((item: string) => {\n    console.log(`Clicked: ${item}`);\n  }, []);\n\n  return (\n    <div>\n      <h1>React Immutable Pure Component Demo</h1>\n      <button onClick={updateData}>Update Data Version</button>\n      <MyClassComponent data={data} label=\"Example 1\" />\n      {/* This component will only re-render if 'data' specifically changes (version increments) */}\n\n      <MyFunctionalComponent items={items} onClick={handleItemClick} />\n      {/* This component will only re-render if 'items' List changes structurally */}\n    </div>\n  );\n};\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates both `ImmutablePureComponent` (class-based) and `immutableMemo` (functional) to optimize React re-renders with Immutable.js data. It shows how to define `updateOnProps` and `updateOnStates` to control component updates based on Immutable.js structural equality.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}