.convert

In ReactJs, the trends lately have been to move away from class components and start using solely functional components. Let’s talk about the difference!

1. Class components can support lifecycle methods. You are probably most familiar with using componentDidMount() which runs your code on initial render, just the one time. Typically speaking we use this for API calls to populate data, and execute functions upon page load. Functional components were unable to support these methods until the introduction of “Hooks”, a bastion of hope for all React users. The “useEffect” hook is one that replaces these lifecycle methods.
2. Class components can hold state, functional components (natively) cannot. If you have dynamic information rendered within your component a class component with state was the only way to go. However, with the advent of Hooks, particularly the useState() hook, we can now achieve the same result with a much cleaner syntactical interface.
3. Functional components typically expunge of a lot of the riff-raff within the code. Take a look at the two examples below to see what I mean.

functional component

class component

Good news, we were able to clean up that syntax a bunch by switching over to using functional components with Hooks. Welcome to the future, well, the NOW of ReactJs, while the life of Redux hangs in the balance.