Implement useWhyDidYouUpdate Hook in React

This challenge asks you to create a custom React hook, useWhyDidYouUpdate, that helps developers understand why a React component is re-rendering unnecessarily. By logging the differences between the previous and current props/state, this hook provides valuable insights for performance optimization.

Problem Description

You need to implement a custom React hook named useWhyDidYouUpdate that takes a component's name and its current props/state as arguments. This hook should compare the current props/state with the previous ones and, if any differences are detected, log a detailed message to the console explaining which specific properties have changed.

Key Requirements:

• The hook should accept two arguments:
  • componentName: A string representing the name of the component being inspected.
  • props: An object representing the current props or state of the component.
• The hook must compare the props argument with its previous value on each re-render.
• If a difference is found, the hook should log a descriptive message to console.log (or console.warn for higher visibility).
• The log message should clearly indicate the componentName and list the specific keys whose values have changed, along with their previous and current values.
• The hook should handle various data types for props/state, including primitives, objects, and arrays. A deep comparison is not strictly required for this challenge, but understanding reference equality is key.
• The hook should not cause any performance issues itself, meaning it should be efficient and not add significant overhead.

Expected Behavior:

When a component using useWhyDidYouUpdate re-renders, the hook will perform its comparison.

• If props remain the same (based on reference equality for objects/arrays, and value equality for primitives), nothing will be logged.
• If props have changed, a log message will appear in the console.

Edge Cases:

• Initial render: The hook should not log on the very first render, as there are no previous values to compare against.
• Unchanged primitives: If only primitives change, they should be accurately reported.
• Unchanged object/array references: If an object or array prop is passed the same reference, it should not be flagged as changed, even if its contents might have been mutated internally (as per React's immutability principles).
• null or undefined values: The hook should correctly handle comparisons involving null and undefined.

Examples

Example 1:

// In a component:
function MyComponent(props: { count: number; user: { name: string } }) {
  useWhyDidYouUpdate('MyComponent', props);
  return <div>Count: {props.count}</div>;
}

// Initial render: MyComponent({ count: 0, user: { name: 'Alice' } })
// No output expected.

// Subsequent render: MyComponent({ count: 1, user: { name: 'Alice' } })
// Output:
// console.log("MyComponent has updated:")
// console.log("  count: 0 -> 1")

Explanation: The count prop changed from 0 to 1, triggering a log. The user object reference remained the same, so it wasn't flagged.

Example 2:

// In a component:
function UserProfile({ user }: { user: { id: number; name: string } }) {
  useWhyDidYouUpdate('UserProfile', { user }); // Wrap in an object to track 'user' specifically
  return <div>User ID: {user.id}</div>;
}

// Initial render: UserProfile({ user: { id: 1, name: 'Bob' } })
// No output expected.

// Subsequent render: UserProfile({ user: { id: 1, name: 'Charlie' } })
// Output:
// console.log("UserProfile has updated:")
// console.log("  user: { id: 1, name: 'Bob' } -> { id: 1, name: 'Charlie' }")

Explanation: The user prop, being an object, was passed as a new reference. Even though the id was the same, the name changed. The log shows the entire previous and new object for clarity (simple stringification for demonstration).

Example 3: (Handling object/array reference equality)

// In a component:
interface Data {
  items: string[];
}

function DataDisplay({ data }: { data: Data }) {
  useWhyDidYouUpdate('DataDisplay', data);
  return <ul>{data.items.map(item => <li key={item}>{item}</li>)}</ul>;
}

const initialData = { items: ['apple', 'banana'] };

// Initial render: DataDisplay({ data: initialData })
// No output expected.

// Subsequent render: DataDisplay({ data: initialData }) // Same reference passed
// No output expected.

// Subsequent render: DataDisplay({ data: { items: ['apple', 'banana'] } }) // New reference, same content
// Output:
// console.log("DataDisplay has updated:")
// console.log("  data: { items: [ 'apple', 'banana' ] } -> { items: [ 'apple', 'banana' ] }")

Explanation: In the first subsequent render, the exact same initialData object reference is passed, so no update is logged. In the second subsequent render, a new object with the same content is passed. This will be flagged because the object reference is different.

Constraints

• The hook must be implemented in TypeScript.
• The comparison logic should prioritize performance. Avoid computationally expensive operations on every render.
• The hook should work correctly with functional components.

Notes

• Consider how you will store the "previous" props/state to enable comparison across renders. useRef is a common and suitable tool for this in React.
• The comparison of object and array types should primarily rely on reference equality for simplicity and performance, aligning with React's typical behavior. While a deep comparison could be more thorough, it's generally not what useWhyDidYouUpdate aims for and can be costly.
• You can use JSON.stringify for a simple way to display object/array differences in the console, but be aware of its limitations (e.g., order of keys, circular references).
• The primary goal is to identify when and what has changed from React's perspective (i.e., a new prop reference or a changed primitive value).