Below I have a "functional" component wrapped in a arbitrary class simply to organize the code rather then including operations before the return within the functional component, I'm thinking about organizing the component in a class. This is conceptually different from a class component.
/** @jsx h */
import { h } from "preact";
class $NumberInput {
constructor (
public value: number,
public onChange: (value: number) => void) {}
get proceessValue () {
if (this.value === 1) return 2
return this.value
}
render() {
return <input type="number" value={this.proceessValue}/>;
}
}
function NumberInput (props: { value: number, onChange: (value: number) => void }) {
const Number = new $NumberInput(props.value, props.onChange).render;
return <Number />
}
Are there any downsides rendering a component from a class in this way, when it comes to optimizing the dom tree? Would I want to memo this const Number call?