SolidJS•2y ago

When is `keyed` useful for `<Show />`

The docs don't have a great explanation. My best understanding is that it allows you to use the value that the Show depends on in the rendering of the show but every time i've used a show it's been with a signal. Should I be using the keyed pattern or just reuse the signal? Example:

// not keyed
const Auth = () => {
  const user = createServerData$(/* fetch user from db */);

  return (
    <Show
      when={user()}
      fallback={<button>Log In</button>}
    >
      <span>{user()?.username}</span>
      <button>Log Out</button>
    </Show>
  );
};


// keyed
const Auth = () => {
  const user = createServerData$(/* fetch user from db */);

  return (
    <Show
      when={user()}
      fallback={<button>Log In</button>}
      keyed
    >
      {(u) => (
        <span>{u.username}</span>
        <button>Log Out</button>
      )}
    </Show>
  );
};

// not keyed
const Auth = () => {
  const user = createServerData$(/* fetch user from db */);

  return (
    <Show
      when={user()}
      fallback={<button>Log In</button>}
    >
      <span>{user()?.username}</span>
      <button>Log Out</button>
    </Show>
  );
};


// keyed
const Auth = () => {
  const user = createServerData$(/* fetch user from db */);

  return (
    <Show
      when={user()}
      fallback={<button>Log In</button>}
      keyed
    >
      {(u) => (
        <span>{u.username}</span>
        <button>Log Out</button>
      )}
    </Show>
  );
};

25 Replies

Unknown User•2y ago

Message Not Public

REEEEE•2y ago

I haven't personally used it but I think it's for type safety, basically since user can be undefined if you didn't have keyed you would have to do something like user()?.username or user()!.username https://discord.com/channels/722131463138705510/783844647528955931/1062381188578287686 It's been talked about previously

Unknown User•2y ago

Message Not Public

jesseb34rOP•2y ago

Oh interesting. So if I use a non-signal value for show, it matters but otherwise doesn’t really? I really feel like this needs in depth documentation There is some decent complexity here that seems very useful

Unknown User•2y ago

Message Not Public

jesseb34rOP•2y ago

Is JSX a function? Like if I put a div inside of a show

Unknown User•2y ago

Message Not Public

jesseb34rOP•2y ago

Interesting. So what is the reason to choose one pattern over another? I still feel like I’m missing the why behind the different ways to use show. From what I understand now, you can put either a function or an element inside of show. If you do a function, you can give it a prop that is guaranteed to be defined and equal to the value in “when “ if you use keyed? But you can also use keyed with an element and it does something with preserving reactivity?

Unknown User•2y ago

Message Not Public

jesseb34rOP•2y ago

Huh What a weird attribute

Unknown User•2y ago

Message Not Public

jesseb34rOP•2y ago

Now I feel like this functionality could use some restructuring And maybe renaming or rethinking And def better docs I wish I understood this stuff better so I could help write the docs But I’m like new to dev in general so trying to become experienced enough to fully understand these framework nuances enough to use them is hard enough

Unknown User•2y ago

Message Not Public

jesseb34rOP•2y ago

Ok, that makes sense. So for my specific use case, I have a nav bar that is using Show to change the displayed nav elements based on Auth status. If not logged in I want to show log in and sign up buttons and if logged in I want to show some actions including the users avatar. My user is fetched through createServerData so my show uses when={user()} and has the fallback display login/signup buttons. Should I use keyed and a function child or just the elements that access the signal directly? I’d share code but I’m on my phone right now. My kid is asleep on my chest so I can’t really move 🤣 @1.l

Unknown User•2y ago

Message Not Public

jesseb34rOP•2y ago

the performance difference there feels basically negligible and I def like the less verbose and more readable version

Unknown User•2y ago

Message Not Public

jesseb34rOP•2y ago

So at the core, keyed forces the whole component to rerender when the tracked value in the “when” attribute changes whereas not keyed doesn’t apply any special rendering rules besides conditional

Unknown User•2y ago

Message Not Public

jesseb34rOP•2y ago

And not simple is using a function Which fully rerenders no matter what but keyed provides typing?

Unknown User•2y ago

Message Not Public

jesseb34rOP•2y ago

Weird I guess I’ll avoid using functions right now as a default

lxsmnsyc•2y ago

You could've written

(user) => <>
  {user.name}
  {user.last}
</>

(user) => <>
  {user.name}
  {user.last}
</>

Unknown User•2y ago

Message Not Public

lxsmnsyc•2y ago

it was unnecessarily verbose

Gaming

Programming

When is `keyed` useful for `<Show />`