React-style effect cleanup?

[mindplay-dk]

Could we have a more React-like API for effect cleanups?

So this:

createEffect(() => {
  const callback = (e) => console.log(e);
  ref.addEventListener("click", callback);
  return () => ref.removeEventListener("click", callback);
});

Instead of this:

createEffect(() => {
  const callback = (e) => console.log(e);
  ref.addEventListener("click", callback);
  onCleanup(() => ref.removeEventListener("click", callback));
});

It would just make it a little easier to switch between frameworks.

And having cleanup built-into the createEffect contract makes sense, I think? Rather than having to search for onCleanup and treating that as a separate thing, it would just be more close at hand.

[atk]

This would conflict with a feature in createEffect that allows you to pass a value to subsequent calls:

createEffect((iteration) => {
  console.log(value(), iteration);
  return iteration + 1;
}, 0)

[mindplay-dk]

I see, yeah.

What is that for? A kind of built-in memoization?

[ryansolid]

Yeah it has this nice quality of being controlled by the reactive system. Not only does it remove a closure, but it's concurrent safe. We use this a lot in rendering because it serves a way of looking at the previous value for shallow diffing. It's arguable that end users don't need it but it keeps all our computation signatures the same.

[atk]

If you really need it, you could still implement it yourself:

const createReactLikeEffect = (fn) => {
  createEffect(() => {
    const cleanup = fn();
    if (cleanup) onCleanup(cleanup);
  });
};

[mindplay-dk]

Sure, yeah. No need though. I like to stick to the idioms of the framework. I was just wondering why we didn't have that. 🙂

[viridia]

There's one other advantage, which is that you can do multiple cleanups.

A common pattern for event listeners is for the subscribe() call to return an unsubscribe callback as a return result - which is very convenient with the react style, you just say useEffect(subscribe()). However, that gets much more cumbersome when you are doing multiple subscriptions in a single effect handler, now you have to return a single callback that unsubscribes to each one. But with the Solid style, you can just wrap each subscription in an onCleanup().