-
Notifications
You must be signed in to change notification settings - Fork 0
Session 3: November 18, 2021
Topic: React Components https://reactjs.org/docs/components-and-props.html
The first release of React was in 2013, and the latest version is v17.
Even though React provides 2 ways to create components from the beginning, functional and class components, but the real situation was that class components were the only viable option to develop complex apps with React. The reason was that using class components you get a large number of capabilities, for example, state and lifecycle control, while functional components didn’t provide such an option.
The release of React 16.8 in 2019 changes the situation, React offered Hooks for functional components. The introduction of Hooks made it possible to write the entire complex application using only functions as React components.
Further Reading:
I will show how to convert a class component to a functional component, so you can see the difference between them. https://codesandbox.io/s/cocky-bogdan-d7bft?file=/src/App.js
For most cases, I recommend using functional components because
- It is easier to read and understand
- By using hooks it is easier to extract and reuse stateful functionality
https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both
https://reactjs.org/docs/hooks-intro.html#classes-confuse-both-people-and-machines
But there is one case at the moment you have to use class components, you want to use the lifeCycle methods there are no Hook equivalents.
- getSnapshotBeforeUpdate
- getDerivedStateFromError
- componentDidCatchgetSnapshotBeforeUpdate
- getDerivedStateFromError
- componentDidCatch
One common use case is Error boundary https://reactjs.org/docs/react-component.html#error-boundaries
https://reactjs.org/docs/hooks-faq.html#do-hooks-cover-all-use-cases-for-classes
https://github.com/WWCodeTokyo/react-study-group/wiki/The-Client-Server-Model