Are there downsides in wrapping a functional component in a class?

Viewed 23

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?

0 Answers
Related