Hoy me enfrento a un problema realmente extraño y no puedo resolverlo. Estoy usando la consulta de reacción para obtener datos para mi Combobox.

 const { isLoading, data } = useQuery('loadBranchBICRMA', loadBranchBIC)

y estoy usando form.watch para detectar si hay algún cambio en mi Combobox porque si hay algún cambio revisaré mi base de datos y llenaré el resto del formulario si hay una coincidencia.

 const receiverBIC = form.watch('ReceiverBIC'); const senderBIC = form.watch("SenderBIC") ; const [branchColumns] = React.useState(['none']); const [messageTypeColumns] = React.useState(['accptdMsg','declndMsg']); const validateRMA = () => { const URL = VALIDATE_RMA + `/${senderBIC}/${receiverBIC?.length === 8 ? receiverBIC+"XXX": receiverBIC}` axios.get(URL, {httpsAgent}) .then((response) => { if (response.data !== ''){ setSelectedAcceptedMessages(response.data.accptdMsg); setSelectedDeclinedMessages(response.data.declndMsg); setIsSave(true) }else setIsSave(false); }).catch(); } useEffect(() => {if ( receiverBIC?.length !== 0 ) {validateRMA();}}, [receiverBIC,senderBIC]);

El problema es que si hay menos de 2 elementos en mi Combobox, form.watch vuelve a renderizar y bloquea mi aplicación. La parte extraña es por qué 2 elementos: D cualquier ayuda me salvará gracias.