Couple of things here:

For one, version 7 introduced a ton of performance improvements mainly related to memoization, so upgrading to the latest (currently v8.5.0) may resolve any perf issues you're encountering with v6.5.5.

Secondly, you say "The dropdown should update its value without re-rendering the entire custom value editor." I may be wrong, but I'm pretty sure that can only be the case with an uncontrolled component (and maybe not even then, at least it's not guaranteed). All sub-components (custom or not) are controlled components within QueyrBuilder, so a value change will necessarily cause a re-render. With v7/v8, the re-renders are granular to the rule level, but they still happen.

But I'm curious why it matters. Are you seeing issues due to too many re-renders of the value editor specifically? Now that I'm typing this out, I'm getting the feeling you're talking about re-renders of the entire query builder component and not just the value editor. If that's the case, then upgrading to the latest version should resolve the problem.

Hi @jakeboone02,
Thanks for your reply.

Re-renders occur in the custom value editor due to API calls with no-cache, explicitly displaying the component in a loading state. To address this, we implemented cache logic to prevent redundant API calls.

I understand that handleOnChange is necessary to update the state of the rules, which triggers re-renders. However, the issue has been resolved through an alternative approach.

Thanks.

Ok now I'm curious about your actual code and the workaround you implemented. Any chance you could elaborate?

Hi @jakeboone02, sorry for the delayed response.
That was more straightforward on the API calling module to enable the cache. So even when we call the API onHandleChange, it triggers the custom value editor and provides the same output from the cache memory.

<QueryBuilder ...otherProps controlElements={{ valueEditor: customValueEditor}} />

customValueEditor: ( This is a mocked code for a reference)

import React, { useState, useEffect, useCallback } from 'react';
const getResponse = // Mock function to simulate fetching data
const InputText = ({ value, onChange }) => <input value={value} onChange={onChange} />; // Mock input component
const Dropdown = ({ options }) => <select>{options.map((opt) => <option key={opt.value}>{opt.label}</option>)}</select>; // Mock dropdown

const CustomValueEditor = ({ fieldName, inputType, readOnly, onChange }) => {
    const [apiValue, setApiValue] = useState({});
    const fetApiValue = useCallback(async () => {
        const response = await getResponse(fieldName);
        const values = response.map((item) => ({ label: item, value: item })); // Mock value transformation
        setAttValue({ [fieldName]: values });
    }, [fieldName]);

    useEffect(() => {
        setApiValue();
    }, [fieldName]);

    if (inputType === 'text') {
        return <InputText value={attributeValue[fieldName]?.[0]?.value || ''} onChange={onChange} readOnly={readOnly} />;
    } else if (inputType === 'select') {
        return <Dropdown options={attributeValue[fieldName] || []} />;
    } else {
        return <div>Invalid input type</div>;
    }
};

export default CustomValueEditor;

Thanks