The context API in svelte provides a way for components to communicate to each other without passing around data, functions props, or dispatching events!
Let us see a quick example:
1 2 3 4 5 6 7 8 |
|
1 2 3 4 5 6 |
|
That was easy, but say you have sistuation where the context
need to be update later in time, to emulate we could setTimeout(() => {setContext('state', {})},1000)
this would not reflect either in the parent or the child component.
store
comes to our resuse in these cases:
1 2 3 4 5 6 7 8 9 |
|
1 2 3 4 5 |
|
Here is a quick example:
This is explictily mentoined in the API docs too:
Context is not inherently reactive. If you need reactive values in context then you can pass a store into context, which will be reactive.