Master The Svelte Context API

Sharing state without props and events using the Svelte Context API.

🔖 Timestamps

0:00 Intro
0:21 Sponsor
0:37 The Prop Drilling Problem
1:33 Creating The Context API Yourself
5:05 Passing Reactive State Through Context
7:22 Using Unique Keys For Context
9:14 The Svelte Context API
9:52 How The Context API Works
10:19 Global State Versus Context
11:27 How The Context API Works Under The Hood
13:28 Encapsulating And Typing Context
15:10 Practical Example Of Using The Context API
17:57 Outro

#joyofcode #sveltekit #svelte

[attarannaufal]

This saves me a lot of time reading and understanding hours of documentation. Very helpful for me who is just learning Svelte from React. which is not easy to change my existing understanding of React

[ahmedhossamdev]

That's very cool! Can you create a big project, please, to apply these concepts in a big project with the new Svelte 5 syntax?

[cole]

The Context API can be great, especially when making a complex library, or a set of tightly-knit nested components. It's such a relief to be able to pick and choose which data/contexts you need in nested components, without needing to refactor all parent components constantly.

However, I see a lot of people reach for the Context API to avoid passing props through wrapper/UI classes. For example: having forms inside modal/dialog components. Don't forget about slotted components! They will keep your code clean, modular, and readable (all without the needs for props!)

[desLunes]

Not related to this video, but you're the most knowledgable person i know regarding Svelte.

I'm using Svelte's parse function (from 'svelte/compiler') to get the code as an AST. I perform some manipulation to the code (for example, adding attributes to the DOM). But I didn't find anything to print the AST back to code. There's an unofficial project for that, which is called svelte-ast-print, but it's not reliable enough to use it on the whole codebase.

I'm wondering if there's something Svelte itself provides to do that, I mean, Svelte's compiler uses that function so it needs to print it back at some point... I hope this message gets read, have a nice day and ty for reading.

[josephchua]

Are you planning on making a course about sveltekit and svelte anytime soon? Love the vids.

[Shoutlikeatwebpunktd]

I've been programming for over ten years and just learned that you can omit the parentheses when calling a constructor in js ... it looks so wrong 🙈😂

[justintie]

Does Svelte need an async state lib such as Thunk or Saga?

[mohabedr]

this is not a reusable component anymore, your component is coupled to the state now

[good-dev-student]

Thank you so much my hero, why you don't join to Svelte Dev teams maybe we see news in motion svelte main framework ?

[joeseabreeze]

I’ve noticed that you never use semicolons in your code, even with TS. Do you setup rules somewhere to help mitigate potential errors? And how do you prevent ai code-complete from inserting semicolons? I personally do not like semicolons. It’s by far the most overused and useless character in a programming language 😅

[dobryden]

you should've called it under the context api hood... didn't master anything. I just needed examples of usage with getters and setters.