Forem: Devansh Prajapati

Engineering Scalable Forms: Decoupling Logic with RHF and Next.js App Router

Devansh Prajapati — Sat, 04 Apr 2026 18:06:19 +0000

Introduction:

Implementing a simple and single page using react-hook-form is very easy and we do it quite often in our applications. But it fails when it comes to modern web architecture and business logic. Large single-page forms aren't just "unattractive"; they are difficult to validate, hard to debug, and overwhelming for the user.

Transitioning to a Multi-Step Wizard in Next.js introduces a unique architectural challenge: State Persistence across Route Transitions. We will implement a scalable pattern that manages state transition and validation across the Next.js App Router using FormProvider, useFromContext and useFieldArray.

Phase 1: Implementing Contextual Injection and Static Domains

RHF utilizes the FormProvider pattern to wrap component trees in a shared context. This decouples nested UI elements from the parent form's implementation details, allowing deep child components to consume form methods via useFormContext without polluting the intermediate component props.

To implement FormProvider, initialize the form using useForm and spread the resulting methods onto the provider. This establishes a shared context that allows nested components to access form state viauseFormContext without manual prop drilling.

const methods = useForm<exampleSchema>({
        resolver: zodResolver(exampleSchema),
        defaultValues: {}
    });




<FormProvider {...methods}>
            <form onSubmit={handleSubmit(onSubmit)} >

                  {/* Rest of the Code... */}

            </form>
</FormProvider>

Take a look at the “Dynamic Job Application Portal” Example:

/components/job-form
├── index.tsx // The "Parent" (FormProvider lives here)
├── PersonalInfo.tsx // Child 1 (Simple inputs)
├── ExperienceSection.tsx // Child 2 (useFieldArray lives here)
├── SkillPicker.tsx // Child 3 (Controller & useWatch live here)
└── SubmitButton.tsx // Child 4 (Validation check)

Type Definitions:

export type JobFormValues = {
  personalInfo: {
    firstName: string;
    lastName: string;
    email: string;
  };
  experience: {
    company: string;
    role: string;
    years: number;
  }[]; 
  skills: string[];
  jobCategory: "developer" | "designer" | ""; // Used for conditional logic
};

Initializing React-Hook-Form

// index.tsx


//crucial for use hooks
"use client";
import { useForm, FormProvider } from "react-hook-form";
// Optional: If using Zod for validation
import { zodResolver } from "@hookform/resolvers/zod";


//  Default Values for the form, ensuring all fields are initialized properly


const defaultValues: JobFormValues = {
  personalInfo: {
    firstName: "",
    lastName: "",
    email: "",
  },
  experience: [
    { company: "", role: "", years: 0 } // Starts with one empty row
  ],
  skills: [],
  jobCategory: "",
};


export default function JobApplicationForm() {
  const methods = useForm<JobFormValues>({
    // resolver: zodResolver // You can define resolver for type safety
    defaultValues,
    mode: "onBlur", 
  });


  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit((data) =>                   console.log(data))}> 
        {/* Child components here */}
      </form>
    </FormProvider>
  );
}

useFormContext

RHF provides the useFormContext method that allows nested components to access the form's internal state and methods without receiving them through props . This decouples nested UI elements from the parent form's implementation details, allowing deep child components to consume form methods via useFormContext without polluting the intermediate component props.

"use client";


import { useFormContext } from "react-hook-form";




export default function PersonalInfo() {
   // We can now access the form context, including register and errors, without prop drilling


   // de-structure register and formState
    const { register, formState: { errors } } = useFormContext<exampleSchema>();
}

Initializing useFormContext

// PersonalInfo.tsx


"use client";


import { useFormContext } from "react-hook-form";
import { JobFormValues } from "./index"; // Import the type for safety


export default function PersonalInfo() {
  // You got this type of return form useFormContext
{/*
      {
  control: { ... },         // The internal engine
  register: ƒ (),           // Function to hook up inputs
  handleSubmit: ƒ (),       // Function to wrap submission
  watch: ƒ (),              // Function to observe changes
  formState: {              // The "Health" of the form
    errors: {
      personalInfo: { firstName: { message: "Required" } }
    },
    isDirty: true,
    isValid: false,
    isSubmitting: false
  },
  setValue: ƒ (),           // Update data programmatically
  getValues: ƒ (),          // Read data silently
  reset: ƒ (),              // Go back to start
  …
}
 */}


  // 1. Pluck only what we need from the useFormContext
  const { register, formState: { errors } } = useFormContext<JobFormValues>();


  return (
    <section className="space-y-4 p-4 border rounded-lg bg-gray-50">
      <h2 className="text-xl font-bold">Personal Information</h2>

      <div className="grid grid-cols-2 gap-4">
        {/* 2. Using Nested Paths: "parent.child" */}
        <div className="flex flex-col">
          <label>First Name</label>
          <input
            {...register("personalInfo.firstName")}
            placeholder="Jane"
            className="border p-2 rounded"
          />
          {errors.personalInfo?.firstName && (
            <span className="text-red-500 text-sm">{errors.personalInfo.firstName.message}</span>
          )}
        </div>


        <div className="flex flex-col">
          <label>Email Address</label>
          <input
            {...register("personalInfo.email")}
            type="email"
            placeholder="jane@example.com"
            className="border p-2 rounded"
          />
          {errors.personalInfo?.email && (
            <span className="text-red-500 text-sm">{errors.personalInfo.email.message}</span>
          )}
        </div>
      </div>
    </section>
  );
}

Beyond avoiding prop drilling, useFormContext grants components functional autonomy. By using this hook, a component like PersonalInfo becomes a standalone unit. You can move it across different steps of a wizard or into different layouts without modifying the component’s internal logic, as long as it remains within a FormProvider.

Note: Crucially, because FormProvider and useFormContext rely on React Context, these files must include the "use client" directive. This marks the boundary between your static Server Components and your interactive form logic.

Phase 2: Orchestrating Dynamic Collections with useFieldArray

While simple inputs are easy to manage, real-world forms often require users to add, remove, or reorder lists of data—such as work history or educational background. In React Hook Form, we handle this through the useFieldArray hook.

This hook provides a specialized set of methods (append, remove, move, insert) designed to manipulate arrays within your form state without losing focus or triggering unnecessary global re-renders.

Initialize useFieldArray:

"use client";


import { useFormContext, useFieldArray } from "react-hook-form";


export default function ExperienceSection() {


    const { control } = useForm<exampleSchema>({
        resolver: zodResolver(exampleSchema),
        defaultValues: {}
    });




    const { fields, append, remove } = useFieldArray({
        control,
        name: "experience",
    });
}

In React Hook Form, most inputs are uncontrolled (they use refs (When we do …register() we destructure the ref of that particular input field)). However, complex components like useFieldArray or Controller need a way to talk to the internal state of the library to stay in sync.

The control object contains the internal logic, refs, and state subscribers for the entire form.
Standard HTML inputs can use the register method. But dynamic arrays and custom UI components (like a Material UI slider) don't have a standard "ref" that RHF can easily grab.

The control acts as the bridge. It provides the internal methods necessary to register these complex fields into the main form state.

// ExperienceSection.tsx


"use client";


import { useFormContext, useFieldArray} from "react-hook-form";
import { JobFormValues } from "./index";


export default function ExperienceSection() {


//useFormContext also contains the control that we can use to register our array fields to the form


  const { control, register, formState: { errors } } = useFormContext<JobFormValues>();


  // Connecting to the "experience" array in our defaultValues
  const { fields, append, remove } = useFieldArray({
    control,
    name: "experience",
  });


  return (
    <div className="space-y-6 p-4 border rounded-lg">
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-bold">Work Experience</h2>
        <button
          type="button"


// Add blank field of array element to the array


          onClick={() => append({ company: "", role: "", years: 0 })}
          className="bg-green-600 text-white px-3 py-1 rounded text-sm"
        >
          + Add Job
        </button>
      </div>


      {fields.map((field, index) => (
        <div key={field.id} className="grid grid-cols-3 gap-4 p-4 border-b relative">
          <input
            {...register(`experience.${index}.company` as const)}
            placeholder="Company"
            className="border p-2 rounded"
          />
          <input
            {...register(`experience.${index}.role` as const)}
            placeholder="Role"
          />
          <input
            {...register(`experience.${index}.years` as const, { valueAsNumber: true })}
            type="number"
            placeholder="Years"
          />

          <button
            type="button"
// Remove the particular element from the array 
            onClick={() => remove(index)}
            className="text-red-500 absolute right-0 top-0"
          >
            ✕
          </button>
        </div>
      ))}
    </div>
  );
}

If you have 10 items in your "Experience" list and you click "Delete" on one, RHF needs to know exactly which index to remove and how to shift the remaining data.

The control object manages this calculation behind the scenes.
It ensures that only the ExperienceSection re-renders, while the rest of your form (like PersonalInfo) stays perfectly still. This is how RHF maintains high performance in large forms.

The Mechanics of Dynamic Mapping: experience.${index}.years

In a standard input, you might register a field simply as "firstName". However, when dealing with dynamic arrays, we use Object Path Notation. This string is the precise "GPS coordinate" for a piece of data within your form's state tree.

Breaking Down the Path

Think of your form data as a JSON object. The string experience.${index}.years tells RHF exactly where to perform the update:

experience: Identifies the top-level array defined in your defaultValues.
.${index}: The dynamic pointer. Whether the index is 0, 1, or 2, it tells RHF which specific object in the list is being modified.
.years: The specific key (property) within that nested object.
The Result: When a user types "5" into the second row of your form, RHF internally maps that value to: state.experience[1].years = 5.

The valueAsNumber Transformation

Since the years field is defined as a number in our TypeScript schema, always remember that HTML inputs return strings by default. To keep your data clean, use the valueAsNumber option:

<input
  type="number"
  {...register(`experience.${index}.years`, { valueAsNumber: true })}
/>

This ensures that your onSubmit receives the integer 5 instead of the string "5", keeping your API payloads type-safe.

Conclusion:

By shifting from a monolithic form structure to a decoupled architecture using FormProvider and useFieldArray, we’ve achieved three critical engineering goals:

Maintainability: Our parent component remains lean, acting only as an orchestrator while individual "domains" (Personal Info, Experience) manage their own UI logic.
Performance: By leveraging the control object, we ensure that updates to a single item in a dynamic list don't trigger expensive re-renders across the entire application.

3.
Scalability: This pattern is "future-proof." Whether you need to add five more sections or transition to a multi-step wizard, the underlying logic of using useFormContext and nested paths remains the same.

Reverse Linked List

Devansh Prajapati — Fri, 27 Feb 2026 16:38:33 +0000

Reverse a Singly Linked List Objective :-
Given the head of a singly linked list, reverse the list so that:
The first node becomes the last

The last node becomes the first

All next pointers are reversed

The operation is done in-place

Return the new head of the reversed list.
Understanding the Problem
A singly linked list is a sequence of nodes where each node contains:
A value

A reference to the next node

Example:
1 → 2 → 3 → 4 → null
After reversing:
4 → 3 → 2 → 1 → null

Intuition
Here is how the linked list looks like.

We are given a “head”. Which is pointing to the first node. (Node stores the value and the address to the next node.)

So, What we can do here is if we store the next node’s address to the previous one then we can reverse the Linked List.

In Linked List each node points to the next node so we traverse in the List and swap the address to pointing backward then maybe we reverse the LL.

Let’s Try…

So we required two pointers that help us to do that. Let’s take “previous” and “current” two pointers to help us.

Now if you think we can assign previous to the head and current to the next of head then just we have to swap the address but be careful first store the current.next into temp node so you can go to the next address otherwise the next will be gone.
Approach
Here how each steps looks like:
Step 1:

Prev = 100, curr = 200.
temp = curr.next (300) //store the next of current
curr.next = prev (100) //store the previous address to the current’s next.
prev = curr (200) // move prev to the current
curr = temp (300) //move the current to the next address.

Step 2:

Prev = 200, curr = 300.
temp = curr.next (400) //store the next of current
curr.next = prev (200) //store the previous address to the current’s next.
prev = curr (300) // move prev to the current
curr = temp (400) //move the current to the next address.

Step 3:

Prev = 300, curr = 400.
temp = curr.next (null) //store the next of current
curr.next = prev (300) //store the previous address to the current’s next.
prev = curr (400) // move prev to the current
curr = temp (null) //move the current to the next address.

Step 4:

At Last, Curr stores the null and prev is on the last Node.

head.next = curr (null)
head = prev;

Final Output:

But there are some flows in this approach: what if the head or next of head is null? Also we will update the head node’s address at the end. That also makes it a more complicated approach it works fine although if you just handle the null pointer cases.

But if we take the current as head and prev as null and follow the same logic that is more appropriate and more intuitive.
Code Solution:

void reverseLL() {
LinkedNode prev = null;
LinkedNode current = head;

while (current != null){
LinkedNode next = current.next; // store the current node's next address
current.next = prev; // now store the previous address to the current node's address
prev = current; // update the previous with current one
current = next; // move current to the next location
}

//At the end Prev pointing to the last node
head = prev;
}

Initial State Before Loop:
Variable
Value
prev
null
current
10
head
10

Iteration 1
Step 1
next = current.next → 20
Step 2
current.next = prev
10 → null
Step 3
prev = current → 10
Step 4
current = next → 20

State After Iteration 1
Reversed part:
10 → null
Remaining:
20 → 30 → 40 → null
prev
current
next
10
20
20

Iteration 2
Step 1
next = 30
Step 2
20.next = 10
Step 3
prev = 20
Step 4
current = 30

State After Iteration 2
Reversed part:
20 → 10 → null
Remaining:
30 → 40 → null
prev
current
20
30

Iteration 3
Step 1
next = 40
Step 2
30.next = 20
Step 3
prev = 30
Step 4
current = 40

State After Iteration 3
Reversed part:
30 → 20 → 10 → null
Remaining:
40 → null
prev
current
30
40

Iteration 4
Step 1
next = null
Step 2
40.next = 30
Step 3
prev = 40
Step 4
current = null

State After Iteration 4
Reversed part:
40 → 30 → 20 → 10 → null
Remaining:
null
prev
current
40
null

Loop Ends
Now:
head = prev
So:
head = 40

Final Reversed List
40 → 30 → 20 → 10 → null

Stop Using Extra Arrays: Mastering the Two-Pointer Approach

Devansh Prajapati — Sun, 25 Jan 2026 09:56:55 +0000

In a two pointer approach we use two pointers which are pointing at two different or sometimes same locations in an array. For problems like move targeted element where we move target element at the front or end of the array or problem like remove duplicates where in sorted or unsorted array we remove the duplicate elements or move those elements at the end of the array can be approached or solved by the two pointer approach where the time complexity can be 0(n).

Let’s learn a two pointer approach by one example:- Remove duplicates from an array.

Problem statement:
Given an integer array nums sorted in non-decreasing order, remove the duplicates in-place such that each unique element appears only once. The relative order of the elements should be kept the same. [this is the problem from leetcode #26]

Consider the number of unique elements in nums to be k. After removing duplicates, return the number of unique elements k.

example:-
Input: nums = [1,1,2]
Output: 2, nums = [1,2,_]

Input: nums = [0,0,1,1,1,2,2,3,3,4]
Output: 5, nums = [0,1,2,3,4,,,,,_]

The standard approach would be to loop through an array and add unique elements to a new array. But in that case time complexity remains O(n) but space complexity would grow to the size of an array O(n) too. In small arrays like 100 or even 1000 entries it won’t be much difference but what if the array size is in billion? Takes too much extra space right? Here is where the two pointer approach comes in.

Lets see How would we solve this problem with a two pointer approach?

I solved this problem using the 'Paper-First' method—a part of my daily routine to ensure my logic is peaceful and precise before I ever touch the keyboard.

Solution:

var removeDuplicates = function(nums) {
if (nums.length === 0) return 0;

// We start at 1 because the first element is always unique
let insertIndex = 1;


for (let i = 1; i < nums.length; i++) {
    // If current element is different from the previous unique one
    if (nums[i] !== nums[insertIndex - 1]) {
        nums[insertIndex] = nums[i];
        insertIndex++;
    }
}


return insertIndex;

};

Here,

Step-1: if (nums.length === 0) return 0; Handling the Edge Case.
The first edge case handles the empty array. If an array has no element then we return zero cause there is nothing to perform on.

Step-2: let insertIndex = 1;
Variable declaration: In our case this acts as a pointer (1st pointer) that we use to point to the desired index to perform swap operation.

Step-3: for (let i = 1; i < nums.length; i++) { … }; loop
In step - 3 we loop through an array and do changes in this array to save the extra space.
if (nums[i] !== nums[insertIndex - 1]) {
nums[insertIndex] = nums[i];
insertIndex++;
}

This is the most important part of the code. Where we put our logic. We check everytime that if the numsi is equal to the last element of insertIndex (-1)?
Without nums[insertIndex - 1] would throw an error on an empty array. Because we started the index from 1.

Example: - nums = [] // length is 0
So checking nums[insertIndex] = 1 array index out of Bound error.

If not then this is the unique element so we add the new element at the index of insertIndex. And increment the insertIndex so we add the next unique element at the next place of this operation.

Step-4: Return the last updated index: insterIndex
At the end we return the last updated index insertIndex which is pointing to the next point of the last added element.

Dry Run:

We can better understand this by dry running the code on the example array.

Example: [ 0, 0, 1, 1, 2 ]

Step
i (Explorer)
nums[i]
nums[insertIndex-1]
Comparison
Action
Array State
Start
1
0
0 (at index 0)
0 !== 0? No
Skip
[0, 0, 1, 1, 2]
Iter 1
2
1
0 (at index 0)
1 !== 0? Yes
nums[1] = 1; insertIndex++
[0, 1, 1, 1, 2]
Iter 2
3
1
1 (at index 1)
1 !== 1? No
Skip
[0, 1, 1, 1, 2]
Iter 3
4
2
1 (at index 1)
2 !== 1? Yes
nums[2] = 2; insertIndex++
[0, 1, 2, 1, 2]

Key Takeaway:
Time Complexity: O(n)
Space Complexity: O(1)
Best for: In-place modifications of sorted arrays.

Conclusion
So, the Two pointer Approach is a classic and easy to implement algorithm. In three steps we can implement this. 1st is return on an empty array, 2nd is defining the variable (pointer to 1 or 0 depending on the problem) 3rd would be to loop through it and check if the current element is unique to the last updated element? 4th return the last updated variable. simple and effective.

To check your knowledge? The Problem: Given an array of integers, move all the zeroes to the end of it while maintaining the relative order of the non-zero elements.
Example: [0, 1, 0, 3, 12] -> [1, 3, 12, 0, 0]
Constraint: You must do this in-place without making a copy of the array.