use-watch-change.ts

Overview

The use-watch-change.ts file defines a custom React hook, useWatchFormChange, designed to synchronize changes in a React Hook Form instance with an external state store representing a graph or canvas structure. Specifically, it listens for changes in form data and updates a corresponding node's form data in a centralized graph store, ensuring UI consistency between the form and canvas representation of nodes.

This hook is particularly useful in applications where node-based editors or graph visualizations are implemented, and where form data edits must be reflected immediately in the node's data model.

Detailed Explanation

useWatchFormChange

export function useWatchFormChange(id?: string, form?: UseFormReturn)

Purpose

This custom React hook watches for changes in a form managed by react-hook-form and propagates those changes to a node identified by id in a global graph store.

Parameters

• id?: string
  The unique identifier for the node whose form data should be updated. If no id is provided, the hook does not perform any update.

• form?: UseFormReturn
  The form instance returned from react-hook-form's useForm() hook. This instance provides access to form state, values, and helper methods.

Behavior & Implementation Details

• Uses useWatch from react-hook-form to subscribe to real-time changes in form values.

• Uses useEffect to react when the form's dirty state (formState.isDirty), node id, or form values change.

• When triggered, it:

  • Retrieves the current form values.

  • Clones the conditions array deeply to ensure a new reference is passed, which is necessary because useFieldArray mutations may not change the array reference automatically.

  • Calls updateNodeForm from the centralized graph store to update the node data, effectively syncing form changes to the graph.

Return Value

• This hook does not return any value. It operates via side effects.

Usage Example

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

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

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

  return (
    <form>
      {/* form fields */}
    </form>
  );
}

Important Implementation Details

• Deep Cloning conditions Array
  The conditions array inside the form data is cloned using .map(x => ({ ...x })). This ensures that the reference changes even if the content seems the same, which is important because react-hook-form's useFieldArray may mutate the array without changing its reference. This triggers the update correctly in the graph's state.

• Dependency on formState.isDirty
  The hook listens for changes in the form dirty state to prevent unnecessary updates when the form is pristine.

• Integration with Zustand Store
  The hook uses a Zustand store useGraphStore to update node form data. This store presumably manages the overall graph state including nodes and edges.

• Console Logging
  There's a debug console.log to track when the form is dirty and changes are detected. This can be removed or replaced with proper logging depending on the environment.

Interaction With Other Parts of the System

• Graph Store (useGraphStore)
  The hook depends on useGraphStore (a Zustand store) to update the node's data. This store likely manages the graph or canvas state in the application.

• React Hook Form (react-hook-form)
  The hook integrates tightly with react-hook-form for form state management, using useWatch and the form object to monitor and retrieve form values.

• Agent Interface (ISwitchCondition)
  The form data contains an array of ISwitchCondition objects, imported from a shared interface. This indicates the form likely represents a node with switch conditions that influence its behavior.

Mermaid Diagram: Class / Function Structure

flowchart TD
    A[useWatchFormChange] --> B[useWatch (react-hook-form)]
    A --> C[useEffect React Hook]
    A --> D[useGraphStore - updateNodeForm]
    C -->|watches| E[formState.isDirty, id, values]
    C -->|on change| D
    D -->|updates| F[Graph Node Form Data]

    style A fill:#f9f,stroke:#333,stroke-width:2px
    style D fill:#bbf,stroke:#333,stroke-width:2px

Summary

use-watch-change.ts provides a focused utility hook for synchronizing form changes to a graph node's data in a React application. It leverages react-hook-form's watch capabilities combined with a global state store to maintain consistent data flow between the UI form and the canvas nodes. The deep cloning of nested arrays and consideration of React Hook Form internals demonstrate attention to React state management nuances.

This hook is a core piece for node editor components or any UI involving interactive forms tied to graph data models.

End of Documentation