How to use the use-debounce.useDebounce function in use-debounce
To help you get started, we’ve selected a few use-debounce examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
pubpub / pubpub / client / components / FormattingBarNew / controls / ControlsEquation.js View on Github 
const ControlsEquation = (props) => {
const { editorChangeObject, onPendingChanges, onClose } = props;
const { changeNode, selectedNode, updateNode } = editorChangeObject;
const {
commitChanges,
revertChanges,
hasPendingChanges,
updateAttrs,
pendingAttrs,
} = useCommitAttrs(selectedNode.attrs, updateNode, onPendingChanges);
const { value, html } = pendingAttrs;
const [debouncedValue] = useDebounce(value, 250);
const hasMountedRef = useRef(false);
const isBlock = selectedNode.type.name === 'block_equation';
useEffect(() => {
// Avoid an initial call to the server's LaTeX renderer on mount
// We shouldn't need this anyway -- but moreover, it will sometimes produce HTML that is
// insubstantially different from that given in our Prosemirror schema definitions, making
// it appear as though there is a user-driven change to the node that needs to be committed
// or reverted.
if (!hasMountedRef.current) {
hasMountedRef.current = true;
return;
}
renderLatexString(debouncedValue, false, (nextHtml) => {
updateAttrs({ html: nextHtml });
});useEffect( () => {
if (
calculatePriceRangeQueryState !== currentQueryPrices &&
currentQueryPrices !== undefined
) {
setCalculatePriceRangeQueryState( currentQueryPrices );
}
}, [
currentQueryPrices,
setCalculatePriceRangeQueryState,
calculatePriceRangeQueryState,
] );
// Defer the select query so all collection-data query vars can be gathered.
const [ shouldSelect, setShouldSelect ] = useState( false );
const [ debouncedShouldSelect ] = useDebounce( shouldSelect, 200 );
if ( ! shouldSelect ) {
setShouldSelect( true );
}
const collectionDataQueryVars = useMemo( () => {
return buildCollectionDataQuery( collectionDataQueryState );
}, [ collectionDataQueryState ] );
return useCollection( {
namespace: '/wc/store',
resourceName: 'products/collection-data',
query: {
...queryState,
page: undefined,
per_page: undefined,const DomainPicker: FunctionComponent< Props > = ( {
defaultQuery,
onDomainSelect,
queryParameters,
} ) => {
const label = NO__( 'Search for a domain' );
const [ domainSearch, setDomainSearch ] = useState( '' );
const [ search ] = useDebounce( domainSearch.trim() || defaultQuery || '', selectorDebounce );
const suggestions = useSelect(
select => {
if ( search ) {
return select( DOMAIN_SUGGESTIONS_STORE ).getDomainSuggestions( search, {
include_wordpressdotcom: true,
include_dotblogsubdomain: true,
quantity: 4,
...queryParameters,
} );
}
},
[ search, queryParameters ]
);
const handleHasDomain = () => {
// eslint-disable-next-line no-consoleconst ControlsLink = (props) => {
const {
editorChangeObject: { activeLink },
onClose,
} = props;
const [href, setHref] = useState(activeLink.attrs.href);
const [debouncedHref] = useDebounce(href, 250);
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => activeLink.updateAttrs({ href: debouncedHref }), [debouncedHref]);
const handleKeyPress = (evt) => {
if (evt.key === 'Enter') {
activeLink.updateAttrs({ href: href });
onClose();
}
};
return (
<div>
</div>useEffect( () => {
if (
calculatePriceRangeQueryState !== currentQueryPrices &&
currentQueryPrices !== undefined
) {
setCalculatePriceRangeQueryState( currentQueryPrices );
}
}, [
currentQueryPrices,
setCalculatePriceRangeQueryState,
calculatePriceRangeQueryState,
] );
// Defer the select query so all collection-data query vars can be gathered.
const [ shouldSelect, setShouldSelect ] = useState( false );
const [ debouncedShouldSelect ] = useDebounce( shouldSelect, 200 );
if ( ! shouldSelect ) {
setShouldSelect( true );
}
const collectionDataQueryVars = useMemo( () => {
return buildCollectionDataQuery( collectionDataQueryState );
}, [ collectionDataQueryState ] );
return useCollection( {
namespace: '/wc/store',
resourceName: 'products/collection-data',
query: {
...queryState,
page: undefined,
per_page: undefined,const { citations = [] } = usePubData();
const isFootnote = selectedNode.type.name === 'footnote';
const existingCitation = !isFootnote && citations[selectedNode.attrs.count - 1];
const {
commitChanges,
revertChanges,
revertKey,
hasPendingChanges,
updateAttrs: rawUpdateAttrs,
pendingAttrs,
} = useCommitAttrs(selectedNode.attrs, updateNode, onPendingChanges);
const { structuredValue, unstructuredValue } = unwrapPendingAttrs(pendingAttrs, isFootnote);
const updateAttrs = wrapUpdateAttrs(rawUpdateAttrs, isFootnote);
const [html, setHtml] = useState(existingCitation && existingCitation.html);
const [debouncedValue] = useDebounce(structuredValue, 250);
const showPreview = html || unstructuredValue;
useEffect(() => {
apiFetch('/api/editor/citation-format', {
method: 'POST',
body: JSON.stringify({
data: [
{
structuredValue: debouncedValue,
},
],
}),
}).then(([result]) => setHtml(result.html));
}, [debouncedValue]);
const handleRevert = () => {onChangeSelectionAll?: (event: CustomEvent) => void;
onSort?: (event: CustomEvent) => void;
}) => {
const uniqueId = useMemo(
() =>
Math.random()
.toString(36)
.slice(2),
[]
);
const elementId = id || uniqueId;
const [pageSize, setPageSize] = useState(propPageSize);
const [rows, setRows] = useState(propRows);
const [searchString, setSearchString] = useState('');
const [debouncedSearchString] = useDebounce(searchString, 500);
const [sortInfo, setSortInfo] = useState(propSortInfo);
const [start, setStart] = useState(propStart);
const filteredRows = useMemo(
() =>
!debouncedSearchString
? rows
: rows.filter(row =>
Object.keys(row).some(key => key !== 'id' && String(row[key] ?? '').indexOf(debouncedSearchString) >= 0)
),
[debouncedSearchString, rows]
);
const { length: count } = filteredRows;
const adjustedStart = start! < count ? start! : Math.max(start! - Math.ceil((start! - count) / pageSize!) * pageSize!, 0);
const { columnId: sortColumnId, direction: sortDirection } = sortInfo;function RoomMemberList({ sortedRoomMemberUserIds }) {
const [debouncedSortedRoomMemberUserIds] = useDebounce(sortedRoomMemberUserIds, 75, { maxWait: 500 });
return (
<ul>
{debouncedSortedRoomMemberUserIds.map(id => (
))}
</ul>
);
}
