Implementation:FlowiseAI Flowise OnNodeDataChange

Attribute	Value
Source Repository	FlowiseAI/Flowise
Source File	packages/ui/src/store/context/ReactFlowContext.jsx
Domain	Chatflow_Creation
Workflow	Chatflow_Creation
Last Updated	2026-02-12

Overview

Concrete React context method for updating node parameters in the ReactFlow canvas state. The onNodeDataChange function receives a parameter change event, updates the target node's input state, recalculates parameter visibility using showHideInputParams(), removes hidden parameter values, and conditionally triggers a React re-render based on deep equality checking.

Code Reference

Source Location

• File: packages/ui/src/store/context/ReactFlowContext.jsx
• Lines: L51-91

Signature

const onNodeDataChange = ({ nodeId, inputParam, newValue }) => { ... }

Where:

• nodeId: string -- Target node ID
• inputParam: { name: string, ... } -- The parameter definition being changed
• newValue: any -- New parameter value

Returns: void (mutates ReactFlow state via setNodes)

Import

import { flowContext } from '@/store/context/ReactFlowContext'

// Inside a component:
const { onNodeDataChange } = useContext(flowContext)

I/O Contract

Inputs

Parameter	Type	Required	Description
nodeId	string	Yes	The unique ID of the target node whose parameter is being changed
inputParam	object	Yes	The parameter definition object, must include name (the parameter key)
newValue	any	Yes	The new value for the parameter (string, number, boolean, array, object, etc.)

Outputs

Output	Type	Description
(side effect)	void	Updates the ReactFlow nodes state; triggers re-render only if parameter list has actually changed

Implementation Details

Step-by-Step Logic

const onNodeDataChange = ({ nodeId, inputParam, newValue }) => {
    // 1. Map over all nodes, finding the target node by ID
    const updatedNodes = reactFlowInstance.getNodes().map((node) => {
        if (node.id === nodeId) {
            // 2. Clone inputs and apply the new value
            const updatedInputs = { ...node.data.inputs }
            updatedInputs[inputParam.name] = newValue

            // 3. Recalculate parameter visibility with updated inputs
            const updatedInputParams = showHideInputParams({
                ...node.data,
                inputs: updatedInputs
            })

            // 4. Remove inputs whose parameters are now hidden
            Object.keys(updatedInputs).forEach((key) => {
                const input = updatedInputParams.find((param) => param.name === key)
                if (input && input.display === false) {
                    delete updatedInputs[key]
                }
            })

            // 5. Return updated node with new inputParams and inputs
            return {
                ...node,
                data: {
                    ...node.data,
                    inputParams: updatedInputParams,
                    inputs: updatedInputs
                }
            }
        }
        return node
    })

    // 6. Only trigger setNodes if inputParams actually changed (deep equality)
    const hasChanges = updatedNodes.some(
        (node, index) => !isEqual(
            node.data.inputParams,
            reactFlowInstance.getNodes()[index].data.inputParams
        )
    )

    if (hasChanges) {
        reactFlowInstance.setNodes(updatedNodes)
    }
}

Key Dependencies

• showHideInputParams from @/utils/genericHelper -- Evaluates show/hide conditions on each parameter and sets the display flag.
• isEqual from lodash -- Deep equality comparison for change detection.
• reactFlowInstance -- The ReactFlow instance from context, provides getNodes() and setNodes().

Usage Examples

Consuming onNodeDataChange in an input component

import { useContext } from 'react'
import { flowContext } from '@/store/context/ReactFlowContext'

const NodeInputField = ({ nodeId, inputParam, value }) => {
    const { onNodeDataChange } = useContext(flowContext)

    const handleChange = (newValue) => {
        onNodeDataChange({
            nodeId,
            inputParam,
            newValue
        })
    }

    return (
        <input
            value={value}
            onChange={(e) => handleChange(e.target.value)}
        />
    )
}

Updating a boolean toggle that controls visibility of other fields

import { useContext } from 'react'
import { flowContext } from '@/store/context/ReactFlowContext'

const MemoryToggle = ({ nodeId }) => {
    const { onNodeDataChange } = useContext(flowContext)

    const handleToggle = (checked) => {
        onNodeDataChange({
            nodeId,
            inputParam: { name: 'enableMemory' },
            newValue: checked
        })
        // If other params have show: { enableMemory: true },
        // they will become visible/hidden automatically
    }

    return <Switch onChange={(e) => handleToggle(e.target.checked)} />
}

Context Provider Structure

The onNodeDataChange function is part of the flowContext React context, which also provides:

• reactFlowInstance / setReactFlowInstance -- The ReactFlow instance
• deleteNode(nodeId) -- Deletes a node and its connected edges
• deleteEdge(edgeId) -- Deletes a single edge
• duplicateNode(id, distance) -- Duplicates a node with offset positioning
• onAgentflowNodeStatusUpdate({ nodeId, status, error }) -- Updates agentflow execution status
• clearAgentflowNodeStatus() -- Clears all agentflow execution statuses

Related Pages

• Principle:FlowiseAI_Flowise_Node_Parameter_Configuration