React Query Builder version

6.5.5

Platform

Chrome on macOS 15.4.1

Description

Hi,

When using a custom value editor with a select dropdown in the React Query Builder, the entire custom value editor re-renders whenever the props.handleOnChange function is triggered by selecting an option in the dropdown. This behaviour is causing performance issues and unnecessary API calls.

Reproduction

Steps to reproduce:

1. Implement a custom value editor for the React Query Builder.
2. Use a select dropdown as part of the custom value editor.
3. Pass the props.handleOnChange function to the dropdown's onChange handler.
4. Change the dropdown's selected option.

Expected behavior

The dropdown should update its value without re-rendering the entire custom value editor.
The parent component should not trigger unnecessary API calls or state updates unless the value has genuinely changed.

Additional information

The issue is likely caused by the props.handleOnChange function triggering a state update in the parent component, which propagates back to the custom value editor.
The dropdown options are dynamically generated, and the value is passed as a prop to the dropdown.

Sample code:

import React from 'react';
import { ValueEditorProps } from 'react-querybuilder';

const CustomValueEditor = ({ props }: { props: ValueEditorProps }) => {
  const options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
  ];

  return (
    <select
      value={props.value}
      onChange={(e) => props.handleOnChange(e.target.value)}
    >
      {options.map((option) => (
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
  );
};

export default CustomValueEditor;