use-watch-change.ts

Overview

The use-watch-change.ts file provides two custom React hooks, useWatchFormChange and useWatchNameFormChange, designed to integrate React Hook Form's useWatch functionality with a centralized state management store (likely Zustand, given the naming convention and usage pattern). These hooks listen for changes in form data and synchronize the updates with a graph-related store that manages node data on a canvas or graphical interface.

This file plays a crucial role in keeping the UI state in sync with user input by automatically updating the graph state whenever the form values or specific form fields change. It is primarily used to reflect real-time changes in form fields directly onto nodes in a graphical editor or canvas.

Detailed Description of Functions

1. useWatchFormChange

Purpose

Synchronizes the entire form's current values with the graph store node identified by id. It listens for any changes in the form's data and pushes those changes to the centralized graph store.

Signature

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

Parameters

• id (string | undefined): The unique identifier of the node in the graph store that should be updated.

• form (UseFormReturn<any> | undefined): The form instance returned by React Hook Form's useForm hook, which provides access to the form's control and values.

Behavior

• Uses React Hook Form's useWatch to subscribe to all form values.

• On any change in the watched form values or the id, the effect triggers.

• Inside the effect:

  • It retrieves the current form values using form.getValues() to ensure the latest snapshot.

  • Calls the updateNodeForm method from the graph store with the node id and these values, updating the node's form data in the store.

Returns

• void

Usage Example

const form = useForm({ defaultValues: { label: '', description: '' } });
const nodeId = 'node-123';

useWatchFormChange(nodeId, form);
// When form values change, the node with id 'node-123' will be updated with the new form values.

2. useWatchNameFormChange

Purpose

Specifically watches the name property of a form and updates the name of a node in the graph store when it changes.

Signature

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

Parameters

• id (string | undefined): The node identifier in the graph store whose name should be updated.

• form (UseFormReturn<any> | undefined): The React Hook Form instance used to retrieve and watch form data.

Behavior

• Uses useWatch to subscribe to all form values.

• On any change in the watched values or the id, the effect triggers.

• Inside the effect:

  • Calls the updateNodeName method from the graph store with the node id and the current value of values.name.

  • This updates the node's name in the graph store.

Returns

• void

Usage Example

const form = useForm({ defaultValues: { name: 'Initial Node Name' } });
const nodeId = 'node-123';

useWatchNameFormChange(nodeId, form);
// When the 'name' field changes, the node name in the graph store will be updated accordingly.

Important Implementation Details

• React Hook Form Integration: Both hooks leverage useWatch from React Hook Form to subscribe to form value changes reactively. This enables fine-grained, performant listening to form changes without manual subscriptions or event handlers.

• Centralized State Management: The hooks use useGraphStore (likely a Zustand store) to retrieve updater functions (updateNodeForm and updateNodeName). This centralizes state updates and ensures the UI (canvas or graph editor) remains consistent with form inputs.

• Effect Dependencies: The hooks have dependencies on id, the update functions from the graph store, and the watched values. This ensures that whenever these change, the effects run and synchronize state accordingly.

• Form Snapshot: In useWatchFormChange, the form values are explicitly re-fetched via form.getValues() inside the effect to ensure the latest snapshot is used, avoiding potential stale closure issues with useWatch.

Interaction with Other Parts of the System

• Graph Store (useGraphStore): The hooks interact directly with the graph store to update node data. This store likely manages the state of nodes rendered on a canvas or graphical editor, such as a flowchart or diagram.

• React Hook Form (useForm, useWatch): These hooks are designed to be used in conjunction with forms managed by React Hook Form. They depend on the form's control and values to listen for changes.

• UI Components (Not included here): Components rendering the form and the graph editor will use these hooks to keep their state synchronized. For example, a node detail panel form will use these hooks to update the graph state in real-time as a user edits node properties.

Mermaid Diagram: Function Flowchart

flowchart TD
    A[useWatchFormChange] --> B[useWatch(form.control)]
    A --> C[useEffect triggered on id or values change]
    C --> D[Get latest form values with form.getValues()]
    D --> E[updateNodeForm(id, values) via useGraphStore]

    F[useWatchNameFormChange] --> G[useWatch(form.control)]
    F --> H[useEffect triggered on id or values change]
    H --> I[updateNodeName(id, values.name) via useGraphStore]

Summary

The use-watch-change.ts file provides two custom hooks that bridge React Hook Form's reactive form state management with a graph store managing node data. They enable real-time synchronization of form inputs with graph nodes, keeping the UI consistent and responsive to user changes. These hooks facilitate modular, clean, and reactive updates in a graphical editor context.

This file is a utility layer that simplifies form-to-graph synchronization and ensures that updates to form fields propagate immediately to the underlying graph data model.