this also could have been if (previewParam.type === "list(string) && param.options.length > 0)
but it feels like checking the form_type is more specific and the only case that needs this logic

An alternative to avoid the boolean ref and the dependency array could be to add refs for the dependencies

const currentParameters = initialParametersRef.current;
const currentRichParams = initialRichParameterValuesRef.current;
const currentSendMessage = sendMessageRef.current;

For something like this, you don't want to sync state via useEffect, because that means the UI completes a full render with the wrong data (including painting the screen), the state sync happens, and then you have to redo the whole render (possibly introducing screen flickering)

This is how I'd do it, and the React Docs recommend it, too:

const [localValue, setLocalValue] = useState(
  value !== undefined ? value : validValue(parameter.value),
);
if (value !== undefined && value !== localValue) {
  setLocalValue(value);
}

Setting state mid-render is valid, as long as you eventually hit a case where you stop calling the state setter. Inside an event handler, the state setter will bail out of re-renders if you dispatch a state value that's equal to the value currently in state. That protection is removed during a render to make sure the user doesn't call a state setter unconditionally

This approach limits the "scope of the redo", because what happens is:

1. Let's say Component A is defined in terms of Component B and Component C
2. Component A starts rendering
3. The state changes mid-render
4. The render for Component A finishes. Any effects and event handlers that were defined inside the component are created as monadic functions, and the JSX object output is returned, which includes component references for Component B and Component C
5. React sees that the state changed, and knows that the result it produced is invalid
6. It throws away the effects, event handlers, and JSX objects. At this point, Component B and Component C have not been allowed to start rendering
7. React redoes the render for Component A
8. The state stays stable this time around
9. React knows that the output is fine this time, so it proceeds to use the JSX object output to render Component B and Component C – for the very first time in this specific render cycle
10. The whole subtree finishes rendering, and then paints the whole updated output to the screen

Though (lol), after writing all that out, I think the better option would be to remove the state entirely, and then pass this to the value prop: value ?? validValue(parameter.value)

How much churn has this component had? I see a bunch of undefined checks for localValue, even though it's guaranteed to always be a string

If this is only being used for a truthy check to influence the conditional rendering, can we replace this with an autofill boolean?

Do we want to make only one of these required? I would think it'd be better to have both be optional, so that users can use the component as controlled/uncontrolled

Especially since some of the variants don't receive an onChange at all

Also, I'm just now realizing: I think we can remove the Promise part of the return type. I don't see any awaits in this file, and that reduces the function coloring problem

I just checked again and it seems like every form control variant does use onChange

Something I've been wondering about: when do you think it makes sense to define a global TooltipProvider to act as a default context, making it so that people only need to add a provider specifically to override the duration?

Defining the providers every single time still works, but there's more risk of the durations getting out of sync, which can make the UX feel inconsistent across the product

The default delay duration is too slow, I do think the delayDuration should be set globally but haven't had a chance to do this yet. Already there are inconsistencies between the TooltipProvider and the legacy MUI tooltips.

This actually won't work as intended. localValue is guaranteed to be of type string on initialization, but prevDebouncedValueRef is being initialized with undefined, so the comparison will always evaluate to false on the initial render, and the onChangeEvent branch will never get hit

One easy fix is this, which also removes the need for the type parameter:

const prevDebouncedValueRef = useRef(localValue);

My goal for this was to prevent onChangeEvent getting triggered until user makes a change in the form field. Did you have a different idea for what the intention is?

I'm not 100% clear on why this is set up this way, or the nuances of what it's trying to do. onInput is mostly equivalent to onChange (in fact, React made the historical mistake of breaking from the HTML spec, and patching onChange to be more like onInput). I don't think most React components ever need both

I'm guessing that at the very least, the handler is meant to make it so that the textarea only grows when we know for a fact that the user wants to interact with it. In which case, all of this logic can be moved into the onChange handler.

But if the max height is being statically set to 700px, maybe we could make it so that this change triggers in response to the first onFocus event?

Moved the code to onChange, onFocus does not work as expected.

State setter callbacks have to be 100% pure. I want to say React Strict Mode will also double-call a state dispatch update to make sure of that. As in, it does the first dispatch, throws away the result, and then only flushes the second one to state

But also, I'm seeing that we're never using the ID in the render logic, so assuming we don't need it for any future work, we can safely replace it with a useRef call

This is another case where we want to remove the side effect from the state update. I'm actually much more concerned about this actually turning into a bug

I want to say useEffectEvent should help here. As in, since the function isn't ever being passed down as props, it should be safe to turn this into:

const onMessage = useEffectEvent((response: DynamicParametersResponse) => {
  if (currentResponse?.id === response.id) {
    return;
  }

  if (!initialParamsSentRef.current && response.parameters.length > 0) {
    sendInitialParameters([...response.parameters]);
  }
  
  setCurrentReswponse(response);
});