Implementing the useWatch Hook in React

The useWatch hook is a valuable tool in React form management libraries like React Hook Form. It allows you to observe the value of one or more fields within a form and trigger side effects or calculations based on their changes. This challenge asks you to implement a simplified version of the useWatch hook, focusing on core functionality.

Problem Description

You are tasked with creating a useWatch hook that takes a form state (an object where keys are field names and values are their corresponding values) and an array of field names as input. The hook should return an array containing the current values of the specified fields. Whenever any of the watched fields change in the form state, the returned array should be updated accordingly. The hook should also handle cases where a watched field is not present in the form state.

Key Requirements:

• Dependency Tracking: The hook must re-render whenever any of the watched fields change in the form state.
• Value Retrieval: The hook must return an array containing the current values of the watched fields.
• Missing Field Handling: If a watched field is not present in the form state, the corresponding element in the returned array should be undefined.
• Immutability: The hook should return a new array whenever the values change, ensuring immutability.

Expected Behavior:

The hook should return an array of values, mirroring the order of the field names provided in the input array. If a field is not present in the form state, undefined should be placed at the corresponding index. Changes to fields not in the watch array should not trigger a re-render.

Edge Cases to Consider:

• Empty watch array: Should return an empty array.
• Form state is initially empty: Should return an array of undefined values, with length equal to the watch array.
• Watch array contains duplicate field names: Should only watch each field once.
• Form state updates with null or undefined values: Should correctly reflect these values in the returned array.

Examples

Example 1:

Input:
formState = { name: "John Doe", age: 30, city: "New York" }
watchFields = ["name", "age"]

Output:
["John Doe", 30]

Explanation: The hook returns an array containing the values of "name" and "age" from the formState, in the order specified by watchFields.

Example 2:

Input:
formState = { name: "Jane Doe" }
watchFields = ["name", "age", "city"]

Output:
["Jane Doe", undefined, undefined]

Explanation: The hook returns an array containing the value of "name" and `undefined` for "age" and "city" because they are not present in the formState.

Example 3: (Edge Case)

Input:
formState = { name: null, age: undefined }
watchFields = ["name", "age"]

Output:
[null, undefined]

Explanation: The hook correctly handles null and undefined values in the form state.

Constraints

• The formState will always be an object.
• The watchFields will always be an array of strings.
• The hook should be performant and avoid unnecessary re-renders. Consider using useMemo to optimize the returned array.
• The hook should be compatible with React function components.

Notes

• This is a simplified implementation of useWatch. Real-world implementations often involve more complex logic for handling nested fields, validation, and other features.
• Focus on the core functionality of observing field changes and returning their values.
• Think about how to efficiently update the returned array when only a subset of fields changes. useMemo is your friend here.
• Consider how to handle the case where the watchFields array is empty.