Is there a way to trigger Solid's createEffect using an external dependency, as with React's useEffect dependency array?

I want to call setShowMenu on location.pathname change.

const location = useLocation()

createEffect(() => {
    console.log(location.pathname) // << external dependency
    setShowMenu(false)
})

Until there's a better option, I'm using this as a workaround.

const location = useLocation()

createEffect(() => location.pathname && setShowMenu(false))

Is there a way to trigger Solid's createEffect using an external dependency, as with React's useEffect dependency array?

I want to call setShowMenu on location.pathname change.

const location = useLocation()

createEffect(() => {
    console.log(location.pathname) // << external dependency
    setShowMenu(false)
})

Until there's a better option, I'm using this as a workaround.

const location = useLocation()

createEffect(() => location.pathname && setShowMenu(false))

• javascript
• reactjs
• typescript
• solid-js

3 Answers 3

Perhaps you are looking for the on helper?

createEffect(
  on(
    () => location.pathname,
    () => setShowMenu(false)
  )
);

https://www.solidjs./docs/latest/api#on

The term "external dependency" is not an accurate term to describe what you are trying to do and unfortunately it is quite misleading. If you check the docs, external generally means other reactive libraries or stores like RxJS and Solid provides from function for interoperability:

#from

A helper to make it easier to interop with external producers like RxJS observables or with Svelte Stores.

Now, to answer your question, unlike React ponents, Solid ponents can access to their outer scope. So, signals do not need to be local to a ponent or a scope in order to trigger re-run of their effects.

Components in Solid are there to organize your code, and they disappear after initial run. You can import any signal from any module and subscribe to its changes using createComputed or createEffect etc. So following the JavaScript's scoping rules is enough to cover your case.

I think you need to create a Signal. Check: https://www.solidjs./tutorial/introduction_effects#:~:text=An%20effect%20can%20be%20created,when%20any%20of%20them%20change.&text=Now%20clicking%20the%20button%20writes%20to%20the%20console.

"every expression in JSX is its own effect that re-executes whenever its dependent signals change"

I would try something like:

import { render } from 'solid-js/web';
import { createSignal, createEffect } from 'solid-js';

function ShowMenuHandler() {
  const [showMenu, setShowMenu] = createSignal(false);
  createEffect(() => {
    console.log("The menu is shown", showMenu());
  });

  return <button onClick={() => setShowMenu(showMenu())}>Click Me</button>;
}

render(() => <ShowMenuHandler />, document.getElementById('app'));