use-watch-change.ts

Overview

The use-watch-change.ts file provides a custom React hook named useWatchFormChange designed to integrate React Hook Form's state watching capabilities with an external state management system (likely a canvas or graph editor). The hook listens for changes in form data and synchronizes these changes with a graph store, effectively keeping the form state and the visual node representation in sync.

This file plays a critical role in bridging the form UI and the underlying data model by ensuring that any changes in the form are reflected immediately in the application state, which might be represented visually on a canvas or graph.

Detailed Explanation

useWatchFormChange Hook

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

Description

useWatchFormChange is a custom React hook that leverages react-hook-form's useWatch to monitor the form state, and a state management store (useGraphStore) to update a node's form data when changes occur.

• It listens for changes in the form values.

• When the watched values change, it triggers an effect to update the corresponding graph node’s data.

• The update includes making a shallow copy of any items array in the form values to prevent reference issues.

Parameters

Return Value

• The hook does not return any value (void). Its purpose is to cause a side-effect (state synchronization).

Usage Example

import { useForm } from 'react-hook-form';

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

  useWatchFormChange(nodeId, form);

  return (
    <form>
      {/* form inputs bound to form */}
    </form>
  );
}

In the example above, useWatchFormChange will watch the form controlled by react-hook-form and update the graph store node with nodeId whenever the form values change.

Implementation Details

• State Watching: Uses useWatch from react-hook-form to subscribe to the form's control state and get live form values.

• State Synchronization: Utilizes useEffect with dependencies [id, updateNodeForm, values] to trigger updates when any relevant change occurs.

• Shallow Copy for Arrays: When updating the node form state, the items array is shallow copied via .slice() to avoid mutating the original array reference, which is important for React state updates and immutability principles.

• Conditional Update: The update only occurs if a valid id is provided, ensuring updates are targeted to a specific node.

Interaction with Other Parts of the System

• react-hook-form: The hook depends heavily on React Hook Form's useWatch and UseFormReturn to monitor form data changes.

• Graph Store (useGraphStore): This is a custom Zustand-like store imported from ../../store. The hook uses its updateNodeForm function to update the node's data in the global graph state, which likely reflects on a canvas or graph UI.

• React Component: The hook is expected to be used inside React function components that render form UIs for nodes or entities that exist within a graph or canvas.

This connection allows form edits to immediately update the underlying node data, which may then trigger re-renders or visual updates elsewhere in the system.

Mermaid Diagram: Function Flowchart

flowchart TD
    A[useWatchFormChange Hook] --> B[useWatch -> watches form control values]
    B --> C{Is id defined?}
    C -- No --> D[Do nothing]
    C -- Yes --> E[Get current form values via form.getValues()]
    E --> F[Create shallow copy of items array if present]
    F --> G[Call updateNodeForm(id, updatedValues)]
    G --> H[Graph store updates node form data]

Summary

• Purpose: Synchronizes form state changes with a graph node's data.

• Key Technologies: React Hook Form (useWatch), Zustand-like store (useGraphStore).

• Effect: Automatically updates node data in the graph state when the associated form changes.

• Usage Context: Useful in graphical editors, flowchart apps, or any system where form inputs correspond to complex visual nodes needing live updates.

This documentation should enable developers to understand, maintain, and extend the useWatchFormChange hook effectively within the larger application context.