edygar Comments - Answer Overflow

Topics

edygar

•Created by SleepPolar on 5/21/2024 in #support

Problems changing the value of a reactive signal returned from a function

The problem with benchmarks is not what we measure but rather what we miss to measure. xD So besides the CPU time, you should measure the pressure on the GC. Having that said, xD I've no idea, the benchmark I usually do is just the DevTools' ones, Lighthouse+memory snapshots.

51 replies

•Created by SleepPolar on 5/21/2024 in #support

Problems changing the value of a reactive signal returned from a function

Vanilla is the most optimized way, solid createSignal gets reaaaaaaally close to it, with store you lose just a bit, but when you compare to react, there’s no reason for concerns

51 replies

•Created by SleepPolar on 5/21/2024 in #support

Problems changing the value of a reactive signal returned from a function

No description

51 replies

•Created by SleepPolar on 5/21/2024 in #support

Problems changing the value of a reactive signal returned from a function

solid/store, either the createMutable and the createStore, resort to wrapping the object/array with a Proxy, and there's an overhead cost for that

51 replies

•Created by SleepPolar on 5/21/2024 in #support

Problems changing the value of a reactive signal returned from a function

There's this benchmark to help you understand a bit: https://krausest.github.io/js-framework-benchmark/2024/table_chrome_125.0.6422.60.html#eyJmcmFtZXdvcmtzIjpbImtleWVkL3NvbGlkIiwia2V5ZWQvc29saWQtc3RvcmUiXSwiYmVuY2htYXJrcyI6WyIwMV9ydW4xayIsIjAyX3JlcGxhY2UxayIsIjAzX3VwZGF0ZTEwdGgxa194MTYiLCIwNF9zZWxlY3QxayIsIjA1X3N3YXAxayIsIjA2X3JlbW92ZS1vbmUtMWsiLCIwN19jcmVhdGUxMGsiLCIwOF9jcmVhdGUxay1hZnRlcjFrX3gyIiwiMDlfY2xlYXIxa194OCIsIjIxX3JlYWR5LW1lbW9yeSIsIjIyX3J1bi1tZW1vcnkiLCIyM191cGRhdGU1LW1lbW9yeSIsIjI1X3J1bi1jbGVhci1tZW1vcnkiLCIyNl9ydW4tMTBrLW1lbW9yeSIsIjQxX3NpemUtdW5jb21wcmVzc2VkIiwiNDJfc2l6ZS1jb21wcmVzc2VkIiwiNDNfZmlyc3QtcGFpbnQiXSwiZGlzcGxheU1vZGUiOjF9

51 replies

•Created by SleepPolar on 5/21/2024 in #support

Problems changing the value of a reactive signal returned from a function

Exactly, the worst part is not knowing what’s causing some update. Again, in your case I don’t think it will ever be the case

51 replies

•Created by SleepPolar on 5/21/2024 in #support

Problems changing the value of a reactive signal returned from a function

Imagine now you grab a 3rd party component and pass the board as property. If they mutate your board, it will update the screen, but how are you going to reason about it other than looking the component’s code?

51 replies

•Created by SleepPolar on 5/21/2024 in #support

Problems changing the value of a reactive signal returned from a function

The only downside for createMutable is that in an application, passing around this ref is exposing your state to 3rd party components that my mutate your state without you knowing about it, but that’s on a large scale app

51 replies

•Created by SleepPolar on 5/21/2024 in #support

Problems changing the value of a reactive signal returned from a function

And the code is very readable now

51 replies

•Created by SleepPolar on 5/21/2024 in #support

Problems changing the value of a reactive signal returned from a function

In general there’s a performance gap in between them both, but let’s be real, the difference is waaaay to small for you to concern, it’s still orders of magnitude faster than React

51 replies

•Created by SleepPolar on 5/21/2024 in #support

Problems changing the value of a reactive signal returned from a function

Summing up, the code is more concise, and still have the read / write segregation

51 replies

•Created by SleepPolar on 5/21/2024 in #support

Problems changing the value of a reactive signal returned from a function

It's up to you, but I find it easier to let the store handle the whole matrix, while reading, you are spared from calling the signals such as board[0](), if board was a store, all it would take would be board[0]. Also, the update function has a lot of useful things like: update members of an array with a filter function; a range and things like that; you can read more on https://docs.solidjs.com/concepts/stores#path-syntax-flexibility

51 replies

•Created by edygar on 5/11/2024 in #support

Hydration mismatch

@ryansolid I was thinking, maybe there's an opportunity to add a lint rule, warning level, whenever a component expects a JSX.Element as property, to avoid reading more than once or to wrap on a memo

27 replies

•Created by SleepPolar on 5/21/2024 in #support

Problems changing the value of a reactive signal returned from a function

I found createStore to be very convenient for handling these kind nested signals. Like (sorry, the code is a bit messy) here: https://github.com/edygar/minesweeper https://github.com/edygar/puzzle

51 replies

•Created by binajmen on 5/20/2024 in #support

How do you delete an entry in an array when using `createStore`

You're right, without the referential stability, any changes would cause For to iterate all items. But with the Index or with a createMemo it works fine

46 replies

•Created by binajmen on 5/20/2024 in #support

How do you delete an entry in an array when using `createStore`

Yeah, this is a very safe option

46 replies

•Created by Hussein on 5/20/2024 in #support

How do i conditionally add something to <head> based on what createAsync returns?

Could you try this one? Just for learning

const getChat = cache(async () => {
  return { messages: [{ text: "hi", author: "me" }] };
}, "chat");

const Recaptcha = () => {
  useHead({
    tag: "script",
    id: "recaptcha",
    setting: { close: true },
    props: {
      src: "https://www.google.com/recaptcha/api.js",
      async: true,
      defer: true,
    },
  });
}

export default function Contact() {
  const chat = createAsync(() => {
    return getChat();
  });

  return <Suspense>
    {chat()===null && <Recaptcha />}
  </Suspense>

const getChat = cache(async () => {
  return { messages: [{ text: "hi", author: "me" }] };
}, "chat");

const Recaptcha = () => {
  useHead({
    tag: "script",
    id: "recaptcha",
    setting: { close: true },
    props: {
      src: "https://www.google.com/recaptcha/api.js",
      async: true,
      defer: true,
    },
  });
}

export default function Contact() {
  const chat = createAsync(() => {
    return getChat();
  });

  return <Suspense>
    {chat()===null && <Recaptcha />}
  </Suspense>

69 replies

•Created by Hussein on 5/20/2024 in #support

How do i conditionally add something to <head> based on what createAsync returns?

ahá! so the trick was === null

69 replies

•Created by binajmen on 5/20/2024 in #support

How do you delete an entry in an array when using `createStore`

True, but if you are not intending to reorder and you are just appending, it works fine

46 replies

•Created by Hussein on 5/20/2024 in #support

How do i conditionally add something to <head> based on what createAsync returns?

🤣 don't think so, It's just my inexperience

69 replies