Search code examples
javascriptreactjsfunctioncomponentscreate-react-app

What is the difference between function and class components in React?

I've just started learning React and i noticed that the code in the react app looks like this :

import Todos from './components/Todos'
import './App.css';

function App() {
  return (  
    <div className="App">
      <Todos/>
    </div>
  );
}

export default App;

And the tutorial from which I am learning looks like this :

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

class App extends Components {
  render() {
    return (
      <div className="App">
      <h1>App</h1>
      </div>
    );
  }
}

export default App;

Are these two: 'function' and 'class' different ? or they are same?

Solution

  • There're just two different ways of creating components.

    That said, class components allow you to use lifecycle methods, which function components don't.

    Since React 16.8, everything can be done only with function components, in a less verbose way, with hooks.