Save your useCallbacks for functions that don't map exactly to an existing callback!

for example, reactive declarations essentially do the work of React's useMemo, useCallback and useEffect without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change).

You know those useMemo and useCallback hooks? Well, Svelte has something like this. If you declare a variable like this: $: double = counter * 2;, Svelte will recalculate it only if counter changes.

Performance optimizations are not free. They ALWAYS come with a cost but do NOT always come with a benefit to offset that cost.

Even so, the inline function is still created on every render, useCallback() just skips it.

Even if for some reason MyParent component re-renders, handleClick stays the same and doesn’t break the memoization of MyBigList.

wrapping every callback function inside useCallback(): import React, { useCallback } from 'react'; function MyComponent() { const handleClick = useCallback(() => { // handle the click event }, []); return <MyChild onClick={handleClick} />; } “Every callback function should be memoized to prevent useless re-rendering of child components which use the callback function” is the reasoning of his teammates. This statement is far from the truth. Moreover, such usage of useCallback() makes the component slower, harming the performance.

useMemo is similar to useCallback except it allows you to apply memoization to any value type (not just functions). It does this by accepting a function which returns the value and then that function is only called when the value needs to be retrieved

React is hanging on to a reference to previous functions because memoization typically means that we keep copies of old values to return in the event we get the same dependencies as given previously