After reading a lot of documentations over the web and in SO (here) , most people suggested to use stateless functions (functional components) whenever possible.
Even most life cycle methods of Class components have been replaced by hooks like useState and useEffect.
I've created some projects using hooks and their class equivalents , I see the difference in the amount of code lines and functionality.
So , which one is better over the other ? Functional component of Class component ?
If you mean better -- by means of efficiency, it's very hard to measure. Here is a great post by Dan Abramov on a benchmark where in the end, he says:
Are Hooks always faster than HOCs? No! There are cases where one approach wins over the other, and it depends on many things.
Now, here is my personal experience:
Our React+Redux SPA was started before the era of hooks, and we have over 100 million users and about 300,000 to 400,000 lines of code (not bragging here, just to have an idea that it is indeed a large application).
When hooks were officially released for Production and we finally updated our React version, modals, inputs, buttons, image loaders, and many other simple components looked amazing when migrated from class components to functional ones with hooks.
The code became much cleaner and easier to maintain. Some Components/HOCs went from 50-100 lines to just 20 or 30 using hooks. That's amazing!
However, complex pages and container components on the other hand, looked a lot messier. Our Routes, for example, I feel look better using class components.
In these cases, readability using class components is far superior.
Regarding performance, again, I don't think there is a big difference and we almost never had to worry about it, so long the code is well-written.
I created a small project (Markdown Tables Generator) as a sandbox and practice using only functional components and hooks. I really like the useSelector() and useDispatch() hooks, but when asked by a company once on an interview if I would go all-in hooks on their medium/large-sized project, I said I wouldn't.
Hope my experience helps you and I suggest you try both, considering the scope of your project. The great thing about React is that both of them can be mixed up almost seamlessly.
Once component implements componentDidCaught it has to be class based component.
Throttling/debouncing/interval-based logic also looks much better(more clear, more readable) in class with access by reference than in functional component with its closures and useEffect.
Otherwise functional looks better(code is shorter - especially when we use Context API or hooks instead HOC like happens for Redux, better DRY thanks to custom hooks, better control over side effects thanks to useEffect - when to run, how to cancel).
ps and with hooks they are not stateless anymore. Just "functional".
