Svelte Context API Setcontext Getcontext Deep Props

Definisi

Context API (setContext / getContext) memungkinkan komponen parent membagikan data ke semua descendant tanpa prop drilling, mirip React Context. Berbeda dengan store global, context hanya mengalir ke anak dalam satu subtree.

Kapan dipakai

Pakai saat banyak level komponen butuh nilai sama (tema, locale, user) tapi tidak semua lewat props. Jangan pakai untuk state yang harus global lintas subtree berbeda — gunakan store.

Cara kerja

Set di parent

svelte

<script>
  import { setContext } from 'svelte';
  import { writable } from 'svelte/store';
  const theme = writable('dark');
  setContext('theme', theme);
</script>

Get di anak (mana saja)

svelte

<script>
  import { getContext } from 'svelte';
  const theme = getContext('theme');
</script>
 
<p>Tema: {$theme}</p>

Key bisa string atau symbol unik agar tidak bentrok.

Struktur alur

Catatan implementasi

• getContext hanya bisa dipanggil saat komponen init (di <script> top-level), bukan dalam fungsi/event.
• Pakai writable di context bila ingin bisa diubah; child dengan $ auto-subscribe.
• Key sebaiknya symbol/module-level const agar tidak tabrakan antar library.
• Context tidak reaktif secara otomatis kecuali nilainya store.

Kesalahan umum

• getContext di dalam fungsi: error karena harus di init.
• Key string bentrok: dua library pakai key 'data' sama.
• Ngira global: context hanya untuk subtree, bukan seluruh app.
• Lupa store: context dengan nilai biasa tidak update child saat berubah.

Referensi terkait

• Svelte Stores: writable, readable, derived, custom
• React Context & Composition, Prop Drilling
• Svelte Props & Events: export let, createEventDispatcher, bind