Create a Reusable useCounter Hook in React with TypeScript

This challenge asks you to build a custom React hook, useCounter, that provides a simple counter functionality. This hook will manage a counter value and provide functions to increment, decrement, and reset the counter, promoting code reusability and cleaner component logic. It's a fundamental building block for many UI interactions.

Problem Description

You need to create a React hook named useCounter that accepts an initial value as an argument and returns an object containing the following:

• count: The current counter value (number).
• increment: A function that increments the counter by 1.
• decrement: A function that decrements the counter by 1.
• reset: A function that resets the counter to its initial value.
• setCount: A function that allows setting the counter to a specific value.

The hook should be written in TypeScript and properly typed to ensure type safety. The initial value can be any number.

Key Requirements:

• The hook must be a functional React hook.
• The increment, decrement, and reset functions should update the counter state correctly.
• The setCount function should allow setting the counter to any number.
• The hook should handle the initial value correctly.
• The returned object should have the specified properties with the correct types.

Expected Behavior:

When the component using the hook initially renders, the count value should be equal to the provided initial value. Calling increment should increase count by 1, decrement should decrease it by 1, reset should set it back to the initial value, and setCount should set it to the provided value.

Edge Cases to Consider:

• Initial value is zero.
• Initial value is negative.
• Decrementing the counter below zero (consider whether this is allowed or should be prevented). For this challenge, allow it to go below zero.
• Setting the counter to a very large or very small number.

Examples

Example 1:

Input: Initial value = 0
Output: { count: 0, increment: ƒ, decrement: ƒ, reset: ƒ, setCount: ƒ }
Explanation: The hook initializes the counter to 0.

Example 2:

Input: Initial value = 10, increment called, decrement called
Output: { count: 10, increment: ƒ, decrement: ƒ, reset: ƒ, setCount: ƒ } (after increment) -> { count: 11, increment: ƒ, decrement: ƒ, reset: ƒ, setCount: ƒ } (after decrement) -> { count: 10, increment: ƒ, decrement: ƒ, reset: ƒ, setCount: ƒ }
Explanation: The counter starts at 10, increments to 11, then decrements back to 10.

Example 3:

Input: Initial value = -5, reset called
Output: { count: -5, increment: ƒ, decrement: ƒ, reset: ƒ, setCount: ƒ }
Explanation: The counter starts at -5, and reset sets it back to -5.

Constraints

• The hook must be written in TypeScript.
• The hook must use the useState hook from React.
• The increment, decrement, reset, and setCount functions should be defined within the hook.
• The hook should not have any external dependencies.
• The code should be well-formatted and easy to understand.

Notes

• Consider using the useState hook to manage the counter's state.
• Think about how to structure the returned object to provide a clean and intuitive API.
• Type safety is crucial; ensure all variables and function arguments are properly typed.
• This is a great opportunity to practice writing reusable React hooks.