Comments (4)
Yeah you need to release the root. Often with the top level root it is unnecessary since it goes with the page.
root callback function first argument is a dispose method that you can call to cleanup all computations in that context(it's the same as S.root). You will still need to remove the element as well. I use this pattern in Solid Components per Custom Element, but in the case of the example you want call dispose when you are ready.
So something like:
const { useState, root } = Solid;
const App = () => {
const [state, setState] = useState({counter: 0});
setInterval(() => setState('counter', c => c + 1), 1000);
return <div>{( state.counter )}</div>
}
let dispose;
root(disposer => {
dispose = disposer;
document.body.appendChild(<App />);
});
// Sometime later
dispose();
from solid.
Ah, thanks! I see the disposer
mentioned in the API now, but cleanup in the examples (especially in README and the repo's .md
files) seems a little sparse. It'd be great to make this more obvious from the get go.
In the todomvc example,
- on these lines, can you explain how the
useCleanup()
knows when to clean up? Is there anything else that needs to be cleaned up in that example?- For example supposing that the whole TodoMVC app was used as a sub-component embedded in a web app that switches "applications" based on URL routing and it needs to clean up the TodoMVC "app" when unloading it.
- I know we could use iframes, but suppose we use a single browsing context and each "app" is a component that needs to get mounted and unmounted.
In the web-components-todo example, on these lines, when would handleSubmit
be removed?
So to clean up the setInterval
in the above example, is the following the best way?
const { useState, useCleanup, root } = Solid;
const App = () => {
const [state, setState] = useState({counter: 0});
const interval = setInterval(() => setState('counter', c => c + 1), 1000);
useCleanup(() => clearInterval(interval))
return <div>{( state.counter )}</div>
}
let dispose;
root(disposer => {
dispose = disposer;
document.body.appendChild(<App />);
});
// Sometime later
dispose();
from solid.
Yeah I need to consider where to better describe the execution cycle. All of Solid's code involves just nesting computations like useEffect. Even root is just a computation that doesn't track dependencies. Each computation creates a context that, as well as track dependencies, registers every non-root child computation. Every time a computation is re-executed or is released itself, its child computations and dependent subscriptions are released. This is how everything stays dynamic.
useCleanup registers another method to call when the parent context (computation) is going through its cleanup. So in the case of root when dispose is called. In the case of any other effect when it is released or re-evaluated.
So yes you are correct in your example. I didn't even realize I hadn't added that. I guess because I never release in the codepen example. TodoMVC having it is likely a result of me developing it originally wrapped in a Web Component that I conditionally rendered on the page. I'm glad it's there. I probably should update the codepen example even though it isn't setup to ever release.
from solid.
You should check out the new Codepen example I just added for Async Effect. It really showcases the power of useCleanup.
In that example I'm using useCleanup to cancel state updates from stale promises that I have previously invoked while reactively responding to input changes to trigger async data fetching.
from solid.
Related Issues (20)
- Typo found in signal.ts? HOT 3
- Circular references in Stores trigger loss of proxying if non-trackable objects are referenced HOT 5
- Changing the "data-type" of a `createStore` attribute causes referenced data to be modified HOT 1
- `value` parameter of `createEffect` is not passed to `on` as `prevValue` when `defer` is `true`. HOT 1
- using createStore setter function to update array results in argument is not iterable error HOT 3
- Solidjs is not working with bun.
- Laggy Performance HOT 4
- Unable to pass signal to child components HOT 1
- ReferenceError: XXX is not defined when using createResource HOT 3
- 2-way binding for computationally expensive effects
- `createResource` seems to fail to trigger fetcher when source signal changes HOT 1
- Why can't my code use context? HOT 9
- Setting properties to the unwrapped value of a store doesn't always propagate into the store HOT 14
- If a function wrapped in `action` throws some error it should be possible to `catch` it. HOT 1
- Isomorphic export with `solid-js/web` HOT 3
- Feature request: package entry point for reactive core HOT 1
- Trying to access fields of data from `createResource` throws error HOT 2
- Why the element between Shows is removed? HOT 4
- useTransition pending states should be isolated in different Suspense boundaries HOT 2
- 'reconcile' mutates array items HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from solid.