use-watch-change.ts

Overview

The use-watch-change.ts file defines a custom React hook named useWatchFormChange that integrates React Hook Form's useWatch with a global state store (managed via useGraphStore). Its primary purpose is to observe changes in a form's data and synchronize these changes with a graphical canvas or node-based UI representation. When the form data changes, the hook updates the corresponding node in the global graph store, ensuring the UI reflects the latest form state.

This file is particularly useful in applications where form inputs dynamically affect a visual graph or node-based editor, such as workflow designers, diagram editors, or data flow interfaces.

Detailed Explanation

useWatchFormChange

export function useWatchFormChange(id?: string, form?: UseFormReturn<any>): void

Description

A React hook that watches for changes in a form's values and updates a node's data in the global graph store accordingly.

Parameters

• id?: string
  The unique identifier of the node whose form data is being tracked and updated. If no id is provided, the hook does not perform any updates.

• form?: UseFormReturn<any>
  An instance of the form controller returned from react-hook-form's useForm or equivalent. This object provides form control methods and state.

Return Value

• void
  This hook does not return any value. Its side effect is updating the global graph store when form values change.

Usage Example

import { useForm } from 'react-hook-form';
import { useWatchFormChange } from './use-watch-change';

function NodeEditor({ nodeId }: { nodeId: string }) {
  const form = useForm({
    defaultValues: {
      name: '',
      items: [],
    },
  });

  // Synchronize form changes to the graph store
  useWatchFormChange(nodeId, form);

  // Render form inputs here...
  return (
    <form>
      {/* form inputs */}
    </form>
  );
}

Implementation Details

• Form Watching
  The hook uses useWatch from react-hook-form to subscribe to all form value changes (values).

• Effect Hook
  Inside a useEffect, it triggers whenever the id, updateNodeForm function, or values change.

• Manual Value Retrieval
  To ensure that the latest form values are used (including unregistered or changed fields), it explicitly calls form.getValues() rather than relying solely on the watched values.

• Deep Copy for items Array
  When updating the node, the items array from the form values is shallow copied via .slice(). This prevents unintended mutations to the original array reference, aiding in React state change detection.

• Global Store Interaction
  The updateNodeForm method from the useGraphStore global state store is invoked to update the node's form data by passing the node id and the updated form values.

Interaction with Other Parts of the System

• React Hook Form (react-hook-form)
  The hook depends on useWatch and the UseFormReturn interface from react-hook-form to observe form state changes.

• Global State Store (useGraphStore)
  The useGraphStore hook is imported from the application's store module (../../store) and provides the updateNodeForm function. This function likely updates the node data in a centralized store, which drives the UI or canvas rendering.

• Graphical Canvas / Node Editor
  Nodes on the canvas or editor UI receive updated form data from the store, ensuring the visual representation remains consistent with the form inputs.

Visual Diagram

flowchart TD
    A[useWatchFormChange Hook]
    B[useWatch (react-hook-form)]
    C[getValues() from form]
    D[useEffect]
    E[updateNodeForm(id, updatedValues) - useGraphStore]

    A --> B
    A --> C
    A --> D
    D --> E

Diagram Explanation:

• The useWatchFormChange hook uses useWatch to listen to form changes and getValues() to obtain the latest form data.

• Inside a useEffect, whenever dependencies change (id, values), it calls updateNodeForm from the global store to update the node data.

Summary

• use-watch-change.ts provides a React hook to synchronize form data with a global graph store.

• It watches form values using react-hook-form and updates node data via updateNodeForm.

• Helps maintain synchronization between form input and a node-based UI or canvas.

• Uses React hooks (useEffect) and shallow copying to handle form changes efficiently.

• Integrates tightly with the global state management and form libraries in the application.

This hook is a key utility for applications where form inputs dynamically drive visual node updates, such as in visual programming environments or diagram editors.