React offers two ways to define components: they can be functional or class-based. If you are new to React, you may be wondering what the difference is between them. The React documentation doesn't clearly explain when and why you would use one or the other, and what the pros and cons of each type are.In this article I will help you understand the difference between functional and class-based components. You will know why you may prefer one over another.What are functional and class-based components?A functional component is a Javascript function that takes a single parameter or props object and returns a React component. The returned component then is rendered by React.const MyHello = props = { return h2Hello, {props.name}/h2;};It is even more straightforward if we take advantage of ES6 Arrow functions expressionsconst MyHello = props = h2Hello, {props.name}/h2;The value returned by the function only depends on values passed in props parameter. That is, given the same props, a functional component always renders the same result.


I guess you came to this post by searching similar kind of issues in any of the search engine and hope that this resolved your problem. If you find this tips useful, just drop a line below and share the link to others and who knows they might find it useful too.

Stay tuned to my blog, twitter or facebook to read more articles, tutorials, news, tips & tricks on various technology fields. Also Subscribe to our Newsletter with your Email ID to keep you updated on latest posts. We will send newsletter to your registered email address. We will not share your email address to anybody as we respect privacy.

This article is related to

react,front-end-development,javascript