React custom hook equivalent in Svelte?

I’m experienced with React and was just trying out a small Svelte to-do list to get my feet wet with Svelte and see if it’s something I’d like to suggest we try out at work.

However, there’s one thing I wanted to clarify that wasn’t immediately obvious from the documentation (and to just kickstart some discussion since this community is a little quiet).

In React, if I have a large file doing a good amount of logic, like in the to-list example where I have add logic, remove logic, and toggle logic, all of which can be complex in their own ways if you improve them enough, I am able to extract the logic out into it’s own file by creating a custom hook. Like so

<pre style="background-color:#ffffff;">
<span style="font-weight:bold;color:#a71d5d;">const </span><span style="font-weight:bold;color:#795da3;">useTodoList </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#323232;">() </span><span style="font-weight:bold;color:#a71d5d;">=> </span><span style="color:#323232;">{
</span><span style="color:#323232;">  </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">[list, setList] </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#323232;">useState([]);
</span><span style="color:#323232;">
</span><span style="color:#323232;">  </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="font-weight:bold;color:#795da3;">addItem </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#323232;">(taskName) </span><span style="font-weight:bold;color:#a71d5d;">=> </span><span style="color:#323232;">{
</span><span style="color:#323232;">    </span><span style="font-style:italic;color:#969896;">// task creation logic
</span><span style="color:#323232;">    setList(l </span><span style="font-weight:bold;color:#a71d5d;">=> </span><span style="color:#323232;">[</span><span style="font-weight:bold;color:#a71d5d;">...</span><span style="color:#323232;">l, newTask]);
</span><span style="color:#323232;">  }
</span><span style="color:#323232;">
</span><span style="color:#323232;">  </span><span style="font-style:italic;color:#969896;">// logic for removeItem and toggleItem
</span><span style="color:#323232;">
</span><span style="color:#323232;">  </span><span style="font-weight:bold;color:#a71d5d;">return </span><span style="color:#323232;">{ list, addItem, removeItem, toggleItem };
</span><span style="color:#323232;">}
</span>

Then, I can bring that into my component file by simply doing const { … } = useTodoList(); and everything should just work. What would the equivalent be in Svelte? It sounds like I would want to leverage the store concept, but that feels odd to me. I go from having pretty simple logic to having to add additional libraries to my logic. It’s a lot of overhead for what should really be a pretty straightforward refactor in React.

Any insight you guys can give would be great! Additionally, I’d love to be able to move the style as well, but so far haven’t found anything that would be suitable for that quite yet. Svelte seems pretty set on having one large file whenever possible.