Search code examples
solid-js

Does Solid JS have an equivalent of React.useCallback?


Solid has createMemo which I thought might work, but it says "The memo function should not change other signals by calling setters (it should be "pure").", which is not suitable for my use case.


Solution

  • Solid doesn't have useCallback because components only mount once and don't rerender, React has useCallback so that developers have another way to prevent rerendering.

    createMemo's purpose is to cache the derived signal, such as retrieving a signal that runs an expensive fibonacci value.

    const [count, setCount] = createSignal(0);
    
    const fib = createMemo(() => fibonacci(count()));
    

    As you noted, createMemo should not call other signal setters, this is so that Solid can optimize such as all memos can update at most once in response to a dependency change.

    const [count, setCount] = createSignal(0);
    const [lastName, setLastName] = createSignal('');
    
    const fib = createMemo(() => {
      setLastName(value) // DONT DO THIS, memo function should not call other signal setters, should be pure
      return fibonacci(count());
    });
    

    If your use case calls for retrieving values and calling setters, that's what createEffect is used for.