Componente editor

 import Editor from '@monaco-editor/react'; import { useDebounce } from './useDebounce'; import { useEffect, useState } from 'react'; type Props = { code: string; onChange: (code: string) => void; disabled?: boolean; }; export const GraphqlCodeEditor = ({ onChange, code, disabled = false, }: Props) => { const [editorValue, setEditorValue] = useState(code); const editorValueDebounced = useDebounce(editorValue, 500); useEffect(() => { onChange(editorValueDebounced); }, [editorValueDebounced, onChange]); useEffect(() => { if (code !== editorValueDebounced) { setEditorValue(code); } }, [code, editorValueDebounced]); return ( <Editor options={{ minimap: { enabled: false }, autoClosingBrackets: 'always', readOnly: disabled, }} language="graphql" value={editorValue} onChange={(value) => { if (value) { setEditorValue(value); } }} /> ); };

Usar gancho antirrebote

 import { useEffect, useState } from 'react'; export const useDebounce = <T>(value: T, delay: number) => { // State and setters for debounced value const [debouncedValue, setDebouncedValue] = useState(value); useEffect( () => { // Update debounced value after delay const handler = setTimeout(() => { setDebouncedValue(value); }, delay); // Cancel the timeout if value changes (also on delay change or unmount) // This is how we prevent debounced value from updating if value is changed ... // .. within the delay period. Timeout gets cleared and restarted. return () => { clearTimeout(handler); }; }, [value, delay] // Only re-call effect if value or delay changes ); return debouncedValue; };

El accesorio de código en el componente del editor es administrado por un componente principal. Cuando, por ejemplo, un usuario carga un nuevo fragmento de código, se actualiza y el editor debe cargar el nuevo valor. El editor también debe rebotar su valor para que la función onChange() no se llame cada vez que se presiona una tecla.

El componente editor anterior da como resultado un bucle en el que el componente cambia entre el valor anterior y el nuevo cada 500 ms.

¿Cómo puedo lograr esto con el gancho useDebounce?

Creo que esto está estrechamente relacionado con esta publicación , sin embargo, está usando el rebote de lodash. Esperaba lograr lo mismo con el gancho useDebounce.