How to fix PureComponent shallow comparison not working correctly in React

// Shallow comparison rules
'hello' === 'hello'  // true (primitive by value)
5 === 5              // true (primitive by value)

const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
arr1 === arr2        // false (different references)

const arr3 = arr1;
arr1 === arr3        // true (same reference)

// This is what PureComponent does:
const obj1 = { name: 'John' };
const obj2 = { name: 'John' };
obj1 === obj2        // false

// Mutating doesn't change reference:
obj1.name = 'Jane';
obj1 === obj1        // true (reference unchanged)

// DON'T do this with PureComponent:
this.state.items.push(newItem);
this.setState({ items: this.state.items });

// DO this instead - create new array:
this.setState(prevState => ({
  items: [...prevState.items, newItem]
}));

// Or use concat:
this.setState(prevState => ({
  items: prevState.items.concat(newItem)
}));

// Remove item - don't use splice:
// WRONG:
this.state.items.splice(index, 1);
this.setState({ items: this.state.items });

// CORRECT:
this.setState(prevState => ({
  items: prevState.items.filter((_, i) => i !== index)
}));

// Update item in array - don't mutate:
// WRONG:
this.state.items[0].name = 'updated';
this.setState({ items: this.state.items });

// CORRECT:
this.setState(prevState => ({
  items: prevState.items.map((item, i) =>
    i === 0 ? { ...item, name: 'updated' } : item
  )
}));

// Reorder array - don't use sort/reverse on original:
// WRONG:
this.state.items.sort();
this.setState({ items: this.state.items });

// CORRECT:
this.setState(prevState => ({
  items: [...prevState.items].sort()
}));

// DON'T do this:
this.state.user.name = 'Jane';
this.setState({ user: this.state.user });

// DO this - create new object:
this.setState(prevState => ({
  user: { ...prevState.user, name: 'Jane' }
}));

// Update multiple properties:
this.setState(prevState => ({
  user: {
    ...prevState.user,
    name: 'Jane',
    email: '[email protected]'
  }
}));

// Update nested objects - spread at each level:
// WRONG:
this.state.user.address.city = 'New York';
this.setState({ user: this.state.user });

// CORRECT:
this.setState(prevState => ({
  user: {
    ...prevState.user,
    address: {
      ...prevState.user.address,
      city: 'New York'
    }
  }
}));

// Using Object.assign also creates new reference:
this.setState(prevState => ({
  user: Object.assign({}, prevState.user, { name: 'Jane' })
}));

// WRONG - creates new function every render:
<ChildPureComponent onClick={() => this.handleClick()} />

// CORRECT - use class method:
<ChildPureComponent onClick={this.handleClick} />

// Or bind in constructor:
class Parent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick = () => {
    // ...
  }
}

// With functional component parent and useCallback:
function Parent() {
  const handleClick = React.useCallback(() => {
    // ...
  }, []);

  return <ChildPureComponent onClick={handleClick} />;
}

// With functional components, use memo instead of PureComponent:
const ChildPureComponent = React.memo(function Child({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
});

// WRONG - new object every render:
<ChildPureComponent style={{ color: 'red' }} />

// CORRECT - define outside or in constructor:
const styles = { color: 'red' };

class Parent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.styles = { color: 'red' };
  }

  render() {
    return <ChildPureComponent style={this.styles} />;
  }
}

// WRONG - new array every render:
<ChildPureComponent items={[1, 2, 3]} />

// CORRECT:
class Parent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.items = [1, 2, 3];
  }

  render() {
    return <ChildPureComponent items={this.items} />;
  }
}

// With functional components, use useMemo:
function Parent() {
  const styles = React.useMemo(
    () => ({ color: 'red' }),
    []
  );

  const items = React.useMemo(
    () => [1, 2, 3],
    []
  );

  return <ChildPureComponent style={styles} items={items} />;
}

// Use PureComponent for class components with simple props/state:
class SimpleList extends React.PureComponent {
  render() {
    return <div>{this.props.items.join(', ')}</div>;
  }
}

// Use React.memo for functional components:
const SimpleList = React.memo(function({ items }) {
  return <div>{items.join(', ')}</div>;
});

// Use custom shouldComponentUpdate for complex comparison logic:
class ComplexComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Custom deep comparison or other logic
    return !deepEqual(this.props, nextProps) ||
           !deepEqual(this.state, nextState);
  }

  render() {
    // ...
  }
}

// Use useMemo in functional components for expensive computations:
function Component({ items }) {
  const sorted = React.useMemo(
    () => items.slice().sort(),
    [items]
  );

  return <div>{sorted.join(', ')}</div>;
}

// Use useCallback to memoize callbacks:
function Parent() {
  const handleClick = React.useCallback((id) => {
    // ...
  }, []);

  return <ChildPureComponent onItemClick={handleClick} />;
}

class DebugPureComponent extends React.PureComponent {
  componentDidUpdate(prevProps, prevState) {
    console.log('PureComponent re-rendered');
    console.log('Props changed?', prevProps !== this.props);
    console.log('State changed?', prevState !== this.state);
  }

  render() {
    return <div>{this.props.data}</div>;
  }
}

// In parent:
class Parent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      user: { name: 'John' },
      items: [1, 2, 3]
    };
  }

  updateUser = () => {
    // This will correctly trigger re-render
    this.setState(prevState => ({
      user: { ...prevState.user, name: 'Jane' }
    }));
  }

  addItem = () => {
    // This will correctly trigger re-render
    this.setState(prevState => ({
      items: [...prevState.items, 4]
    }));
  }

  render() {
    return (
      <>
        <DebugPureComponent data={this.state.user.name} />
        <button onClick={this.updateUser}>Update User</button>
        <button onClick={this.addItem}>Add Item</button>
      </>
    );
  }
}