React Native: Functional and Class Components

Everything you see on screen is Component in React Native.

There are two main types of components in React Native — Functional and Class Components.

Functional Components

As the name suggests, Functional Components are simple JavaScript functions that can be arrow functions or written using function keyword.

Functional components are also called as Stateless component as they cannot manage their state or use lifecycle methods on their own. This becomes obvious that Functional components don’t have render() method.

Pure Functional components focus on rendering the UI rather than behaviour. They simply accept props and return valid JSX element.

import React from "react";
import { Text, View, StyleSheet } from "react-native";
const FunctionalComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.headerText}>Functional Component</Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#806B33",
  },
  headerText: {
    color: "#ffffff",
    fontSize: 20,
  },
});
export default FunctionalComponent;

Class Components

Class components are JavaScript ES6 classes which are extended from a base class called React.Component.

Class components are referred as Stateful as they can manage state and have life cycle methods like constructor(), render() , componentDidMount(), etc.

When writing a Class Component, the only method we need to add is render() as other lifecycle methods are optional. Class components act as a container which can wrap child components into it.

import React from "react";
import { View, Text, StyleSheet } from "react-native";
class ClassComponent extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>Class Component</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#806B33",
  },
headerText: {
    color: "#ffffff",
    fontSize: 20,
  },
});
export default ClassComponent;

We are going to see one more React Feature in this article which is quite useful and relevant to Functional Component. Let’s have a quick introduction about Hooks!

Hooks

Hooks are functions that allow you to hook into React State and lifecycle features from functional component. Hooks don’t work with Class component.

Hooks were introduced in React 16.8. They allow us to use state and React features like lifecycle methods without modifying our existing functional component.

There are two basic rules to follow while using Hooks:

• They should always be called at the Top Level of the component i.e. not within conditionals, loops or nested functions.
• As I mentioned earlier, Hooks can be called from Functional components only.

Conclusion

Hopefully, this article helped you to get an overview of Functional and Class components in React native and idea about when to use which component while developing an application.

Thanks & Happy Reading!