← All topics

Svelte Middle interview questions and answers

75 questions for a Svelte (Middle) interview - with correct answers, explanations and links to the docs.

Take this quiz
  1. 1.When should you use $derived.by instead of $derived?
  2. 2.Can you assign to a $derived value (Svelte 5.25+)?
  3. 3.Which state does $effect track as dependencies?
  4. 4.Why is this an anti-pattern?
  5. 5.How do you read state inside $effect without making it a dependency?
  6. 6.What is the difference between $effect and $effect.pre?
  7. 7.When is $state.raw a good choice?
  8. 8.How do you make class fields reactive?
  9. 9.Why doesn't items.set(k, v) update the UI when items is a plain Map in $state?
  10. 10.What does $props() give you besides named props?
  11. 11.Why does color not update when the type prop changes?
  12. 12.What does $inspect.trace() help with?
  13. 13.How do you write reusable reactive logic (like a hook) in Svelte 5?
  14. 14.How do you pass named content areas (formerly named slots) to a component?
  15. 15.What is an advantage of snippets over Svelte 4 slots?
  16. 16.What is an attachment ({@attach})?
  17. 17.Why are attachments more flexible than actions?
  18. 18.What does a function binding do (Svelte 5.9+)?
  19. 19.Which bindings are read-only?
  20. 20.Why are transitions in Svelte local by default?
  21. 21.What is Tween / Spring in svelte/motion used for?
  22. 22.How do you make context reactive?
  23. 23.What does createContext (Svelte 5.40+) give you?
  24. 24.Why is module-level shared state risky in a SvelteKit app?
  25. 25.When do stores still make sense in Svelte 5?
  26. 26.What does derived from svelte/store do?
  27. 27.How do you mount a Svelte 5 component into the page manually?
  28. 28.What does flushSync() from svelte do?
  29. 29.How are Svelte components usually unit-tested?
  30. 30.How do you test an effect created outside a component?
  31. 31.How do you build a Svelte component as a custom element?
  32. 32.When does a universal load in +page.js run?
  33. 33.What must data returned from a server load be?
  34. 34.Why use the fetch passed to load instead of the global one?
  35. 35.How does a page load get data from its layout's load?
  36. 36.How do you validate a form in a SvelteKit action and return errors?
  37. 37.How do you call a named action from a form?
  38. 38.What does use:enhance add to a form?
  39. 39.What is handle in hooks.server.js used for?
  40. 40.How do you redirect from a server load or action?
  41. 41.What do the page options ssr = false and csr = false do?
  42. 42.What does a route group like src/routes/(marketing)/about do?
  43. 43.What does data-sveltekit-preload-data="hover" do?
  44. 44.How do you make a module server-only in SvelteKit?
  45. 45.What are beforeNavigate and afterNavigate used for?
  46. 46.What does export const snapshot in +page.svelte allow?
  47. 47.How do you build a fully static site with SvelteKit?
  48. 48.What does this code show after clicking the button?
  49. 49.Why isn't count reactive in the importing component?
  50. 50.How do you show a loading indicator during SvelteKit navigation?
  51. 51.What is MediaQuery from svelte/reactivity?
  52. 52.How can a component expose methods to its parent?
  53. 53.What does <script module> do?
  54. 54.Which statement about {#each} with destructuring is correct?
  55. 55.What is the purpose of +page.server.js returning a promise for slow data?
  56. 56.What is wrong with this $effect?
  57. 57.What does a +error.svelte page show?
  58. 58.What does $props.id() (Svelte 5.20+) generate?
  59. 59.How do you give a $bindable prop a fallback value?
  60. 60.How do you render fallback content when no children snippet was passed?
  61. 61.How do you listen to visibilitychange on document in a component?
  62. 62.How do you pass parameters to a transition?
  63. 63.How does in:/out: differ from transition:?
  64. 64.Can <select bind:value> hold objects, not just strings?
  65. 65.How do you read a store's current value once, outside a component?
  66. 66.What does the second argument of readable do?
  67. 67.How do you check whether a context exists before reading it?
  68. 68.What happens when export const ssr = false is set in a +layout.js?
  69. 69.How do you set cache headers for a page from load?
  70. 70.How do you read and set cookies on the server in SvelteKit?
  71. 71.What does a param matcher like [id=integer] do?
  72. 72.What is the rest parameter [...path] useful for?
  73. 73.What happens if both +page.js and +page.server.js export load?
  74. 74.How do you test a component that expects snippet props?
  75. 75.What does untrack NOT do?