useArray()

The Scenario: "We are building a Complex Multi-Step Form Builder (similar to Typeform or Google Forms). The user can add questions, remove them, reorder them, or clear the entire form.

Because we use React.memo on our individual Question components to keep the UI snappy, we have a strict requirement: Every array manipulation must be immutable. If you accidentally mutate the existing array, the child components won't detect the change and won't re-render. Additionally, we want to avoid 'Prop Drilling' setters everywhere.

The Challenge: Implement a useArray hook that abstracts this complexity. It should return the current array and a stable set of 'Actions.' The actions (like push or update) must have stable function identities (using useCallback) so that they don't cause child components to re-render needlessly when passed as props.

Language

Sample Test Cases

Case 1

Input

{"initialArray": [1, 2, 3], "actions": [{"type": "push", "item": 4}, {"type": "remove", "index": 0}]}

Expected Output

[2, 3, 4]

Case 2

Input

{"initialArray": [1, 2, 3], "actions": [{"type": "push", "item": 4}]}

Expected Output

[1, 2, 3, 4]

Case 3

Input

{"initialArray": ["a", "b"], "actions": [{"type": "clear"}, {"type": "push", "item": "c"}]}

Expected Output

["c"]

Case 4

Input

{"initialArray": ["a", "b"], "actions": [{"type": "remove", "index": 0}]}

Expected Output

["b"]

Case 5

Input

{"initialArray": [10, 20, 30], "actions": [{"type": "update", "index": 1, "newItem": 25}, {"type": "insert", "index": 0, "item": 5}]}

Expected Output

[5, 10, 25, 30]

Case 6

Input

{"initialArray": [10, 20, 30], "actions": [{"type": "update", "index": 1, "newItem": 25}]}

Expected Output

[10, 25, 30]

useArray()

Sample Test Cases

Comments (0)

useArray()

Sample Test Cases

Comments (0)