Why does create-react-app create the App.js file as a functional component?

user_5880716 0
Viewed 881

I'm trying to learn React and I noticed that when I used npx create-react-app my-project, it created the App.js file as a functional component, as opposed to a class component, as it did in past versions. I found this commit on create-react-app's repo where they changed it.

What I'm trying to figure out, is why they did this? I read this article on class components vs. functional components and as far as I understand it, functional components are stateless. I must be misunderstanding, or maybe just do not have the full knowledge in this area yet, as I cannot understand why we would want the main component for the entire app to be stateless?

P.S. I understand that the App.js file can be easily changed back to a class component, but I'm trying to understand why they would change it to default to a functional component.

create-react-app reactjs javascript
1 Answers

React recommends using functional components and hooks when possible, because class-based components can result in a few unnecessary difficulties:

Classes confuse both people and machines

In addition to making code reuse and code organization more difficult, we’ve found that classes can be a large barrier to learning React. You have to understand how this works in JavaScript, which is very different from how it works in most languages. You have to remember to bind the event handlers. Without unstable syntax proposals, the code is very verbose. People can understand props, state, and top-down data flow perfectly well but still struggle with classes. The distinction between function and class components in React and when to use each one leads to disagreements even between experienced React developers.

Additionally, React has been out for about five years, and we want to make sure it stays relevant in the next five years. As Svelte, Angular, Glimmer, and others show, ahead-of-time compilation of components has a lot of future potential. Especially if it’s not limited to templates. Recently, we’ve been experimenting with component folding using Prepack, and we’ve seen promising early results. However, we found that class components can encourage unintentional patterns that make these optimizations fall back to a slower path. Classes present issues for today’s tools, too. For example, classes don’t minify very well, and they make hot reloading flaky and unreliable. We want to present an API that makes it more likely for code to stay on the optimizable path.

To solve these problems, Hooks let you use more of React’s features without classes. Conceptually, React components have always been closer to functions. Hooks embrace functions, but without sacrificing the practical spirit of React. Hooks provide access to imperative escape hatches and don’t require you to learn complex functional or reactive programming techniques.

Using a functional component by default can make things easier for those learning React (and for those who already know React but prefer using functional components, which many do).

user_95152070
Related