Props memoization primitive proposal ("memoProps")

[AFatNiBBa]

I made a component that used more than once some of the properties that were passed to it, that turned out to be a problem when I used it since I passed a computationally heavy value to one of those properties.
This is a minimalistic example (That can run on the solid playground) of that situation:

import { render } from "solid-js/web";

function Comp(props: { v: number }) {
  return <>
    {props.v}
    <br />
    {props.v}
  </>
}

export default function Index() {
  return <>
    <Comp v={(console.log("*computationally heavy*"), 5)} />
  </>
}

render(Index, document.getElementById("app")!);

If you check the console you'll see that "computationally heavy" is printed 2 times instead of 1, a simple solution is to wrap it in a memo like so:

import { createMemo } from "solid-js";
import { render } from "solid-js/web";

function Comp(props: { v: number }) {
  const v = createMemo(() => props.v); // ← The memo
  return <>
    {v()}
    <br />
    {v()}
  </>
}

export default function Index() {
  return <>
    <Comp v={(console.log("*computationally heavy*"), 5)} />
  </>
}

render(Index, document.getElementById("app")!);

Since I needed to do that for a lot of components that used a lot of their props multiple times I came out with this function:

/**
 * Returns an object with a sub-set of the properties contained in {@link obj}.
 * Each property on the resulting object is a memo to the one on {@link obj}
 * @param obj Object to partially memoize
 * @param keys List of the {@link obj}'s keys to include on the result
 */
export function memoProps<T, K extends readonly (keyof T)[]>(obj: T, keys: K) {
  const out = {};
  for (const elm of keys)
      Object.defineProperty(out, elm, { get: createMemo(() => obj[elm]) });
  return out as Pick<T, K[number]>;
}

Which could be used like so:

import { createMemo } from "solid-js";
import { render } from "solid-js/web";

// * IMPORT OF "memoProps()" *

function Comp(props: { v: number }) {
  const memo = memoProps(props, [ "v" ]); // ← Perfectly fine to memoize multiple properties at the same time by passing them in the array
  return <>
    {memo.v}
    <br />
    {memo.v}
  </>
}

export default function Index() {
  return <>
    <Comp v={(console.log("*computationally heavy*"), 5)} />
  </>
}

render(Index, document.getElementById("app")!);

[thetarnav]

the destructure helper will do a similar job, but will return functions instead.
It would be interesting to add a variant that keeps the object from too

[AFatNiBBa]

Thanks for letting me know about deatructure, I hadn't noticed it yet