Reactjs implementation of WebAssembly

Question

I'm trying to get some wasm code in my react app but I can't seem to make it work.

I followed this tutorial, seems to have done the same but it doesn't work for me.

In my App.js I have this code:

import React, { useState } from 'react';
import waApi from './components/wa-api';

function App() {
  const [value, setValue] = useState(8);
  const [result, setResult] = useState();

  return (
    <div className="App">
      <p>
        The factorial of
        <input value={value} onChange={evt => setValue(evt.target.value)} />
        is {result}
      </p>
      <button onClick={async () => setResult((await waApi).factorial(value))}>
        Calculate
      </button>
    </div>
...

and my code for the waApi is:

import {instantiateStreaming} from "assemblyscript/lib/loader";

export default instantiateStreaming(
    fetch('./wasm/as-api.wasm')
);

I made sure that my wasm file is in the right place I have no probleme when running the App I have the right output: web output

The problem is that when I press the calculate button nothing appears. It looks like the call isn't working or my result isn't updating and I don't know why.

This my first time using web assembly so I'm sorry if my question sounds stupid or something.

Answer 1

The way to instantiate wasm is like this:

const { instance } = await WebAssembly.instantiateStreaming(fetch("/wasm/as-api.wasm"));

your functions would then be under instance.exports. for example

instance.exports.factorial(3)

see WebAssembly.instantiateStreaming() for examples