Const = () => vs Class Functions function name() {} in React Native

Question

I'm new to react native, I'm bit confused about components.

As I created first react native app I saw App.js the components in App.js created as per following code:

export default function App() {
 ...
}

and as I saw tutorials many people almost all people making components as per following code:

const FirstComponents = () => {
  ...
}

I'm also confuse about function components and class based components which created as per following code:

export default class FirstComponents extends Components(){
 ...
}

What is the difference between function and class base components?

Please provide me answer with examples. Your time will be appreciated.

Answer 1

In javascript there are multiple ways to create a function. For example:

function myFunction () {
//some action
}
const myFunction = () => {
//some action
}

These two are functions and makes the same thing.

Now second part of your question is "What is the difference between functional and class based components?"

Class based components used for controlling your state and for lifecycle methods(ComponentDidMount and etc...) in the past. And if you are not using state in your component or lifecyle methods, you would use functional based component. Basically if you have a small component with only some UI things, it was best to use functional components. However with React version 16.8 React team intruduced hooks.

Hooks provides the same concepts with your state and component lifecyle methods and more. With hooks you can control your component even if they are funcitonal components.

Answer 2

The first two snippets are similar in terms of declaration. Both are functional components. These are different from class based components. There are several differences:

1. Hooks can be used in only functional component, class based can't.
2. constructor is used to initialize this in the class component but in functional you don't require this.
3. Lifecycle hooks are not available in the functional component, they are part of class component.
4. You can use useEffect hook for a lifecycle hook like componentDidMount.

For a short example:

function App(){

    const [count, setCount] = useState('');

}

In the above example "count" is a local state property of component and setCount is a method which updates the state.

class App extends React.Component{
   constructor(props){
      super(props);
      this.state = { count: 0 };
      this.increaseCount = this.increaseCount.bind(this);
   }

   increaseCount(){
      this.setState({count: this.count+1});
   }
   // lifecycle methods like componentDidMount, componentDidUpdate etc.
   render(){
      return(
        <button onClick={this.increaseCounter}>INCR</button>
      );
   }

}

In this class component you can see state is defined in the constructor and it is been updated with the setState method.

_{real time example will be too much to add, rather i suggest you to take simple examples to have a grasp of the concepts.}