Sometimes we are confused as to when to use function and class components.

Function Component: 

  • Use if the component does not depend on any state, as it does not support states
  • Component have less HTML elements

Example: https://github.com/mail2asik/react-modal/blob/master/src/ModalDialog.js

Class Component: (Recommended)

  • Use if the component required states
  • Component may have more HTML elements and we can split it into multiple inner functions to reuse it in the same Class
  • Component may have event handler methods eg: onClick()

Example: