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()

const { onSubmit } = someFunction()

The definition of onSubmit inside

someFunction

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

<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.

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

callback

I could just store the inner function with

createMemo

createMemo

, but I need the closure

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()

const { onSubmit } = someFunction()

The definition of onSubmit inside

someFunction

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

<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.

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

callback

I could just store the inner function with

createMemo

createMemo

, but I need the closure

Reactivity inside closure in return value

Similar Threads

Reactivity inside closure in return value

Similar Threads