SolidJS•2y ago

Reactivity inside closure in return value

I have a function with a store, singals etc. This function returns an object, that object contains a function that is to be used as an event in the caller context. const { onSubmit } = someFunction() The definition of onSubmit inside someFunction

  const onSubmit = (callback: (e: SubmitEvent) => void) => (event: SubmitEvent) => {
    event.preventDefault();

    // nodes are a store
    Object.keys(nodes).forEach((key) => nodes[key].validate());

    callback(event);
  };

  const onSubmit = (callback: (e: SubmitEvent) => void) => (event: SubmitEvent) => {
    event.preventDefault();

    // nodes are a store
    Object.keys(nodes).forEach((key) => nodes[key].validate());

    callback(event);
  };

So the way you use it is <form onSubmit={onSubmit(() => { // my callback })} ...> This causes a lint error

This function should be passed to a tracked scope (like createEffect) or an event handler because it contains reactivity, or else changes will be ignored.

on the returning inner function. Likely very simple to fix, if I didn't need the closure for callback I could just store the inner function with createMemo, but I need the closure

3 Replies

tozzOP•2y ago

Actally, now I'm wondering if the linter is wrong here The code seems to work just fine :

REEEEE•2y ago

The linter isn't perfect. The code seems fine

tozzOP•2y ago

@._rb Thanks for checking, I know the linter can give false positives, but I assumed I was in the wrong here, but manual testing shows that it works 🙂

Gaming

Programming

Reactivity inside closure in return value