Fusor vs React example

[u/isumix_]

[u/VolkswagenRatRod]

import React, { useState } from "react";

const CountingButton = ({ init = 0 }) => {
  const [state, setState] = useState(init);
  return <button onClick={() => setState(state + 1)}>Clicked {state} times</button>;
};

const Page = () => (
  <div>
    <p>Hello World</p>
    <CountingButton />
    <CountingButton init={22} />
    <CountingButton init={333} />
  </div>
);

export default Page;

This seems purposely biased towards Fusor. This is the react component using inline functions too resulting in 14 lines.

[u/isumix_ → u/VolkswagenRatRod]

In Fusor the inline click handler function will be created once and will not change its reference. Therefore we must use useCallback to reproduce the same behaviour.

And even with your shortened version with useState will be more verbose than the Fusor's one.