Difference between 'function App()' and 'class App extends Component' in react native

Question

I'am newly learning react native, and there is one thing that i still don't get or know the difference between, the 'function App() { return() }' and 'class App extends Component { render(); return(...)}'. I know that in the first i use 'useState' and in the second i use 'state' but for sure there are much more differences that i can't seem to find a good answer for. And i don't mean only in 'App.js', but in every js file. I saw alot of tutorials and each time the guy is using one of them randomly, i couldn't find a rule to know when to use each one, so what are the differences between them and when to use each of them?

Answer 1

I write from the very first explanation however I know you know them already.

In the javascript there are several types of functions. the regular functions "which start with lower case letter" and the constructor function "which start with the Uppercase letter". the constructors are used to make objects. What their functions do is making a big object.

constructor Example:

    function Car(color){
      this.color = color;
      this.drive = () => console.log('driving');
    }

the classes are the same as constructors in terms of functionality, in fact they are syntactic sugars , they have prebuilt helpers that make your able to extend another class or constructor in an easier way.

class Example:

    class Car = {
      constructor(color){
        this.color = color;
      }

      this.drive = () => console.log('driving');
    }

The component in React is a prebuilt class and when you write a class like "class App extends React.Component" you're making the App class a component. now when you write a "render(){ return(**) }" inside the App component, you're giving the extended component a new functionality, actually your updating the render method to a new one.

Now functional components are the strait generator functions you can directly use and import them to the react native dom.

functional components don't have prebuilt methods like "componentDidMount, ..." but you can use React hooks which are more flexible and kind of new.

Conclusion: They're both the same in terms of functionality but in functional components there are no extended methods like "componentDidMount, componentDidUpdate, ..." but you can use React hooks instead.