Why use onMount and loaded?

[R-Bower]

Every mitosis component has a state (useStore) with loaded: boolean property. You set this property to true using the onMount hook.

I'm curious about this approach, particularly because it generates the following React component:

export default function Button(props: ButtonProps) {
  const [loaded, setLoaded] = useState(() => false);

  const [classes, setClasses] = useState(() => ({
    base: ''
  }));

  useEffect(() => {
    setLoaded(true);
    setClasses(buttonService.getClasses(props.variant, props.outline, props.intent, props.disabled, props.className));
  }, []);

  return (
    <>
      {loaded ? (
        <>
          <button className={classes.base}>{props.children}</button>
        </>
      ) : null}
    </>
  );
}

The problem with this approach is that it disables SSR support for this component, as the useEffect hook only runs on the client. What are you achieving with this approach?

[CKGrafico]

Thanks for your question,

In version 1.0 the goal was to be able to have everything working in all the platforms and try to have the same feeling in most of the components. Probably to have this setLoaded in a button makes no sense but on other components was really difficult to have the SSR just working.

In next iterations we can start to think about element corner cases (example setloading in a button makes no sense) and platform corner cases (example setloading for itchio component in react make no sense but in svelte makes sense).

Adding to the list thanks!

[CKGrafico]

I'm going to investigate in #77 and a release with improvements will be released after 1.1.0