SolidJSS
SolidJS•3y ago•
4 replies
tozz

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);
  };

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
Was this page helpful?