React.js class components and function components

• UUID: 5b54586b-b457-4aa9-993d-b563f719ef41

Key points about React.js class component as function component as well as the support in related applications.

• It makes no difference to use React.js class component or function component if generic parts are abstracted into separate files
  • as class component and function component are both dependant on React.js runtime
  • Users of React.js can have preferences but not really a choice of later decouppling from React.js
    • although easier if using class component when for example migrating to Preact.js
    • if React.js features are deeply "used", then life is easier without thinking about decoupling from React.js
      • as React.js is MIT licensed
      • as it could be easier or more efficient to just reimplement instead of migrating
• Essentially, class in JavaScript is also function
  • but class is a special type of function
• React.js class component is
  • more native to vanilla JavaScript (which can be used in different JavaScript runtime)
    • with relatively loose link to React.js runtime by extends React.Component
  • more similar to "classic" GUI components which exists for Java, Android, and iOS
    • with lifecycle hooks/callbacks
• React.js function component is
  • more compact
    • but with more obfused parts (more details hidden)
      • such as the useState() in function component A is in fact different from the useState() in function component B
        • the useState() takes its context/closure into account when it is called
  • very much locked in React.js runtime
• Next.js
  • React.Component and React.PureComponent only works in Client Components