How to pass signals to native dom elements props?

[chneau]

Hello,

Here is an example

const ButtonWithLoading = ({ onClick, children }: { onClick: () => Promise<unknown>; children: ReactNode }) => {
  console.log("ButtonWithLoading render");
  const loading = useSignal<boolean>(false);
  const onClickWithLoading = async () => {
    loading.value = true;
    await onClick();
    loading.value = false;
  };

  return (
    <button onClick={onClickWithLoading} disabled={loading.value}>
      {children}
    </button>
  );
};

Is there a way to pass the loading.value to the disabled props without component refresh?
I tried disabled={loading as unknown as boolean} with no success.
I tried this with success but I'm not sure if there is a more elegant way.

  return useComputed(() => (
    <button onClick={onClickWithLoading} disabled={loading.value}>
      {children}
    </button>
  ));

[rschristian]

The component is refreshing because you're using loading.value. Use just loading, as we outline in our docs.

Here's an example

I tried disabled={loading as unknown as boolean} with no success.

Ignoring the irrelevant TS type assertion, that should work just fine, per the example above.

[chneau]

Just now this simple example does trigger the rerender of the component, as in the console.log prints twice when clicking on the button:

const Example = () => {
  console.log("Example render");
  const loading = useSignal(false);
  const onClickWithLoading = () => {
    loading.value = true;
    setTimeout(() => (loading.value = false), 100);
  };
  return (
    <button onClick={onClickWithLoading} disabled={loading}>
      Test
    </button>
  );
};

That is using these latests deps:

  "dependencies": {
    "@preact/signals-react": "^1.3.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },

[rschristian]

As listed in our docs, the attribute optimization is limited to Preact. Unfortunately React does not expose what we'd need to implement the attribute optimization with it.