React v17 Component types— Functional, Class, Exotic, Factory, Pure for JS & TS deep dive.

At the core of React is components. Components are like a function. They let you build your front-end implementation breaking down complex UI into small chewable stand-alone pieces.

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

— React.org docs

If you just starting with React, migrating to TypeScript (TS) from JavaScript (JS) or other UI frameworks, or just want to see the difference and benefits between TS & JS, this article is going to give you a good overview of the components and what you can do with React.

At the current state of React (17) you can create three types of component:

• Functional components
• Class components
• Factory Components

Why is it important to understand all the different React Components types?

Writing components correctly can help to reduce the complexity of your app, ensure you select the right type of component for the job, avoid pitfalls, and increase performance.