如何在 svelte 中使用 useCallback 钩子

Question

This is my code block looks line when used with a useCallback hook in react but I want to use same function in svelte,but want to add this in useCallback hook. Is there any alternative for svelte.

const newCancelToken = useCallback(() => {
        axiosSource.current = axios.CancelToken.source();
        return axiosSource.current.token;
    }, []);

Answer 1

In Svelte things only update when dependencies are changed by default. You probably should use a reactive statement ( $: ... ) if necessary; they can also call functions.

$: newCancelToken = updateToken(); // Add dependencies as arguments

function updateToken() {
    axiosSource.current = axios.CancelToken.source();
    return axiosSource.current.token;
}

If your function does not have any dependencies, you can just use the function as is. In Svelte you also can use inline functions in the template without them being re-declared over and over again because the code is analyzed, compiled and optimized.

Answer 2

Keep that in mind: The way svelte processes its components is very different from react .

React re-renders all components any time any state within a component, or anywhere in a parent, changes. To avoid the re-computation you will need the use of useMemo or useCallback in your case.

Svelte is a compiler and analyzes your template to create targeted DOM update code whenever any concerned state changes. With that in mind, you don't need to memoize such functions with svelte.