React - difference between function and component

Question

I'm just starting to learn React, and I noticed that the App.js component which is initially created differs from the one in the tutorials (which are pretty recent).

The one generated looks like this:

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;

The one in the tutorials looks similar, but looks something like this:

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

class App extends Component  {
  render() {
  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;

Have there been any recent changes to the default App.js?

Possible duplicate of [React: when to use ES6 class based components vs. functional ES6 components?](https://stackoverflow.com/questions/36097965/react-when-to-use-es6-class-based-components-vs-functional-es6-components) — jonrsharpe, Jul 27 '19 at 13:17
Some of the answers to the proposed duplicate are outdated. With the introduction of hooks in react 16.8, you will rarely or never need class components (unless you really like classes, of course. [There are no plans to remove classes from React.](https://reactjs.org/docs/hooks-intro.html#gradual-adoption-strategy). — Håken Lid, Jul 27 '19 at 13:21

score 3 · Answer 1 · answered Jul 27 '19 at 13:49

Yes, this is a quite recent change. It was merged in March 2019.

https://github.com/facebook/create-react-app/pull/6451

In practice there's no difference between the two version of App.js, since the class only implements the render method. Using a class component here is perfectly fine, and there's no plans to get remove class components from react.js.

You will have to ask the create-react-app team why they changed it. They presumably want to use function components wherever possible. With the introduction of hooks in react 16.8, almost everything that used to require class components can now be done using function components.

Walter Monecke · Answer 2 · 2019-07-27T13:38:18.897

One is called a functional component and does not have a this.state you can refer to, but rather the UI is controlled by this.props. The other is a full-blown component where you can have this.state. Also, functional components do not have render methods, they just return JSX.

Functional components are usually more performant and should be used when you don't need to use this.setState within a component.

If you wanted to toggle a button on and off within a functional component, you would NOT be able to it using its INTERNAL state - because it does not have one in the first place. You would have to refer to the PARENT component using this.props.isButtonClicked for example like this:

class ParentComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isButtonClicked: true,
    }
  }

  render() {
    return (
      <FunctionalComponent isButtonClicked={this.state.isButtonClicked} />
    )
  }
}


//                                        | here you can grab the variable
export const FunctionalComponent = ({ isButtonClicked }) => {
  if (isButtonClicked) {
    return (...clickedButton)
  }

  return (...unclickedButton)
}

As you can see here the state of the functional-component is defined by the PARENT. The parent's state decides whether it is clicked or not. This is the benefit of having a class-component.

On the other hand, you could make a button with its own internal state to decide if its clicked or no.

EDIT: So with React hooks you can now have state within functional components. My bad.

Function components can certainly have state. That's what [`React.useState`](https://reactjs.org/docs/hooks-state.html) is for. — Håken Lid, Jul 27 '19 at 13:25

React - difference between function and component

2 Answers2