What is the difference between Class and Const when creating UI in react-Native?

Question

const App = () => (
  <View>
    <Text>Test</Text>
  </View>
  )

class App extends Component {
  render() {
    return (
      <View>
        <Text>Test</Text>
      </View>
    );
  }
}

When I test, two things are the same. Please tell me the difference between these two.

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) — Vikas Singh, May 03 '19 at 08:21

Tim · Accepted Answer · 2019-05-03T08:31:20.633

5

A Class Component is a stateful component and const App is a stateless (or functional) component.

A stateful component is used to:

initialize the state
modify the state
render something

Additionally it has lifecycle methods.

Whereas a stateless component is often just used to return a piece of UI.

In short: a class component is more powerful than a functional component

EDIT:

Since React Native 0.59 also functional components can have a state. See Hooks-Intro for more information.

edited May 03 '19 at 08:31

answered May 03 '19 at 08:21

Tim

10,459
4
36
47

1

I think this is not true anymore after hooks – Doğancan Arabacı May 03 '19 at 08:25
@DoğancanArabacı you're right. I've updated my answer with a link to the hooks introduction. – Tim May 03 '19 at 08:32

score 0 · Answer 2 · answered May 03 '19 at 08:20

Using class you can access life cycle hook and you can store a state in the class. Using class you can build stateful component or smart component. Meaning that you handle logic in your class component like doing http request

Using functional component. In this case is const you can build dump component or stateless component (component only use to display data). This is a great way to keep your react code maintainable and readable. Breaking it up into smaller components and passing props to child components.

You can read it more here because is very long expain so I just give you brief overview

Regards

score 0 · Answer 3 · answered May 03 '19 at 09:27

Class will be for containers components. "smart" functional component that conatins State. and data and previewing "dumb" view components.

The "dumb" functional component is used to preview something or better say. render something that is usualy sent from a container.

Now days using hooks you can get the whole life cycle of the class component in a functional component. The only difference is that the functional is state less!

What is the difference between Class and Const when creating UI in react-Native?

3 Answers3