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


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()