React Hook: useFirstMountState

This challenge asks you to create a custom React hook, useFirstMountState, that manages state in a way that its initial value is only set during the component's first mount. Subsequent re-renders will not trigger updates to this initial state, effectively making it a "one-time" initialization. This is useful for scenarios where you need to perform an expensive calculation or fetch data only once, and then cache the result for subsequent renders.

Problem Description

You need to implement a custom React hook called useFirstMountState. This hook should accept an initial value as an argument and return a state variable and a setter function, just like useState. However, the crucial difference is that the initial value should only be set during the component's first render. On subsequent re-renders, the state should retain its previously set value, ignoring any new initial value passed to the hook.

Key Requirements:

• The hook must accept a single argument: the initial value.
• It must return an array containing:
  • The current state value.
  • A setter function to update the state.
• The initial value should only be applied during the first render of the component.
• After the first render, the state should persist its value, even if a new initial value is passed to the hook.
• The setter function should behave as expected, allowing the state to be updated after the initial mount.

Expected Behavior:

The hook should mimic the behavior of useState but with the added constraint of only initializing the state once. Subsequent calls to the hook within the same component should return the same state value and setter function, but the initial value should be ignored.

Edge Cases to Consider:

• What happens if the initial value is null or undefined?
• What happens if the initial value is an object or array? Does it need to be deeply compared to detect changes? (For this challenge, shallow comparison is sufficient).
• How does the hook handle components that re-render frequently?

Examples

Example 1:

Input: Component renders for the first time with initial value 0.  Component re-renders with initial value 10.
Output: State value remains 0. Setter function updates the state as expected.
Explanation: The initial value of 0 is set during the first render. Subsequent re-renders ignore the new initial value of 10.

Example 2:

Input: Component renders for the first time with initial value "hello". Component re-renders with initial value "world".
Output: State value remains "hello". Setter function updates the state as expected.
Explanation: Similar to Example 1, the initial value is only applied once.

Example 3:

Input: Component renders for the first time with initial value {name: "Alice"}. Component re-renders with initial value {name: "Bob"}.
Output: State value remains {name: "Alice"}. Setter function updates the state as expected.
Explanation: Shallow comparison is used.  The object is only initialized once.

Constraints

• The hook must be written in TypeScript.
• The hook must be compatible with standard React components.
• The hook should not introduce any unnecessary dependencies.
• The initial value can be of any type.
• Shallow comparison should be used to determine if the initial value has changed.

Notes

• Consider using useRef to track whether the hook has been executed before.
• Think about how to ensure that the setter function remains consistent across re-renders.
• Focus on creating a clean and concise implementation. Avoid unnecessary complexity.
• This hook is intended to be a simple utility for one-time state initialization. It's not a replacement for useState in all scenarios.