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)
- strange hydration mismatch HOT 3
- Typescript - Components created via JSX "forget"/erase their type HOT 3
- Custom elements using `is` not recognized as custom elements HOT 3
- onCleanup is called on the server and it breaks the astro app HOT 1
- computations created outside a `createRoot` or `render` will never be disposed HOT 3
- [Astro] `createResource` results get mixed up when rendering server only components with Suspense HOT 4
- Hydration Mismatch error HOT 6
- [Bug] Repeated call syntax in JSX breaks reactivity HOT 1
- [Astro] resource and signal rendering is mixed up on the client HOT 2
- Refs don't work correctly when using dynamic
- Refs don't work when optional on a component HOT 4
- Cannot use istanbul ignore comments for generated code HOT 2
- setting element reference in `setStore` modifies the values in the array HOT 13
- `this` inside jsx-template inside a constructor of a derived class causes transformation-bug HOT 2
- The update of props is not granular enough. HOT 4
- No value attribute on CSR, but present in SSR
- Cannot properly bind numbers to Select HOT 1
- Double mounting for children element. HOT 2
- Is [email protected] active now? HOT 2
- Enhancement - Prop destructuring HOT 4
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.