If I were to sum up why in one sentence, it's because I don't miss useEffect. I understand why it exists, I understand the approach React takes, and there are benefits of its approach. But writing complex React components feels more like admin; a constant worry that I'll miss a dependency in my useEffect call and end up crashing my browser session. With Svelte I don't have that lingering feeling, and that's what I've come to enjoy.

Indeed, it looks like svelte-hooks did add support for clean-up functions to their useEffect in devongovett/svelte-hooks@1d39d95! ... which is great, though @DylanVann's much simpler and zero-dependency version is even better in some ways.

Our custom useEffect is not idiomatic Svelte.

With this we have replicated the most important behaviors of useEffect.

Hooks embrace JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution.

Note how we have to duplicate the code between these two lifecycle methods in class. This is because in many cases we want to perform the same side effect regardless of whether the component just mounted, or if it has been updated. Conceptually, we want it to happen after every render — but React class components don’t have a method like this. We could extract a separate method but we would still have to call it in two places.

Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects.

The $: can also be used to trigger effects.

We can run effects when some data changes using watchEffect - it takes a function that runs whenever a reactive value used inside changes.

It's possible to run a function whenever some reactive state changes using the useEffect hook. In the example we log the length of the todoList whenever it changes. The first argument to useEffect is the function we want to run, and the second is a list of reactive values to track - whenever one of these values changes the effect will run again.

$: for watching de­pen­den­cies in ex­pres­sions, a much more concise useEffect, if React is familiar.

for example, reactive declarations essentially do the work of React's useMemo, useCallback and useEffect without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change).

This is the same as useEffect in React, incidentally — the function must be synchronous in order to avoid race conditions.

Rather than thinking of useEffect as one function doing the job of 3 separate lifecycles, it might be more helpful to think of it simply as a way to run side effects after render – including the potential cleanup you’d want to do before each one, and before unmounting.

With useEffect, you can handle lifecycle events directly inside function components. Namely, three of them: componentDidMount, componentDidUpdate, and componentWillUnmount. All with one function!

Promises and useEffect(async () => ...) are not supported, but you can call an async function inside an effect.. That's why using async directly in the useEffect function isn't allowed.

The question is not “when does this effect run” the question is “with which state does this effect synchronize with”

useEffect(() => { if(payload) { setData([...data, ...payload]) } }, [payload])

However, using the local storage in React's function components is a side-effect which is best implemented with the Effect Hook which runs every time the value property changes: