How to pass $derived or $state variable into a function parameter...

[gio-hernandez-saito]

Hello, I'm new to Svelte 5 (also, almost newbie with Svelte 4), and I have a question.
I have tried to refactor a Vue code into Svelte 5, and now I got some problems. The codes are below.

let params = $derived({  id: idInput, password: pwInput })
const { loadData: loadLoginData } = useAPIState({ key: 'login', data: params })

export const useAPIState = (apiParams: callAPIParams) => {
	
  const response: ApiResponse = $state({ data: null, loading: false, error: null })
  let { data, loading, error } = response
  const loadData = async () => {
    // ...
    try {
      .. ///
      const res = await callAPI(apiParams)
      .. ///
	} catch (e) {
       ..///
	}
  }
   return { data, loading, error, loadData }
}

I want to make apiParams in useAPIState "ALWAYS CURRENT" (reactive)... But I don't know how to do. Also, ESLint: State referenced in its own scope will never update. Did you mean to reference it inside a closure?(state_referenced_locally)(svelte/ valid-compile) appeared.

[7nik]

There are a few ways to keep reactivity while passing a value somewhere:

1. Pass an object with all the data, but you should never replace or create it because the reactivity is bound to that object instance;
2. Pass a getter () => someValue and then call it to get a fresh reactive value;
3. Object with getters and optionally setters:

useAPIState({
  key: 'login',
  get data() { return params; },
});

and reading apiParams.data will always return a fresh data.