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.

github pubpub / pubpub / client / components / FormattingBarNew / controls / ControlsEquation.js View on Github external
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 });
		});
github woocommerce / woocommerce-gutenberg-products-block / assets / js / base / hooks / use-collection-data.js View on Github external
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,
github Automattic / wp-calypso / client / landing / gutenboarding / components / domain-picker / list.tsx View on Github external
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-console
github pubpub / pubpub / client / components / FormattingBarNew / controls / ControlsLink.js View on Github external
const 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>
github php4dev / heroku-wordpress / wp-content / plugins / woocommerce / packages / woocommerce-blocks / assets / js / base / hooks / use-collection-data.js View on Github external
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,
github pubpub / pubpub / client / components / FormattingBarNew / controls / ControlsFootnoteCitation.js View on Github external
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 = () => {
github carbon-design-system / carbon-custom-elements / src / components / data-table / data-table-story-react.tsx View on Github external
onChangeSelectionAll?: (event: CustomEvent) =&gt; void;
  onSort?: (event: CustomEvent) =&gt; void;
}) =&gt; {
  const uniqueId = useMemo(
    () =&gt;
      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(
    () =&gt;
      !debouncedSearchString
        ? rows
        : rows.filter(row =&gt;
            Object.keys(row).some(key =&gt; key !== 'id' &amp;&amp; String(row[key] ?? '').indexOf(debouncedSearchString) &gt;= 0)
          ),
    [debouncedSearchString, rows]
  );
  const { length: count } = filteredRows;
  const adjustedStart = start! &lt; count ? start! : Math.max(start! - Math.ceil((start! - count) / pageSize!) * pageSize!, 0);

  const { columnId: sortColumnId, direction: sortDirection } = sortInfo;
github bunkerchat / bunker / src / features / roomMember / RoomMemberList.jsx View on Github external
function RoomMemberList({ sortedRoomMemberUserIds }) {
	const [debouncedSortedRoomMemberUserIds] = useDebounce(sortedRoomMemberUserIds, 75, { maxWait: 500 });

	return (
		
			<ul>
				{debouncedSortedRoomMemberUserIds.map(id =&gt; (
					
				))}
			</ul>
		
	);
}

use-debounce

Debounce hook for react

MIT
Latest version published 2 months ago

Package Health Score

85 / 100
Full package analysis