SolidJS•12mo ago

Not sure whether I'm using reactivity right... (Codereview)

Ok so I recently ported my personal project to Solid coming from React, and while I did it I kind of translated anything React into it's Solid alternative, in this case something didn't quite work out. now, I actually got it to work but I'm not sure I'm doing it the right way and I definitely don't know what I'm doing, which is why I'm here. Here's the code, with an explanation below:

const PAGES = {
  "/": "Home",
  "/Library": "Library",
  "/Settings": "Settings",
  "/Downloads": "Downloads"
} as const

type Indexer = keyof typeof PAGES;

export default function Header(props: ParentProps) {
  const location = useLocation();
  const pathname = createMemo(() => location.pathname);
  const [header, setHeader] = createSignal("Home");

  createEffect(() => {
    setHeader(PAGES[pathname() as Indexer])
  });


  return (
    <div id="header" class={styles.wrapper}>
      <h1 class={styles.header} >
        {header()}
      </h1>
      {props.children}
    </div>
  )
}

const PAGES = {
  "/": "Home",
  "/Library": "Library",
  "/Settings": "Settings",
  "/Downloads": "Downloads"
} as const

type Indexer = keyof typeof PAGES;

export default function Header(props: ParentProps) {
  const location = useLocation();
  const pathname = createMemo(() => location.pathname);
  const [header, setHeader] = createSignal("Home");

  createEffect(() => {
    setHeader(PAGES[pathname() as Indexer])
  });


  return (
    <div id="header" class={styles.wrapper}>
      <h1 class={styles.header} >
        {header()}
      </h1>
      {props.children}
    </div>
  )
}

9 Replies

Kyros•12mo ago

So basically the way I had it before was something on these lines: On my Sidebar component, I would have some buttons that would trigger a navigation, using useNavigate(). I actually switched to some <A /> tags and I'd like to hear about that too, but that shouldn't really matter I think. Anyway, then, In this component, which is the Header component, I would implement useLocation() to get the current path in order to update the text, by mapping it to every possible route. Now, in React that worked for some reason I actually don't quite understand, but intuitively useLocation probably knew when it was changing and triggered a rerender and stuff. Now, in Solid, i just switched the useLocation by React to the useLocation of Solid, and had it like this:

const PAGES = {
  "/": "Home",
  "/Library": "Library",
  "/Settings": "Settings",
  "/Downloads": "Downloads"
} as const

type Indexer = keyof typeof PAGES;

export default function Header(props: ParentProps) {
  const path = useLocation().pathname
  const header = PAGES[path as Indexer]

  return (
    <div id="header" class={styles.wrapper}>
      <h1 class={styles.header} >
        {header()}
      </h1>
      {props.children}
    </div>
  )
}

const PAGES = {
  "/": "Home",
  "/Library": "Library",
  "/Settings": "Settings",
  "/Downloads": "Downloads"
} as const

type Indexer = keyof typeof PAGES;

export default function Header(props: ParentProps) {
  const path = useLocation().pathname
  const header = PAGES[path as Indexer]

  return (
    <div id="header" class={styles.wrapper}>
      <h1 class={styles.header} >
        {header()}
      </h1>
      {props.children}
    </div>
  )
}

But that didn't work, probably because I didn't implement any form of tracking. That's it, lemme know what you think of my new implementation :)

REEEEE•12mo ago

You just have to make them functions

Kyros•12mo ago

what do you mean?

REEEEE•12mo ago

path and header should be functions So that they can be reactive

Kyros•12mo ago

oh like just do something on the lines of this?

const header = () => useLocation().pathname
const path = () => PAGES[path as Indexer]

const header = () => useLocation().pathname
const path = () => PAGES[path as Indexer]

REEEEE•12mo ago

Yup

Kyros•12mo ago

like just this would work? why the heck do signals and effects and stuff exist then

REEEEE•12mo ago

the reason it works is because pathname is a signal internally if you look at the source. Variables on their own are not reactive like you had in the original post when you make a something a function like this and use a signal inside of it, it's called a derived signal. If you use that function anywhere, and the signal used inside the function changes, so will this functions output if any

Kyros•12mo ago

Oh ok Thanks Very clear explanation too

Gaming

Programming

Not sure whether I'm using reactivity right... (Codereview)