S
SolidJS

support

solid-eslint warning about event handlers

BBersaelor7/26/2023
So, I get the eslintsolid/reactivity warning when I use reactive props in event handlers:
This function should be passed to a tracked scope (like createEffect) or an event handler because it contains reactivity, or else changes will be ignored.
createEffect(() => {
const wS = waveSurfer();

if (wS) {
wS.on('play', () => {
if (props.currentArticle)
trackStartPlayback(props.currentArticle);
}
createEffect(() => {
const wS = waveSurfer();

if (wS) {
wS.on('play', () => {
if (props.currentArticle)
trackStartPlayback(props.currentArticle);
}
How else would you all handle this?
TTommypop7/26/2023
If you're ok with props.currentArticle not tracking, then that approach is fine The linter reports a lot of false positives just in case it wasn't intentional
BBersaelor7/26/2023
yeah, I mean, the player reports when something happens, I just need to make sure the event is then fired with the current item. You mean by props.currentArticle not tracking that it would not be the current article but the article from the time the event-handler was created?
TTommypop7/26/2023
The effect won't re-execute when props.currentArticle changes The state should always be up to date when the handler runs
BBersaelor7/26/2023
yeah thats fine, it's not supposed to
TTommypop7/26/2023
Yeah, I think the linter just reports these cases in case it's unintentional, so could cause people hours of seemingly unsolvable issues
BBersaelor7/26/2023
i think, I even should make that explicit, that the createEffect should only fire when waveSurfer() changes. Is there a way of giving it my intended dependency list?
TTommypop7/26/2023
Yeah, there's the on function So you can just do createEffect(on(waveSurfer, (wS) => {})) Where wS in the closure will just be the data within the waveSurfer signal
BBersaelor7/26/2023
nice alright
TTommypop7/26/2023
Here's the docs link if you want: https://docs.solidjs.com/references/api-reference/reactive-utilities/on You can also defer the effect if you don't want it to immediately execute
BBersaelor7/26/2023
I really like the new docs
TTommypop7/26/2023
Awesome lol :) They're being updated again relatively soon afaik
BBersaelor7/26/2023
ah sorry, I forgot to import on and for some reason my IDE wasn't complaining about that but instead gave me more reactivity warnings

Looking for more? Join the community!

Want results from more Discord servers?
Add your server
Recommended Posts
Scroll & Drag Solid DNDHi, do you know the best way to manage scroll (auto) when using solid dnd? Especially as I have theHow can this incredibly simple piece of code lead to "Maximum call stack size exceeded" ?The entire code for this demo is here: https://playground.solidjs.com/anonymous/7ec72a47-1bb4-4e9f-bHow to protect all routes other than sign-inHi there, I am making an app where I only want signed-in users to see the content, I want all routesTypeError: Cannot read properties of undefined (reading 'remove') at reconcileArraysI get this during a `refetch()` call of a resource. Pretty hard to debug and see what actually getsValidating a field based on promise values min and max with yup and react form handlerconst schemaReference = (res) => { console.log(res); return yup.object({ unit: yup.strReaching into nested properties and keeping them reactive?Coming from React I really like that I can destruct nested props into single variables, in this examTesting difficulties in solid-startI'm running into some perplexing errors with Vitest in my SSR-enabled Solid Start app. In the importReactSVG like component in SolidHey, I recently was remaking my portfolio website in astro with some solid.js. I wanted to make an iSuspense not updating when navigating to Route directlyHey folks, I am currently having a weird issue I can't quite solve: We have a route which receivesHow do you do logging errors etc. In solid start?Like how do you get logs you can browse for instance in a web interface when solid start app is runnwarnings when passing onClick as propI get a warning in the child component when I pass an event handler from the parent. In the parenRoutes are being duplicated when HMR is onIt seems whenever the file updates the route is not actually refreshed and it just adds the updated Solidstart Astro or ViteCreated a SolidStart project and saw that it was using Astro. Looking at the docs it says the projecsibling componentsI've read the docs, and I just can't wrap my head around how to trigger a function in a sibling comptesting createRouteAction$ using vitestHi all! How do I go about testing createServerAction$ in vitest? I'm basically writing ``` export fucreateResource returns undefinedHello, goodnight everyone. Im having a problem using createResource. This function returns me undefiSuspense doesn't seem to work with ContextProviderhey, so recently I noticed, If I use `createResource(fetch)` and then put `<Suspense fallback={<PlLayout for layout groupTo make a layout for a route you need to make a .tsx file with the same name as the parent folder. BHow to deploy an solid js app myselfHi all, good morning. Does anyone have a resource (blog post, tutorial, vídeo, etc) teaching how to SVG A elements not created correctlyWhen using an <a> element with <Show> or <For> inside an inline SVG element, we get the namespace wr