solidjs-community / eslint-plugin-solid

Solid-specific linting rules for ESLint.
MIT License
209 stars 24 forks source link

Unexpected warning about reactive variable used outside of tracked scope #77

Closed alanhigg closed 1 year ago

alanhigg commented 1 year ago

I've encountered an issue where the solid/reactivity is warning about a reactive variable being used outside of a tracked scope and I can't seem to identify the reason for the warning. After some exploration It seems like perhaps it is a false-positive.

The point of failure is inside a Context that I've built for my application but the same behaviour is exposed when using the reference implementation for using Context Providers from the official SolidJS tutorial, here: https://www.solidjs.com/tutorial/stores_context?solved

The context module from the tutorial:

import { createSignal, createContext, useContext } from "solid-js";

const CounterContext = createContext();

export function CounterProvider(props) {
  const [count, setCount] = createSignal(props.count || 0),
    counter = [
      count,
      {
        increment() {
          setCount(c => c + 1);
        },
        decrement() {
          setCount(c => c - 1);
        }
      }
    ];

  return (
    <CounterContext.Provider value={counter}>
      {props.children}
    </CounterContext.Provider>
  );
}

The linter warning is the following:

The reactive variable 'props.count' should be used within JSX, a tracked scope (like createEffect), or inside an event handler function.

The reference example uses the context in the main application like this:

import { render } from "solid-js/web";
import Nested from "./nested";
import { CounterProvider } from "./counter";

function App() {
  return <>
    <h1>Welcome to Counter App</h1>
    <Nested />
  </>
};

render(() => (
  <CounterProvider count={1}>
    <App />
  </CounterProvider>
), document.getElementById("app"));

Any insight you may have about this problem would be appreciated. Thanks!

joshwilsonvu commented 1 year ago

Hello--this warning is intentional, but you can ignore it if you understand that any changes to the prop will not affect the signal. Or, you can rename the prop to initialCount or defaultCount which will silence the warning. See my answer here.