At Flatiron, we were introduced to React mainly using class components. And they're tricky to use, but I got used to them and thought they were the bees knees. I got really good at creating them super quickly and passing props down was a breeze, until I decided that Material UI was the frontend framework I was going to work with.
Material UI had almost all of their components written as functional components, something I had seen in lecture but had not really experimented with myself. I dived in head first, fitting in the functional components with the class components, and everything seemed to mesh well. Until state came.
It was inevitable, but especially as I was using Redux, I found myself unsure how I could access the store from this foreign functional component. And that's where I was first introduced to hooks. I didn't quite understand the concept, but after more research I realized they were easier to use than class components! The amount of code needed to access the store was minimal compared to using connect, and the syntax was easier to make sense of. I was amazed and felt like it revealed a whole new side of React for me.
But there's pros and cons to both, and after a bit more research recently, I've listed some of my thoughts in the chart below:
| Category | Functional Component | Class Component |
|---|---|---|
| Functionality | A basic javascript function with state being accessible via hooks | An element of React that can contain state |
| Ease of Use | Definitely easier to understand and implement | More tricky in terms of boilerplate and use of "this" |
| Length of Code | Typically shorter, but can be longer depending on use of custom hooks | Typically more code overall due to boilerplate |
| Problems | Hooks cannot be used inside of loops, conditions, or nested functions; lifecycle methods cannot be accessed without hooks | Steep learning curve and more-so if including Redux |
And these are some of the resources I found most helpful about further understanding hooks and their implementation:
- https://react-redux.js.org/api/hooks
- https://blog.isquaredsoftware.com/2019/07/blogged-answers-thoughts-on-hooks/
- https://www.smashingmagazine.com/2020/04/react-hooks-best-practices/
- https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108
So now I'm curious, with the recent official update including hooks in the newest version of React, where do you stand? Are you pro hooks all the way? Or are class components still your main thing?
Let me know in the comments below as I'm curious what's the community's stance on hooks. Do they got ya hooked?
Latest comments (1)
although classes will still be around, all the newest react related stuff is mostly based on hooks, so it's great to get used to them anyway