SolidJSS
SolidJS•2y ago•
6 replies
seb

Understanding Solid Reactivity Lint Error

In the following component I get this lint warning:
The reactive variable 'handleContextMenuCommand' should be used within JSX, a tracked scope (like createEffect), or inside an event handler function, or else changes will be ignored  solid/reactivity


But I am using it inside of an event handler function. Is this a misunderstanding on my part of how reactivity works or does the linter just not recognize that the chrome.runtime.onMessage global used by Chrome extensions can register event listeners? Here's a stripped down example of my code:

export const ExampleComponent: Component = () => {
  const [isLoading, setIsLoading] = createSignal(false);

  const handleContextMenuCommand = async (message: string) => {
    setIsLoading(true);
    await fetch('/example', { body: { message }});
    setIsLoading(false);
  }

  // this line results in a lint error:
  chrome.runtime.onMessage.addListener(handleContextMenuCommand);

  onCleanup(() => {
    chrome.runtime.onMessage.removeListener(handleContextMenuCommand);
  });

  return <div>Example</div>
};


If this code is incorrect, what's the right way to handle it?
Was this page helpful?