I know that after the emergence of React Hooks, functional components are able to act almost the same as the class components, and I have seen lately an encouragement wave to use functional components.
My question is, could it hurt in any means to have a hybrid react app with some functional components and some class components? I understand that react would not complain about it, but I am looking for an experienced best practices, did inconsistency with component's types cause any problems?
Any tips are appreciated.
After sometime of using a hybrid project, I came to the conclusion that it is better to use functional components for the whole project. Not for any technical reason, but because of the community support.
Many of the packages today are made with functional components only (or mostly) in mind, having class components may require an additional workarounds to make it work.
Some packages creates a short-hand hooks for easier usage, eventually it becomes the official supported way for using the package, like what happened with react-alert.
Personally, I have function components that don't manage state and class components that do. However, this is not mandatory. With React hooks you can do everything with functions. It is your choice, it won't impact performance much. Functional components can be more performant when used right. Read more here
Related
I'm going through some courses that were made before react hooks were a thing, now I'm wondering if there is any reason at all to use class-based components over functional components now that hooks exist?
I can't seem to come up with a reason or scenario where a class-based component would be preferable, but maybe I'm just not aware of certain corner-cases where a class-based component would be the go-to choice.
Appreciate any feedback regarding this.
Thanks in advance!
Class components are still used, but there is no particular reason to continue to do so.
Tthe Facebook team recommends that all new React code is hook-based functional components, and not class-based. You can mix class components and hook-based components, so there is no reason to rewrite your class components.
You can read more at https://reactjs.org/docs/hooks-faq.html
At the company I work for we have mixture of both since we started using react before hooks. In my experience class components tend to have a lot more state logic, are fatter, tightly coupled, and harder to test. However, even though we're moving towards developing functional components, some people coming from a c# background tend to pick up class based components more easily. I would highly suggest using functional components but depending on the background of your team it might not hurt in the short run to use class based ones.
The only good reason that I can think of for using class components these days would be to create error boundaries as:
Only class components can be error boundaries.
From https://reactjs.org/docs/error-boundaries.html
I have a question regarding the React Hooks and class based components. I've heard from some developers that using functional components with React Hooks as a children of class based components may lead to some tricky bugs and that it's better to avoid doing so. I don't have more information about that and didn't find any articles or something like that.
So does anyone knows if it's true or not?
And if it's true please give me some examples or at least explain that to me.
I think the main reason of it is that we should stick with one style per project. I mean it is better to use only hooks (new projects) or only class components (for example in older projects) because doing 2 similar things in the same time will be hard for not experienced developers. But this is only my personal opinion.
Regarding your problem I think you have mistook it with this sentence "You can’t use Hooks inside of a class component". That means you can not apply hook to class component, but it is safe to render hook based component inside class.
So both class-based and functional components can work with state and lifecycle methods, if I am not mistaken. And that it is possible to structure your app with both or just functional components using hooks.
I was wondering if there are actually best practices in the real world. What approach is usually used in a corporate environment? Is there a definite answer to this or do companies combine all approaches constantly?
Using class components is "mildly discouraged". Which means writing new code mostly using function components (unless there are compelling reasons not to) and not spending any time/resourses on rewriting existing codebase to move from class components to their functional counterparts.
An example of a compelling reason to use class component would be the need to optimise the component that uses Redux (e.g. is connected to Redux store) for performance to the extent beyond what hooks allow.
Here we are changing all class components to functional components using hooks. Depending on component complexity we don't change for now.
But this is not a rule, actually, this is not recommended.
here is a React blog that covers this.
I'm starting a new project that's based on React >16.8, where Hooks are now available and stable. I've played around with them and really like what they offer, and would like to adopt them as much as possible in my project. My question is.. how much? Is there any reason for them to not be 100%?
Since functional components are now offering the full arsenal of functionality that class components do, are faster, are much easier to write and much easier to read, are there still reasons to use class-based components?
At the time of writing this, there are only a few small edge cases not covered by functional components using hooks (see this FAQ) such as getSnapshotBeforeUpdate and componentDidCatch lifecycle methods. These are planned in a future hooks update.
Aside from those, every other feature of classical components can be rewritten in functional components that use hooks.
Classical components allow inheritance, but I personally don't consider component inheritance as part of the list of classical component features because it has been strongly advised against since the beginning of React, as it goes against the design pattern React was built to accomplish.
Overall, after a few more updates to the hook feature, all classical components will be entirely rewritable as functional components that use hooks.
You will need classes if you want inheritance, or want a component with common functionalities and extend it as needed. Other wise hooks provide a better and cleaner, easy to read, faster way to do almost all class functions.
Check this To-Do App with out using any classes.
Now that React finally has hooks, will this eventually be the new standard for creating components or will the need to create class components still exist?
I understand that at the moment hooks can not accomplish everything a class can. Such as, providing hooks to lifecycle methods for getSnapshotBeforeUpdate and componentDidCatch. However, the React team has said they plan on adding this functionality soon. They also mention that there are no plans to remove classes from React.
So when all lifecycle methods are supported is there any reason to create class components? Do classes still handle certain situations better than a functional component at this point?
I'm going to politely disagree with the comments above. Hooks are 100% the future of React. I'd highly recommend reading the Medium article that Dan Abramov wrote in October 2018. There is also a video at the top of the article of Dan Abramov delivering the keynote address at the last React Conf. In his address he introduces hooks for the first time. He adds towards the end of address that he does not recommend refactoring your old components immediately, but he does recommend using hooks moving forward (and this is when hooks were still an alpha release):
I ask you not to rewrite your whole apps in hooks...because personally I find that it takes a bit of a mind shift to start thinking in hooks, and it might be a bit confusing if you just try to take a class Component and convert it, but I do encourage you to try using hooks in some of the newer code that you're writing and let us know what you think.
He follows that with:
So, in our view hooks represent our vision of the future of React. But, they also represent the way we move React forward, and that is that we don't do big re-writes. And, that is that we want the new patterns that we like better to co-exist with the old patterns.
He discusses this in greater detail if you watch the whole thing. I believe the take away from this is that Facebook and Dan Abramov see hooks as the future of React (so do I, but my opinion doesn't matter). They see the patterns that emerge from hooks as significantly better than the patterns established by class Components. They also indicate that the reason they intend to maintain class Components is because they don't intend to re-write React or introduce breaking changes.
There is also less code bloat due to the use of stateful functions as opposed to extending classes. Hooks hook directly into the global application state maintained by the React framework, as opposed to maintaining it locally through an abstraction (which is why they're called hooks). Hooks promote code re-usability through custom hooks. Hooks allow us to monitor individual state without lifecycle methods and conditionals through useEffect. There are plenty of other benefits to using hooks over class Components, but I don't want to write a book here.
In addition to the benefits listed, and the praise from the Facebook team, I'd point to all of the third-party libraries that are adding support for hooks. The FAQ page you shared indicates that both Redux and React Router are planning on releasing support for hooks. In fact, the Redux maintainers have been excitedly discussing hooks since they were introduced to the public. And, Ryan Florence (the creator of React Router) spoke after Dan Abrimov at React Conf. He actually gave a greater endorsement for hooks:
Dan just said "don't re-write your apps in hooks". I think you should.
In addition to those, Material-UI version 4-alpha is out, and they have introduced hooks as well.
In summary, hooks are the future of React, and we should be using them. They are in stable release since React v16.8.0, and there is no reason not to predominantly use them moving forward.