function App() vs class App extends Component in the App.js file

Question

I'm following a tutorial on React (https://www.youtube.com/watch?v=sBws8MSXN7A - dated January 3, 2019) and created a React app with npx create-react-app *app_name*. The App.js file this command generated on my computer is different from what this command generated for the person giving the tutorial. Has React changed since then or is it possible I downloaded something wrong?

My App.js:

import React from 'react';
import logo from './logo.svg';
import './App.css';

    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </div>
      );
    }

export default App;

Tutorial's App.js:

import React, { Component } from 'react'; //different
import logo from './logo.svg';
import './App.css';

    class App extends Component { //different
      render() ( //different
        // The rest of the file is the same
        <div className="App"> 
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </div>
      );
    }

    export default App;

CRA now generates a functional component by default, as the component has no state. See reactjs.org/docs/components-and-props.html - you can write either. — jonrsharpe
– jonrsharpe, Commented Jun 19, 2019 at 22:01
So basically if your component has no state just use functional and if it has state you MUST use class? — Archimedes Trajano
– Archimedes Trajano, Commented Jan 20, 2021 at 20:01

Archimedes Trajano · Accepted Answer · 2021-01-20 20:06:56Z

21

The most obvious difference is the syntax. A functional component is just a plain JavaScript function which accepts props as an argument and returns a React element.

A class component requires you to extend from React.Component and create a render function which returns a React element. This requires more code but will also give you some benefits.

A functional component doesn’t have its own state. If you need a state in your component you will either need to create a class component or you lift the state up to the parent component and pass it down the functional component via props.

Another feature which you cannot use in functional components are lifecycle hooks. The reason is the same as for state, all lifecycle hooks are coming from the React.Component which you extend from in class components. So if you need lifecycle hooks you should probably use a class component.

Conversely, functional components allowed to use hooks where class components are not allowed to.

edited Jan 20, 2021 at 20:06

Archimedes Trajano

43.2k29 gold badges223 silver badges372 bronze badges

answered Feb 3, 2020 at 8:27

WMRamadan

1,2202 gold badges14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ᐅdevrimbaris Over a year ago

"A functional component doesn’t have its own state." Is this statement still true regarding the use of state hooks in functional components?

era5tone Over a year ago

@ᐅdevrimbaris No

Ilya Kushlianski · Accepted Answer · 2023-10-27 08:04:37Z

19

There are basically two ways of writing components in React: functional and class components. The given examples are no different except for this aspect.

React has recently updated their documentation website and switched all examples from class components to function components. You can check it out https://react.dev/learn

edited Oct 27, 2023 at 8:04

answered Jun 19, 2019 at 22:05

Ilya Kushlianski

96811 silver badges17 bronze badges

4 Comments

JayC Over a year ago

Can you have state in the functional component? Or is all functional component stateless

Ilya Kushlianski Over a year ago

Now since react introduced hooks, it's possible to have state in functional components as well. Please refer to reactjs.org/docs/hooks-state.html

Rin and Len Over a year ago

Then why does adding const [x, y] = useState(''); to class App extends Componentgive an error on the equals sign ; expected ? they are clearly different and the same code creates an error on one.

Ilya Kushlianski Over a year ago

Using hooks is of course not supported in class components. But the notion of "component" remains the same. There are just two different ways of writing a component, each with their own rules.

A . L. I · Accepted Answer · 2021-03-17 06:13:45Z

There is one major difference between these methods of defining a component. It's related to the state of the particular React component.

So, Function-Based Components => Are also called Stateless components reason being they don't update to any changes that are being applied to a particular component.

So, If I want to change some value in this <p>Hi, Welcome</p> on a button press to <p>Welcome Back</p> It wouldn't be possible to use function-based components.

On the other hand, Class-Based Components => Are also called Stateful Components, being that they update to changes that occur to the component.

So, the previous example would work.

Personally, I would say a simple way to remember is Functional Components for static data and Class-Based Components for dynamic and interactive data.

Piotr Labunski · Accepted Answer · 2022-04-10 21:37:00Z

2

The obvious differences are in the syntax and hints are derived from their names in how they will be written. They both render JSX (which is React’s way of writing HTML and JavaScript), however for the class component you define a class that extends the React.Component library. Additionally, the class component utilizes a render() method. Here’s an example:

App.js: functional component

import React, { Component } from 'react';
import './App.css';

function App() {
    return (
        <h1>hello</h1>
    );
}

export default App;

App.js: class component

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <h1>hello</h1>
        );
    }
}

export default App;

edited Apr 10, 2022 at 21:37

Piotr Labunski

1,6564 gold badges21 silver badges27 bronze badges

answered Apr 6, 2022 at 12:05

Omar Saade

6357 silver badges14 bronze badges

Collectives™ on Stack Overflow

function App() vs class App extends Component in the App.js file

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related