Using The Svelte Context API With Stores

[@JoyofCodeDev]

🔴 Patreon: www.patreon.com/joyofcode 💬 Discord: joyofcode.xyz/invite

[@mykalesalad]

You have no idea how helpful this was, thank you for the consistent great videos.

[@zhanezar]

thanks for all these tutorials on stores and context , its one of the parts of Svelte i struggled to understand but its so important

[@JoyofCodeDev]

It's very powerful. 🔥

[@nathanellis7819]

Very happy to have found your channel. You are great! Please keep the svelteKit stuff coming. Thank you

[@JoyofCodeDev]

Thank you! 😄

[@amorfati8277]

Great Video 🔥. Thanks for your work for svelte. You are great source of information for Svelte. I like your teaching style as you use visual to explain the concepts better.

[@JoyofCodeDev]

Thank you! 😄

[@justingolden21]

Very helpful video! Explains a lot in a simple manner and with great examples

[@nickstaresinic9933]

Thanks, Matija, for the clear and concise explanation that solved a problem that arose today as I was refactoring some code. (FYI, I was directed here from a reddit Q: "How do I pass data from child to parent in Svelte 5?")

[@irradiance730]

Magnificent, thank you!

[@tombil-certon]

The thumbnail reminds me of the movie "The Emperor's New Groove" Love it

[@JoyofCodeDev]

I see it now. 😄

[@fallen_turbo]

This is a very helpful video thank you so much

[@JoyofCodeDev]

You're welcome! 😄

[@Steakss]

Thanks @Joy of Code, appreciate you.

[@JoyofCodeDev]

Thank you! 😌

[@vlntsolo]

Nice examples, thanks!

[@alkmst-xyz]

Great video and very practical example, love it! Perhaps a minor correction or doubt, I think it may not be necessary to give a parameter at the call site of getCount like getCount('count'), although I haven't tested it myself. Regardless, I am excited to use the Context API!

[@JoyofCodeDev]

Yeah, I goofed up.

[@twd2]

I really like your tutorials !!!

[@dc22199x]

Curious about your getCount() you passed an arg 'count' 😅 This is my first time to appreciate context api, there are plenty of things that it doesn't cover in the svelte docs, crazy stuff as always 💪🙏

[@JoyofCodeDev]

It's a mistake! 😄

[@workflowinmind]

8:40 why are you passing the sttring "count" to the get method?

[@codermeo8129]

I love it ❤❤❤

[@InMemoryOfNeo]

you're awesome bro. please make more videos with typescript and sveltekit. Thx...

[@thekokoserver]

You are the best 🎉

[@JoyofCodeDev]

Thank you! 😊

[@efimgibsun7969]

Thank you ☺️ Why do you need to use setContex together with stores if you can use just stores?

[@JoyofCodeDev]

The store value is shared across every component instance but context isn't when you want to have reusable components.

[@anupam.sam9]

The upside of this is, the store here is created only when the GrandParent component is used and Not globally, it's scoped to GrandParent components hierarchy below it. Thus Saving memory and also restricting to share this store's data globally to all components where it's not needed.

[@cangurcan99]

Thank you for your great videos. This context + store is same as create store approach, is it right?

[@thedelanyo]

Succinctly explained and understood well. I'll almost be using a store whenever I use a context. Let's just say, contextual store 😅

great video like always, thanks for the great content like always!!

[@JoyofCodeDev]

Thank you! 😄

[@omomer3506]

Love it great stuff, If i may point out a human error, you exported getCount() woth no parameters but when calling it you wrote let count =getCount("count"), awesome job otherwise

[@luczztem]

impressive stuff

[@bruhhhhh718]

this is perfect

[@kvetoslavnovak423]

Great tutorial as always, Thank you ❤ Does the store and context usage have any bad consequences for SSR?

[@JoyofCodeDev]

Not that I know of.

[@hsdevelop5873]

great video

[@Killtec]

sveltekit supabase auth helpers with version 0.10 Add full server side support to auth helpers through PKCE, can you please make a video to showcase how we can use it to only call supabase via backend without showing our supabase client to the frontend. :)

[@EvertvanBrussel]

Hey, I just saw this video and I really appreciate it. And now that Svelte 5 is being worked on and Rich has argued that a lot of places where in the past you would've used a store, you would not just use runes. And to be honest, I'm a little skeptical about whether runes can really replace stores for every use-case. But anyway, I was wondering if you'd be willing to make a new video that goes through this same subject again but discusses whether (and if yes, how) one should replace the store here with something rune-based in Svelte 5.

[@JoyofCodeDev]

I wanted to look at some stores examples.

[@Huntabyte]

First 🔥🔥

[@amorfati8277]

Two Svelte ambassadors, I like it ❤

[@JoyofCodeDev]

You're fast! 😄

[@AakashGoplani]

How can we extend this in SvelteKit? I have read `$page`, `$app` uses context API but I was not able to find a proper way to implement any such thing in SvelteKit!

[@JoyofCodeDev]

SvelteKit uses the same technique for its stores using the context API and stores.

[@connorcallahan2231]

How does " import { Grandparent, Parent, Child } from "$lib/components"; work? When I do it, it can't find the file, do you export them somehow into one object?

[@JoyofCodeDev]

I export the components from `components/index.ts`.

[@svelterust]

@@JoyofCodeDev You can also create a path alias so that you can write $components instead, but you probably know this 😄

[@v01d69]

i am very new to sveltekit and i have been watching your videos recently its very helpful! can u do a video on view transition api in svelte i am very confused about it

[@JoyofCodeDev]

I already have a working example but I'm waiting for SvelteKit to merge a feature. 🤫

[@nguyentruongnhan154]

why getCount's definition don't have any args, but you pass 'count' when you call it ?

[@lying6624]

is it safe to use let variables? it feels unnatural after React. I haven't found information anywhere else on this

[@JoyofCodeDev]

For what exactly?

[@lying6624]

@@JoyofCodeDev you are initialazing variables using let. Is it safe? Because it is always better to use const, or svelte compiler change it to const?

[@JoyofCodeDev]

@@lying6624 You have to use `let` because Svelte uses assignments to update values using regular JavaScript.

[@lying6624]

@@JoyofCodeDev but is it safe to use let variables?

[@JoyofCodeDev]

@@lying6624 That's how you do it in Svelte.

[@bruhhhhh718]

by the way i think there is a mistake here... your function call has const count = getCount('count') but in the getCount function doesn't take any arguments.

[@JoyofCodeDev]

Yup! 😄

[@nonefvnfvnjnjnjevjenjvonej3384]

svelte started off very minimalist and less boiler code. they are slowly moving towards complexity now. soon we will have usehooks here too.

[@JoyofCodeDev]

If you have a simple component you should pass a prop or dispatch a custom event. The context API existed since Svelte was made and it solves a specific problem.