Compose: Fix useDebounce losing calls when the debounced function changes - #84192

What?

Fixes #35505.

useDebounce no longer cancels scheduled calls when the function passed to it changes. The latest version of the function is called instead.

Why?

useDebounce recreated the debounced function, and cancelled the pending call, whenever fn changed. A common pattern (a useCallback whose dependencies change after the debounced function is called) meant the call was silently dropped and never ran. Components passing inline functions (e.g. PaletteEditListView) can have a pending call cancelled whenever they re-render within the wait time.

Some callers already work around this by wrapping fn in useEvent (useMarkPersistent, media-fields). This moves that fix into the hook so every caller benefits.

How?

fn is wrapped with useEvent, so the debounced function stays stable across renders but always invokes the latest fn. Scheduled calls are still cancelled when wait/options change or on unmount. The docblock/README no longer asks callers to wrap fn in useCallback.

Unit tests are added for useDebounce (it previously had none).

Testing Instructions

1. Open the post editor.
2. Open the browser console and paste the snippet below.
3. On trunk: three New state from interval logs appear, then nothing. The debounced callback never runs.
4. On this branch: New state from debounce is logged ~3 seconds after the last interval tick.
5. Run npm run test:unit:vitest -- packages/compose/src/hooks/use-debounce.

Hard-reload (Cmd/Ctrl+Shift+R) between runs, since registerPlugin can't register the same name twice.

var { useCallback, useEffect, useState, useRef } = wp.element;
var { useDebounce } = wp.compose;
var { registerPlugin } = wp.plugins;

function DebounceTest() {
    const [ state, setState ] = useState( 0 );
    const ticks = useRef( 0 );

    const updateStateCallback = useCallback( () => {
            console.log( 'New state from debounce:', state + 1 );
            setState( state + 1 );
    }, [ state ] );

    const updateStateDebounce = useDebounce( updateStateCallback, 3000 );

    useEffect( () => {
            const interval = setInterval( () => {
                    if ( ++ticks.current > 3 ) {
                            return;
                    }
                    const newState = Math.random();
                    console.log( 'New state from interval:', newState );
                    updateStateDebounce();
                    setState( newState );
            }, 1000 );
            return () => clearInterval( interval );
    }, [ updateStateDebounce ] );

    return null;
}

registerPlugin( 'debounce-test-plugin', { render: DebounceTest } );

Note: the original snippet in the issue calls the debounced function every 1s with a 3s wait, so it never fires with any debounce implementation (lodash included) while the interval keeps running. The snippet above stops the interval after 3 ticks so the debounce has time to fire.

Screenshots or screencast

Before	After

Use of AI Tools

I used Claude Code to look into the cause and draft the change and this description. I reviewed and tested the change myself.