Immutable State Management with a Produce-like Hook in React

This challenge asks you to build a core piece of an immutable state management library, inspired by Immer. You'll create a custom React hook that allows components to update complex state objects without direct mutation, promoting predictable state changes and simplifying state logic. This is incredibly useful for managing intricate application states in a performant and understandable way.

Problem Description

Your task is to implement a custom React hook, let's call it useImmerState, that mimics the core functionality of the produce function from Immer. This hook should manage a piece of state within a React component and provide a way to update that state immutably.

Key Requirements:

State Management: The hook should accept an initial state value and return the current state and a function to update it.
Immutability: The update function must accept a "recipe" function. This recipe function will receive a mutable draft of the current state. Any changes made to this draft will be automatically translated into an immutable update of the actual state.
Type Safety: The implementation should leverage TypeScript to ensure type safety for both the state and the draft.
React Integration: The hook must integrate seamlessly with React's useState or a similar mechanism to manage the actual state.

Expected Behavior:

When the update function is called with a recipe, the following should occur:

A copy of the current state is created (the "draft").
The recipe function is executed with the draft as its argument.
The recipe function can freely mutate the draft (add properties, modify values, push to arrays, etc.).
Once the recipe function completes, the useImmerState hook compares the original state with the final state of the draft. If there are differences, it updates the component's state with the new, immutable state. If there are no differences, the state remains unchanged.

Edge Cases to Consider:

Updating nested objects.
Adding new properties to objects.
Removing properties from objects.
Modifying array elements.
Pushing/popping elements from arrays.
Handling null or undefined states.

Examples

Example 1: Basic Object Update

import React from 'react';
import { useImmerState } from './useImmerState'; // Assume this is your hook

function Counter() {
  const [count, setCount] = useImmerState({ value: 0 });

  const increment = () => {
    setCount(draft => {
      draft.value += 1;
    });
  };

  return (
    <div>
      Count: {count.value}
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Input: Initial state { value: 0 }. Button is clicked once. Output: The count state will become { value: 1 }. Explanation: The increment function calls setCount with a recipe. The recipe receives a draft of { value: 0 }. Inside the recipe, draft.value is incremented to 1. useImmerState detects the change and updates the state to { value: 1 }.

Example 2: Nested Object and Array Update

interface User {
  id: number;
  name: string;
  address: {
    street: string;
    city: string;
  };
  tags: string[];
}

function UserProfile() {
  const [user, setUser] = useImmerState<User>({
    id: 1,
    name: 'Alice',
    address: { street: '123 Main St', city: 'Anytown' },
    tags: ['react', 'typescript'],
  });

  const updateUser = () => {
    setUser(draft => {
      draft.address.city = 'Newville';
      draft.tags.push('developer');
      draft.tags[0] = 'frontend';
    });
  };

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.address.street}, {user.address.city}</p>
      <p>Tags: {user.tags.join(', ')}</p>
      <button onClick={updateUser}>Update User</button>
    </div>
  );
}

Input: Initial state as defined above. Button is clicked once. Output: The user state will become:

{
  "id": 1,
  "name": "Alice",
  "address": {
    "street": "123 Main St",
    "city": "Newville"
  },
  "tags": ["frontend", "typescript", "developer"]
}

Explanation: The updateUser function's recipe modifies nested city, pushes a new tag, and updates an existing tag. useImmerState handles these mutations on the draft and applies the resulting immutable state.

Example 3: Removing a Property

interface Product {
  id: number;
  name: string;
  price: number;
  description?: string;
}

function ProductDisplay() {
  const [product, setProduct] = useImmerState<Product>({
    id: 101,
    name: 'Widget',
    price: 29.99,
    description: 'A useful widget.',
  });

  const removeDescription = () => {
    setProduct(draft => {
      delete draft.description; // Or use a library-specific delete function if needed
    });
  };

  return (
    <div>
      <h3>{product.name}</h3>
      <p>Price: ${product.price}</p>
      {product.description && <p>{product.description}</p>}
      <button onClick={removeDescription}>Remove Description</button>
    </div>
  );
}

Input: Initial state with a description property. Button is clicked. Output: The product state will have the description property removed. Explanation: The removeDescription recipe uses delete to remove the description property from the draft. useImmerState correctly identifies this as a state change and updates the state immutably.

Constraints

The useImmerState hook should return a tuple [state, setState] similar to useState.
The setState function should accept a single argument: the recipe function.
The recipe function should be typed to receive a draft of the state and have no return value (its effect is through mutations).
The implementation must be in TypeScript.
Avoid using external libraries like Immer itself for the core implementation. You can use standard JavaScript Object.assign, spread syntax, array methods, etc., but the mechanism of proxying or tracking changes should be your own.
Performance should be considered. Deep comparisons or inefficient copying could be a bottleneck.

Notes

Think about how to efficiently detect changes between the original state and the mutated draft. Techniques like proxying or structural sharing can be helpful.
Consider how to handle different types of state (primitives, objects, arrays).
The challenge focuses on the core logic of an Immer-like produce function within a React hook. You are not expected to replicate all of Immer's advanced features (like automatic tracking of immutability for libraries like Immutable.js) but rather the fundamental immutable update pattern.
For deleting properties, standard JavaScript delete operator should work, but be mindful of how your change detection mechanism handles it.